CSS3动画样式记录

来源：互联网发布：网络言论自由的利弊编辑：程序博客网时间：2024/05/21 10:13

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*
from表示动画开始的样式
to 表示动画结束的样式
10% 表示时间到达10%的样式
n% 表示时间到达n%的样式 from就等价于 0% to等价于 100%
* */
@keyframes gradi{
from{
opacity: 0; /*初始状态透明度为0*/
}
to{
opacity: 1; /*结尾状态透明度为1*/
}
}
/*-------------------------------------------
淡入淡出效果的div
id为opac的div使用以下样式
-------------------------------------------
* */
#opac{
border: 1px solid #CCCCCC; /*设置边框 1px*/
width: 200px;/*宽度和高度必须一致否则是椭圆*/
height: 200px;
border-radius:50%;/*圆角设置为50% 直接就是一个圆*/
background:linear-gradient(to bottom,blue,grey,green); /*线性渐变从上到下一次蓝灰绿*/
animation-name:gradi; /*使用定义的动画*/
animation-duration:3s; /*动画执行的事件 5s*/
animation-iteration-count: infinite;/*表示循环的次数*/

}

/*deg是degree,计量中一般用来表示角度数*/
@keyframes transDiv{
from{
transform:rotate(0deg);/*rotateX沿x轴为中心旋转 rotate平面旋转*/
}
to{
transform:rotate(360deg);
}
}
/*
* -------------------------------------------
* 自动旋转效果的div
* id为trans的div使用以下样式
* -------------------------------------------
* */
#trans{
margin-top: 30px;
border: 1px solid #CCCCCC;
width: 200px;/*宽度和高度必须一致否则是椭圆*/
height: 200px;
background:linear-gradient(to bottom,red,grey,yellow);
animation:transDiv 5s infinite linear;//可以设置匀速(linear)无限次循环(infinite)
}
/*
这里transform三种特效（每一种效果都要带单位）
rotate 旋转特效(单位deg)
translate 移动特效 translateX（n）往x方法移动n个px
scale 缩放从宽和高进行缩放或者方法 1表示原始大小大于1放大小于1 缩小

下面同时添加了这三种特效
*
* */
@keyframes movGo{
from{
transform:translateX(0px) rotate(0deg) scaleX(1);
}
to{
transform:translateX(200px) rotate(360deg) scale(0.1,0.1);
}
}
#mov{
margin-top: 30px;
border: 1px solid #CCCCCC;
width: 200px;
height: 200px;
background:linear-gradient(to bottom,red,grey,yellow);
animation:movGo 5s infinite;
}

</style>
</head>
<body>

<div id='opac'>

</div>

<div id='trans'>

</div>


<div id='mov'>

</div>

</body>
</html>

0 0