900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > 纯css动画-div从左到右出现

纯css动画-div从左到右出现

时间:2020-12-24 00:01:17

相关推荐

纯css动画-div从左到右出现

独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html><html><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="apple-mobile-web-app-title" content=""><meta name="apple-mobile-web-app-capable" content="yes" /><meta name="apple-touch-fullscreen" content="yes" /><meta http-equiv="Cache-Control" content="no-siteapp" /><meta name="format-detection" content="telephone=no" /><meta content="email=no" name="format-detection" /><meta name="msapplication-tap-highlight" content="no"><meta name="description" content=""><meta name="keywords" content=""><meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no"><title>Hello,Mike</title><style>@-webkit-keyframes fadeInLeft {0% {opacity: 0;-webkit-transform: translateX(-120px);}100% {opacity: 1;-webkit-transform: translateX(0);}}@keyframes fadeInLeft {0% {opacity: 0;transform: translateX(-120px);}100% {opacity: 1;transform: translateX(0);}} /*调用animation属性,从而让按钮在载入页面时就具有动画效果 以-webkit为例,请为不同的浏览器添加前缀 */nav ul li:nth-child(1){ -webkit-animation-name: "fadeInLeft"; /*动画名称,需要跟@keyframes定义的名称一致*/-webkit-animation-duration: 0.5s;/*动画持续的时间长*/-webkit-animation-iteration-count: 1;/*动画循环播放的次数为1 infinite为无限次*/} nav ul li:nth-child(2){ -webkit-animation:'fadeInLeft' 1s 1} /* 简写 */nav ul li:nth-child(3){ -webkit-animation:'fadeInLeft' 2s 1}nav ul li:nth-child(4){ -webkit-animation:'fadeInLeft' 3s 1}nav ul li:nth-child(5){ -webkit-animation:'fadeInLeft' 4s 1}nav ul li:nth-child(6){ -webkit-animation:'fadeInLeft' 5s 1}</style></head><body><nav><ul><li><a href="/download/" target="_blank">个人网站模板</a></li><li><a href="/newsfree/" target="_blank">企业网站模板</a></li><li><a href="/web/" target="_blank">网站建设</a></li><li><a href="/newshtml5/" target="_blank">HTML5案例</a></li><li><a href="/jstt/" target="_blank">技术探讨</a></li><li><a href="/news/case/" target="_blank">作品展示</a></li></ul></nav></body></html>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。