h5新标签和css3新特性

一、h5布局元素
二、css3新增样式
- 1.边框圆角
- 2.阴影
- 3.形变：旋转、缩放、位移
- 4.transform-origin 属性
三、过渡效果
四、动画效果
- 1. keyframes
- - 什么是keyframes？
  - keyframes的用法
- 2. 动画属性animation
- 动画案例
- - 1.设置多个百分比的动画效果
  - 2.设置50%的动画效果
- 停止动画效果

一、h5布局元素

布局元素相当于有语义的div，可以让人快速的了解整个静态页面的大致结构。

header：网页头部
nav：导航栏
aside：侧边栏
article：显示文章
section：布局的一部分
footer：网页页脚

二、css3新增样式

1.边框圆角

border-radius: 左上右上右下左下；

如果设置一个值，则这个值代表全部方向；

border-radius:30px;

如果设置两个值，第一个值表示左上和右下，第二个值表示右上和左下；

border-radius: 30px 100px;

若想绘制一个圆，则将border-radius设置为50%即可；

border-radius: 50%;

2.阴影

box-shadow：10px 50px 30px red；
参数分别表示：x轴偏移量 y轴偏移量模糊半径阴影颜色（不设置颜色则默认为黑色）

box-shadow: 10px 50px 30px red;

3.形变：旋转、缩放、位移

transform：
rotate(45deg)：旋转，单位为deg表示角度；
scale(0.5)：缩放，单位为倍数；
translate(x,y)：位移，沿着x轴平移多少px，沿着y轴平移多少px；

/* 顺时针旋转45度 */
transform: rotate(45deg);

/* 缩放0.5倍 */
transform: scale(0.5);

/* 沿着x轴平移50px，沿着y轴平移100px */
transform: translate(50px,100px);

连用多个属性：

transform: rotate(45deg) scale(0.7) translate(100px,100px);

4.transform-origin 属性

设置旋转元素的基点位置；
设置两个值能够改变元素 x 和 y 轴，设置三个值还能改变其 Z 轴；
transform-origin：x y z；

transform-origin: 0;
transform-origin: 0px 100px;
transform-origin: 20% 40%;
transform-origin: 20px 20px 20px;

注意：该属性必须与 transform 属性一同使用。

三、过渡效果

transition
transition-property：过渡属性（如transform，width，height）

transition-property: transform;

transition-duration：过渡持续时间（如1s）

transition-duration: 1s;

transition-timing-function：过度函数；
可选择的选项有：

ease：默认值，规定慢速开始，然后变快，然后慢速结束的过渡效果；
linear：规定以相同速度开始至结束的过渡效果；
ease-in：规定以慢速开始的过渡效果；
ease-out：规定以慢速结束的过渡效果；
ease-in-out：规定以慢速开始和结束的过渡效果；

transition-timing-function: linear;

transition-delay：过度延迟时间（如0.5s）；

transition-duration: 0.5s;

简写：
transition：属性持续时间函数延迟；

transition: transform 1s ease 0.5s;

设置多个值：
transition：属性持续时间，属性持续时间；

transition: transform 2s, width 2s, height 1s;

四、动画效果

用CSS声明动画效果分为两个步骤：

用@keyframes描述动画效果规则；
使用 animation属性将动画与目标元素关联起来。

1. keyframes

什么是keyframes？

@keyframes 是一个代码块，它包含着一系列的CSS规则，统称为 keyframes。一个 keyframe 定义了一个完整动画里某一时刻的一种动画样式。动画绘制引擎会连贯平滑的实现各种样式间的转换。

keyframes的用法

@keyframes + 动画名 {…}
按百分比指定动画：

@keyframes anim {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}
}

from…to…指定动画：

@keyframes anim {from {transform: rotate(0deg);}to {transform: rotate(360deg);}
}

其实，from…to…相当于0%…100%的简写。

2. 动画属性animation

animation-name：规定需要绑定到选择器的keyframe名称；
animation-duration：规定完成动画所花费时间，以秒或毫秒计；
animation-timing-function：规定动画的速度曲线；
animation-delay：规定在动画开始之前的延迟；
animation-iteration-count：规定动画应该播放的次数；

