图形笑脸增加动画

程序员文章站 2024-01-29 21:31:58

...

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
</head>
<style type="text/css">
.main-margin{width: 10rem;text-align:right;-webkit-transition: 5s;background: lime;}
.main{border: 2px solid #F5F5F5;border-radius: 50%;width: 5rem;height:5rem;position:relative;background-color:#FFF ;text-align: center;
transition:5s;-webkit-transition:5s; }
.header{position:relative; }
.header-eye{border: 2px solid;display: block;width: 10%;height:8px;border-radius: 50%;background: #000;position: absolute;left: 50%;top: 50%;margin-top: 1.5rem;}
.header-eye-left{margin-left: -1.5rem;}
i{height: 6px;border: 1px solid #FFFFFF;border-radius: 100%;display: block;}
.header-eye-right{margin-left: 0.5rem;}
em{background-color: #000;border: 1px solid #000;display: block;height: 1.5px;border-radius: 100%;margin-top: 1.4px;}
.floot{position: absolute;bottom: 1rem;left: 50%;margin-left: -1.2rem;}
.floot:before {content: "";position: absolute;top: -51px;left: -7px;border-left: 1px solid transparent;border-right: 1px solid transparent;border-BOTTOM: 4px solid #f66456 ;width: 3rem;height: 3rem;border-radius: 100%;}
.main-margin:hover{width: 30rem;}
.main:hover{ background: #FF0000;
animation: myfirst 2s;-webkit-animation: myfirst 5s;
/* -webkit-animation-name:'myfirst';/*动画属性名，也就是我们前面keyframes定义的动画名*/
     -webkit-animation-duration: 10s;/*动画持续时间*/
     -webkit-animation-timing-function: ease-in-out; /*动画频率，和transition-timing-function是一样的*/
     -webkit-animation-delay: 0.2s;/*动画延迟时间*/
     -webkit-animation-iteration-count: 1;/*定义循环资料，infinite为无限次*/
     -webkit-animation-direction: alternate;/*定义动画方式*/*/
}

@keyframes myfirst
{
0%   {background:red; left:0px; top:0px;}
25% {background:yellow; left:10rem; top:0px;transform:rotate(90deg)}
50% {background:blue; left:20rem; top:0px;transform:rotate(180deg)}
75% {background:green; left:30rem; top:0px;transform:rotate(360deg)}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background:red; left:0px; top:0px;}
25% {background:yellow; left:10rempx; top:0px;transform:rotate(90deg)}
50% {background:blue; left:20rem; top:0px;transform:rotate(180deg)}
75% {background:green; left:30rem; top:0px;transform:rotate(360deg)}
100% {background:red; left:0px; top:0px;}
}
</style>
<body>
<div class="main-margin">
<div class="main">
<div class="header">
<span class="header-eye header-eye-left"><i><em></em></i></span>
<span class="header-eye header-eye-right"><i><em></em></i></span>
</div>
<div class="floot"></div>
</div>
</div>

<a class="">动画</a>
</body>
</html>

图形笑脸增加动画