不停变化颜色+左右移动

最新推荐文章于 2021-06-10 04:04:31 发布

转载最新推荐文章于 2021-06-10 04:04:31 发布 · 287 阅读

网页专栏收录该内容

33 篇文章

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
@-webkit-keyframes 'wobble' {
0% {
margin-left: 100px;
background: green;
}
40% {
margin-left: 150px;
background: orange;
}
60% {
margin-left: 250px;
background: blue;
}
100% {
margin-left: 350px;
background: red;
}
}
.demo1 {
   width: 50px;
   height: 50px;
   margin-left: 100px;
   background: blue;
   -webkit-animation-name: 'wobble';/*动画属性名，也就是我们前面keyframes定义的动画名*/
   -webkit-animation-duration: 3s;/*动画持续时间*/
   -webkit-animation-timing-function: ease-in-out; /*动画频率，和transition-timing-function是一样的*/
   -webkit-animation-delay: 2s;/*动画延迟时间*/
   -webkit-animation-iteration-count: 5;/*定义循环资料，infinite为无限次*/
   -webkit-animation-direction: alternate;/*定义动画方式*/
}
</style>
</head>

<body>
<div class="demo1"></div>
</body>
</html>