对于动画属性，我们通常使用连写的方式：
animation： keyframe名称动画时间函数延迟播放次数；

/* 动画自动播放两次 */
animation: anim 3s ease 1s 2;
/* 动画无限循环播放 */
animation: anim 3s linear 1s infinite;

动画案例

1.设置多个百分比的动画效果

 @keyframes anim {0% {transform: rotate(0deg);}20% {width: 200px;height: 200px;}40% {transform: rotate(360deg);width: 100px;height: 100px;background-color: yellow;}60% {width: 300px;height: 300px;}100% {width: 100px;height: 100px;}
}
.box {width: 100px;height: 100px;background-color: red;margin: 100px auto;/* 设置动画属性 */animation: anim 10s;
}

注意：开始（0%）与结束（100%）效果相同，可以让动画更平滑。

2.设置50%的动画效果

 @keyframes anim {0% {transform: rotate(0deg);}50% {transform: rotate(360deg);}.box {width: 100px;height: 100px;background-color: red;margin: 100px auto;/* 设置动画属性 */animation: anim 2s linear 1s 2;}

注意：通过观察会发现，在第1s，box完成了旋转360度的动画效果；在第2s，box从360度回到了开始位置。利用50%的这个动画特性，会帮我们实现一些“来回”的动画效果，比如大海上的波浪。

停止动画效果

animation-play-state: paused;

h5新标签和css3新特性相关推荐

前端基础8：HTML5新增标签及CSS3新属性 viewport 动画
HTML5新增标签标签名描述 header 头部 section 区分大模块 nav 导航 footer 尾部 article 文章 aside 侧边栏 audio 音频 video 视频 fig ...
html5新标签和css3的新属性
html5新特性较为常用的有:<artical></artical>标签定义外部的内容.比如来自一个外部的新闻提供者的一篇新的文章,总之久是可以连接外部类似文章的东西.< ...
前端H5新增标签和CSS3高级
文章目录一.CSS3高级技巧 1.精灵图 2.字体图标 3.CSS中的三角 3.CSS用户界面样式 4.vertical-align属性应用 5.溢出的文字省略号显示 6.常见布局技巧 6.CSS初 ...
H5新增标签、CSS3新增属性总结
一.H5新增标签新增元素说明 video 表示一段视频并提供播放的用户界面 audio 表示音频 canvas 表示位图区域 source 为video和audio提供数据源 track 为vid ...
html5新标签 aside,Html5新标签之aside标签详解
这节,我为大家介绍下:html5新标签之标签如何定义及如何使用aside呢? aside这个标签用来定义网页布局的侧栏容器,就相当于:div定义样式然后担当侧栏容器.直接让大家看个例子: body{ ...
html设置字体变瘦标签,使用CSS3 font-feature-settings特性减除字体动画震颤效果
在做 GithubProfile 项目的时候,使用了数字动画展示的效果,如My GithubProfile页面中的commits,stars以及followers数字.实际使用中,由于数字字体不等宽, ...
html5新增标记元素的内容类型,HTML5新标签与javaScript新方法
HTML5 (0106) 1.文档声明 2.字符编码设置 3.验证(http://validator.w3.org/) HTML5新增的语义化标签 1.语义化标签:说明页面内容,便于搜索引擎寻找该内容 ...
h5新增标签及css3新增属性
面试中经常被问,支支吾吾的老是答不全!!血泪教训,决定记下来! h5是html的最新版本,是14年由w3c完成标准制定.增强了,浏览器的原生功能,减少浏览器插件(eg:flash)的应用,提高用户体验 ...
html5 新标签用法,Html5新标签解释及用法
HTM.轻厅设近幸松.备近幸松.备近幸松.备近L 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准.它希望能够减少浏 ...

h5新标签和css3新特性

h5新标签和css3新特性

一、h5布局元素

二、css3新增样式

1.边框圆角

2.阴影

3.形变：旋转、缩放、位移

4.transform-origin 属性

三、过渡效果

四、动画效果

1. keyframes

什么是keyframes？

keyframes的用法

2. 动画属性animation

动画案例

1.设置多个百分比的动画效果

2.设置50%的动画效果

停止动画效果

h5新标签和css3新特性相关推荐

最新文章

热门文章