图形笑脸 增加动画
2016-07-21 15:23
260 查看
<!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> 阅读更多
<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> 阅读更多
相关文章推荐
- 从下往上增加的柱状图生成动画(适用于统计类应用)
- bootstrap模态弹出框学习笔记(1-8 模态弹出框--为弹出框增加过度动画效果)
- 推出页面时可增加的一些动画
- UILabel数字变化增加动画
- Android仿支付宝笑脸刷新加载动画的实现代码
- [置顶] 游戏开发技术总结(经典之作)第三集 让图片动起来----快速切换图形实现动画
- 初学Android,图形图像之补间动画(三十六)
- 使用ng-animate为网页增加动画效果
- ImageView增加动画效果
- Core Animation(一)iOS图形和动画的初步认识
- Android图形与动画
- iOS图形和动画处理
- C++Directx11开发笔记六:3D空间坐标系变换,绘制3D图形动画
- 图形图像处理控件ImageGear for .NET v22.2发布,增加新的简化示例
- 给之前绘制的图形菜单增加随触摸360度旋转效果
- VMware linux 增加根目录空间 (使用图形分区工具gparted LiveCd)
- 玩转Android---2D图形及动画---View类使用
- 史上最扯Java图形绘制(J2SE)之一JAVA动画效果
- Android图形与图像处理-补间动画