CSS3添加了过渡和动画让在不使用flash或者JavaScript的情况下做出元素的规律运动的效果,可以使页面变得非常丰富,表现力强。
什么是CSS3过渡(transition)?
CSS3过渡(transition)简单可理解为使元素由一种样式变成另一种样式,为变化添加过程与加效果,注意为元素添加transition样式(尽量不要写到伪类中)
CSS3过度(transition)是一个复合属性:
transition-property:
规定过渡作用在元素的哪条样式上,属性值为,none
(没有过渡属性(清除))、all
(对所有可能样式生效(默认值))、width/height/…
(多个以逗号分隔,指定某个元素过度效果)transition-duration:
规定属性发生变化的过渡时间,默认值是0
,不写时长等于看不到效果,单位秒(s)和毫秒(ms)
transition-delay:
过渡开始前的等待时间, 不计入过渡时间中,注意: transition-delay在恢复也生效
,属性单位秒(s)和毫秒(ms)transition-timing-function:
过渡效果的速率(速度变化),常见属性值为:ease
先慢后快后慢(默认值)、linear
匀速、ease-in
匀加速、ease-out
匀减速、ease-in-out
快->慢->快
还有个特殊值(贝塞尔曲线):
一个带参数的曲线,用于描述运动速度的变化,可以非常精确自由方便的控制变化速率
cubic-bezier(x1,y1,x2,y2);
x1
起点在x轴的坐标 为0-1y1
起点在y轴的坐标 不限x2
终点在x轴的坐标 为0-1y2
终点在y轴的坐标 为0-1
起点对应的 y=x 为匀速,y>x 为加速,y<x 为减速
终点对应的 y=x 为匀速,y>x 为减速,y<x 为加速
具体参考:http://cubic-bezier.com
过渡复合样式:
复合写法只写transition:
例如:
transition: 过渡属性 过渡时间 过渡延迟 过渡效果的速率;
注意:中间空格隔开
transition: property duration delay timing-function;
例如要给在一个元素width设置过度效果:
transition:width 2s ease;
注意:只有时长不可省略
什么是CSS3动画?
过度transition只能描述开始结束的变化过程,animation能精确控制各种时间进程的状态。注意:animation
必须与@keyframes
一起使用
animation也是一个复合属性
使用@keyframes定义动画
写法:
@keyframes animationname{
keyframes-selector{css-style}
}
animationname:
自定义动画名称keyframes-selector:
动画时长百分比(关键帧),0%-100%
(在之间需要执行什么事件),from (0%) to (100%)
可以只有toCss-style:
一个或多个合法的css属性
动画示例:
@keyframes run{
0%{width:0px,background:red;}
100%{width:50px,background:green;}
}
我要设置当帧动画一样的时候:
例如:
@keyframes run {
0%{width:0px,background:red;}
20%{width:0px,background:red;}
80%{width:500px,background:greend;}
100%{width:500px,background:greend;}
}
也可以写成:
@keyframes run {
0%,20%{width:0px,background:red;}
80%,100{width:500px,background:greend;}
}
animation动画属性的分样式:
animation-name:
动画的名称(自定义的),调用自定义动画,属性值为none
则不引用任何动画名称,定义的动画名称和@keyframes
绑定的名称要一致才能调用animation-duration:
动画执行时间,单位秒(s)和毫秒(ms)animation-delay:
延迟执行时间 ,动画延时(s/ms)(支持负数)animation-timing-function:
动画速度曲线,常见值:ease
先慢后快后慢(默认值)、linear
匀速、ease-in
匀加速、ease-out
匀减速、ease-in-out
快->慢->快、cubic-bezier()
贝塞尔曲线 ,使用方法类似于transition-timing-functionanimation-iteration-count:
动画执行次数,属性值为n次数数值(默认一次),infinite
(关键词,无限重复次数)animation-direction:
执行方向,多次运动才能出发此效果,属性值:normal
正常播放,结束后会回到起点默认、reverse
反向播放,和normal相反、alternate
播放结束之后反向回到开头,偶数次反向、alternate-reverse
先反后正,和alternate相反
1、CSS3实现页面加载loading动画
效果图:
实现代码:
<!DOCTYPE html>
<html lang="zh-ch">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>动画一</title>
<style type="text/css" media="screen">
* {
padding: 0;
margin: 0;
}
body {
background-color: #000;
}
.container {
width: 60px;
margin: 150px auto;
display: flex;
justify-content: space-between;
}
.container .plilar {
width: 8px;
height: 40px;
border-radius: 4px;
background-color: lightgreen;
animation: dh 1s infinite ease;
}
.container .plilar:nth-child(2) {
animation-delay: .2s;
}
.container .plilar:nth-child(3) {
animation-delay: .4s;
}
.container .plilar:nth-child(4) {
animation-delay: .6s;
}
.container .plilar:nth-child(5) {
animation-delay: .8s;
}
/* 动画 */
@keyframes dh {
0%,
100% {
background-color: lightgreen;
}
50% {
transform: scaleY(1.75);
background-color: lightblue;
}
}
</style>
</head>
<body>
<div class="container">
<span class="plilar"></span>
<span class="plilar"></span>
<span class="plilar"></span>
<span class="plilar"></span>
<span class="plilar"></span>
</div>
</body>
</html>
2、 CSS3是怎么实现水波扩散的动画呢?
实现代码:
<!DOCTYPE html>
3、实现对话框及对话框的不规则投影
知识点: filter和伪元素
这里涉及到css滤镜的知识,不过也很简单,大家在css3官网上看看就理解了,我们直接看效果:
我们会通过filter的drop-shadow来实现不规则图形的阴影,然后利用伪元素和border来实现头部三角形:
<!DOCTYPE html>
哎呦喂,轩钰
模糊效果
知识点: filter
这个比较简单,这里我直接上图和代码:
![filter][5]
filter: blur(20px);
未完待更新。。。。
2 comments
谢谢分享。。。
效果不错