CSS_进阶 css3动画css3css

CSS_进阶 1. 动画 1) 实现步骤
1. 定义动画帧

@keyframes 动画名{ from { // 开始帧 } to { // 结束帧 } }@keyframes 动画名{ 0% { // 开始帧 } 20% {} ... 100% { // 结束帧 } }

2. 设定动画（贺卡）

animation-name: move; 动画名 animation-duration: 2s; 持续时间 animation-timing-function: linear; 时间曲线函数（自由落体，贝塞尔曲线） animation-fill-mode:forwards; 填充模式，动画结束后保留哪一帧规则 animation-iteration-count: 2; 动画迭代次数 infinite animation-direction: alternate-reverse; 动画执行的方向 from->to , to->from animation-play-state: paused; 动画状态 animation-delay: 1s; 延迟时间 animation: move 2s 1s 2 linear; 动画的速写形式

2) 案例（呼吸灯）

hi - 锐客网*{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .container{ width:226px; height: 330px; background: #343434; margin:0 auto ; } .circles{ padding: 36px; /*动画*/ height: 226px; animation-name:wobble; animation-duration: 4.4s; /*9s*/ animation-timing-function: linear; animation-delay: 0s; animation-iteration-count: infinite; } .circles > .outer{ height: 100%; border:5px solid #9b9b9b; padding: 10px; /*动画*/border-radius:50%; border-radius:50%; animation-name:outer_wobble; animation-duration: 4.4s; /*9s*/ animation-timing-function: linear; animation-delay: 0s; animation-iteration-count: infinite; } .circles > .outer > .inner{ height: 100%; border:15px solid #ffffff; border-radius:50%; border-radius:50%; }@keyframes outer_wobble { 20% { padding: 20px; } 40% { padding:10px; } 65%{ padding:22px; } 100%{ padding: 10px; } }@keyframes wobble { 20% { padding: 26px; } 40% { padding:36px; } 100%{ padding:36px; } }.text{ font-size: 22px; color: #ffffff; text-align: center; }HI!

3) 案例（梦幻西游）

梦幻西游 - 锐客网 html { color: #333; font:normal 12px '微软雅黑','Microsoft YaHei'; } body,ul,ol,p,h1,h2,h3 { margin: 0; padding: 0; } ul,ol { list-style: none; } a { text-decoration: none; color: #333; }.content { width: 950px; position: absolute; left: 50%; margin-left: -475px; bottom: 300px; } .content > ul::after { display: block; content: ""; clear: both; } .content > ul > li { float: left; width: 200px; height: 180px; margin-right: 50px; overflow: hidden; } .content > ul > li:last-child { margin-right: 0; } .content > ul > li > div { width: 1600px; height: 180px; animation-name: dong; animation-duration: 1s; animation-timing-function: steps(8); animation-iteration-count: infinite; /*animation-direction: reverse; */ } .content > ul > li > divimg { width: 100%; }/*定义动画*/ @keyframes dong { from { margin-left: 0; } to { margin-left: -1600px; } }html,body,.main { height: 100%; } .main { width: 100%; overflow-x: hidden; } .main > .bg { width: 3920px; height: 100%; margin-left: -1920px; background-image: url('./images/bg.jpg'); background-repeat: repeat-x; animation-name: bg; animation-duration: 30s; animation-timing-function: linear; animation-iteration-count: infinite; }@keyframes bg { from { margin-left: -1920px } to { margin-left: 0; } } 文章图片文章图片文章图片文章图片

2. 动画库 animate.css 动画帧、动画设定规则都有第三方完成，我们直接使用class即可
1) 引入动画库

2) 使用
1. 直接调用动画设定类

2. 引用关键帧

.bounce { animation: flash 10s linear infinite; }

3. 过渡过渡是轻量级的动画，过渡中无需定义关键帧，它解决的问题是当属性改变的时候实行缓缓改变。一般通过伪类来触发。过渡一定发生在属性值改变上（状态发生变化的时候）

transition-property: width; 过渡属性，取值可以为多个，多个值通过逗号分割；关键字：all 所有属性 transition-duration: 2s; 过渡持续时间 transition-delay: 0; 过渡延迟时间 transition-timing-function: linear; 时间曲线函数 transition:transform,background-color 2s,2s 0s linear; 速写形式

4. 变形 transform:变形函数

1. 缩放 scale(2) 2. 平移 translate(100px,50px) 3. 旋转 rotate(360deg) 4. 拉伸 skew(45deg)

5. 媒体查询（响应式布局） 1. 动画题目： 1. 效果要求
（1. 定义：目前两圈的大小为常规大小
（2. 正常运动轨迹：两圈常规大小 -> 外圈向外扩大10px（2000ms） -> 外圈向内回归正常大小（2000ms）-> 内圈向内缩小12px（2500ms) -> 内圈放大至常规大小（2500ms) -> 循环
（3. 加速运动轨迹：两圈常规大小 -> 外圈向外扩大10px（1000ms） -> 外圈向内回归正常大小（1000ms）-> 内圈向内缩小12px（1200ms) -> 内圈放大至常规大小（1200ms) -> 循环
（4. 加速运动轨迹下，当文字显示为：“我很生气”时，内圈的颜色变为红色
（5. 加速运动轨迹下，当文字显示为：“我很高兴”时，内圈的颜色变为绿色
2. 第三方库(职业技能)
【CSS_进阶】（1.iconfont
字体图标库，原理：网络字体 @font-face() font-family
（2.bootstrap
栅格布局（grid layout，原理：flex、float
（3.animate.css
动画库，原理：animation