用CSS3产生动画效果
2018-06-27 09:06:09来源:未知 阅读 ()
相关属性:
@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选择器笔记
- ie8下透明度处理 2020-06-11
- CSS3 2020-06-05
- css:css3(圆角边框、盒子阴影、文字阴影) 2020-06-05
- 6.动画 2020-05-24
- 2.CSS3选择器 2020-05-17
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash