CSS 动画（Animation）单一变换

最新推荐文章于 2024-05-06 19:28:55 发布

Dewey666

最新推荐文章于 2024-05-06 19:28:55 发布

阅读量485

点赞数

分类专栏：效果初现文章标签： CSS 动画Animation单一变换

本文链接：https://blog.csdn.net/IT666DHW/article/details/78127975

版权

效果初现专栏收录该内容

108 篇文章 3 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 动画（Animation）单一变换</title>
<style type="text/css">
#animation{
color:#F60;
width:200px;
height:200px;
background:#0F6;
position:relative;
text-align:center;
line-height:200px;
font-style:italic;
animation:mymove 1s infinite;
-webkit-animation:mymove 5s infinite;/*Safari and Chrome*/

}
@keyframes mymove{
from {left:0px;}
to {left:1000px;}
}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px;}
to {left:1000px;}
}

#circle{
color:#C09;
width:200px;
height:200px;
background:#96F;
text-shadow:3px 3px 3px #FF0;
position:relative;
text-align:center;
line-height:200px;
font-style:italic;
border-radius:188px;
border:solid 1px #FF0000;
animation:mymove 1s infinite;
-webkit-animation:mymove 5s infinite;/*Safari and Chrome*/

}
</style>
</head>

<body>
<div id="animation">
CSS 动画
</div>

<br/><br/>
<div id="circle">
圆形动画
</div>
</body>
</html>