Css3之探索动画效果

思路
动态让water向右流动
我们需要用到css属性那就是动画@keyframes
关键帧
@keyframes
规则通过在动画序列中定义关键帧(或waypoints)的样式来控制CSS动画序列中的中间步骤。这比转换更能控制动画序列的中间步骤。
如何使用
1 2 3 4 5 6 7 8 9 10 11
| @keyframes slidein { from { margin-left: 100%; width: 300%; }
to { margin-left: 0%; width: 100%; } }
|
关键帧必须和动画属性animation
配合使用
- Animation-name: none(起始值) slide(平滑) bounce(弹跳)
- Animation-delay: 250ms/2s/时间属性 延时作用
- Animation-direction: normal | reverse | alternate | alternate-reverse 演示
- 左向右一次就重置 / 右向左一次就重置 / 左右来回第一次向前 / 左右来回第一次向后
- Animation-duration: ms-s 动画完成一个循环所需的持续时间该值必须为正或零,并且该单位是必需的
- Animation-iteration-count: 动画播放次数设置
在这个例子中我们需要让背景图自动动起来并且重复运动
1 2 3 4 5 6 7 8 9 10 11
| animation: wave 30s linear infinite;
@keyframes wave{ from{ background-position: 0 0; } to{ background-position: 1000px 0; } }
|
我们通过改变背景图的位置来制作移动效果
文字逐一flash效果

我们使用animation-delay 通过对每一个字母的延迟展示制作出逐步闪烁效果
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44
| span{ font-family: fira code; font-size: 10em; filter:blur(2px); color: #fff; animation: animate 2.5s linear infinite; } span:nth-child(1){ animation-delay: 0s; } span:nth-child(2){ animation-delay: 0.25s; } span:nth-child(3){ animation-delay: 0.5s; } span:nth-child(4){ animation-delay: 0.75s; } span:nth-child(5){ animation-delay: 1s; } span:nth-child(6){ animation-delay: 1.25s; } @keyframes animate{ 0%,100%{ filter: blur(2px); color: #fff; text-shadow: 0 0 10px #1e90ff, 0 0 20px #1e90ff, 0 0 30px #1e90ff, 0 0 40px #1e90ff, 0 0 100px #1e90ff, 0 0 200px #1e90ff, 0 0 300px #1e90ff, 0 0 400px #1e90ff; } 5%,95%{ filter: blur(0px); color: #666;
} }
|
项目地址:CSS + HTML