CSS动画.ZC01

最新推荐文章于 2024-05-27 16:09:40 发布

weixin_30730053

最新推荐文章于 2024-05-27 16:09:40 发布

阅读量51

点赞数

文章标签： ui

原文链接：http://www.cnblogs.com/H5UI/p/8385412.html

版权

1、http://www.w3school.com.cn/css3/css3_animation.asp

2、

3、

4、

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation-name:myfirst;
    animation-duration:5s;
    animation-timing-function:linear;
    animation-delay:2s;
    animation-iteration-count:infinite;
    animation-direction:alternate;
    animation-play-state:running;
    /* Firefox: */
    -moz-animation-name:myfirst;
    -moz-animation-duration:5s;
    -moz-animation-timing-function:linear;
    -moz-animation-delay:2s;
    -moz-animation-iteration-count:infinite;
    -moz-animation-direction:alternate;
    -moz-animation-play-state:running;
    /* Safari and Chrome: */
    -webkit-animation-name:myfirst;
    -webkit-animation-duration:5s;
    -webkit-animation-timing-function:linear;
    -webkit-animation-delay:2s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:alternate;
    -webkit-animation-play-state:running;
    /* Opera: */
    -o-animation-name:myfirst;
    -o-animation-duration:5s;
    -o-animation-timing-function:linear;
    -o-animation-delay:2s;
    -o-animation-iteration-count:infinite;
    -o-animation-direction:alternate;
    -o-animation-play-state:running;
}

@keyframes myfirst
{
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}

@-moz-keyframes myfirst /* Firefox */
{
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}

@-o-keyframes myfirst /* Opera */
{
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

<div></div>

</body>
</html>

5、

转载于:https://www.cnblogs.com/H5UI/p/8385412.html

weixin_30730053

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS动画.ZC01

1、http://www.w3school.com.cn/css3/css3_animation.asp2、3、4、<!DOCTYPE html><html><head><style> div{ width:100px; height:100px; background:red;...
复制链接

扫一扫