用CSS3产生动画效果

2018-06-27 09:06:09来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

相关属性:

@keyframes规则:定义动画

语法:@keyframes animationname{keyframes-selector {CSS-style;}}

animationname:动画名称

keyframes-selector:动画持续百分比(0%~100%)  from(表示0%)  to(表示100%)

CSS-style:要设置的样式;

如定义一个名称为myanimation的动画:

@keyframes myanimation{

0% {font-size:10px;}

50% {font-size:30px;}

100% {font-size:100px;}}

 

animation属性:是以下属性的复合

animation-name:动画的名称

animation-duration:动画完成时间

aniamtion-timing-function:动画速度设置(linar/ease/ease-in/ease-out/ease-in-out)

animation-delay:动画在启动前的延迟间隔

animation-iteration-count:播放次数(n/infinite)

animation-direction:动画播放方向(normal/reverse

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<style>
div{
width:400px;
height:400px;
background-color:grey;
}
p{
color:red;
animation:myanimation 10s infinite;
}
@keyframes myanimation{
0% {font-size:10px;}
50% {font-size:30px;}
100% {font-size:100px;}
}
</style>
</head>

<body>
<div>
    <p>this is an animation</p>
</div>
</body>
</html>

 

 

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:【读书笔记《Bootstrap 实战》】5.电子商务网站

下一篇:CSS选择器笔记