星空网 > 软件开发 > 网页设计

用CSS3产生动画效果

相关属性:

@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>

 

 

 




原标题:用CSS3产生动画效果

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

注册义乌个体户+稠州银行开户以及后期维护:https://www.ikjzd.com/articles/138426
跨境卖家如何投Youtube广告?先搞懂收费逻辑和创意要素:https://www.ikjzd.com/articles/138427
亚马逊几大常见的封停账号原因:https://www.ikjzd.com/articles/138428
审计报告意见怎么看?香港公司审计报告意见类型介绍:https://www.ikjzd.com/articles/138429
英国正式脱欧!港口严重拥堵,中英往返航班暂停……:https://www.ikjzd.com/articles/138430
沙特针对家用物品与配件提升关税:https://www.ikjzd.com/articles/138431
2022世界杯门票如何买?:https://www.vstour.cn/a/363182.html
沈阳到本溪的距离有多远?(详细路线及交通方式):https://www.vstour.cn/a/363183.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流