Maison > interface Web > tutoriel HTML > CSS3简单动画_html/css_WEB-ITnose

CSS3简单动画_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-24 11:33:00
original
1220 Les gens l'ont consulté

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>
Copier après la connexion

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

需要注意的是:

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

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

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

  animation-name:是用来定义一个动画的名称

  animation-duration是用来指定元素播放动画所持续的时间长,取值:为数值,单位为s (秒.)其默认值为“0”。

  animation-timing-function:是指元素根据时间的推进来改变属性值的变换速率,说得简单点就是动画的播放方式.

    具有以下六种变换方式:ease;ease-in;ease-in-out;linear;cubic- bezier。就是播放速度~

  animation-iteration-count是用来指定元素播放动画的循环次数,其可以取值为数字,其默认值为“1”;infinite为无限次数循环。

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal