CSS3简单动画_html/css_WEB-ITnose-html教程-PHP中文网

CSS3简单动画_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:33:00

原创

1295人浏览过

css3的动画确实非常绚丽！浏览器兼容性很重要！。

分享两个小动画

<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus&reg;">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <title>C3动画</title>  <style>    /*****************/    #d1{width:50px;height:50px;background-color:green;float:left;        border-radius:50%;}    #d2{width:50px;height:50px;background-color:red;float:left;        border-radius:50%;position:relative;}    @-webkit-keyframes jump{    0%{transform:rotate(0deg);opacity:1;}    25%{transform:rotate(-10deg);opacity:0.5;}    50%{transform:rotate(0deg);opacity:1;}    75%{transform:rotate(10deg);opacity:0.5;}    100%{transform:rotate(0deg);opacity:1;}    }    #d1{-webkit-animation:jump 0.3s linear infinite;}    @-webkit-keyframes move{        0%{left:10px;background-color:blue;}        50%{left:800px;background-color:yellow;}        100%{left:10px;background-color:red;}    }    #d2{-webkit-animation:move 5s linear infinite;}  </style> </head> <body>    <div id="d1"></div>    <div id="d2"></div> </body></html>

登录后复制

效果如本博客首页那两个小圆圈！

需要注意的是：

1、在css里创建动画时候要处理兼容性

立即学习“前端免费学习笔记（深入）”；

2、在调用的时候不单要处理兼容性> -webkit-animation: ; -moz-animation: ; -o-animation: ; animation: ;

还要注意animation：animation-name,animation-duration,animation-timing-function,animation-iteration-count