css眨眼效果,CSS3 精巧的笑脸/眨眼变形动画
CSS
语言：
CSSSCSS
确定
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
background: #292929;
}
body .leftEye,
body .rightEye {
width: 5vh;
height: 5vh;
border-radius: 50%;
background: #dfdfc2;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-animation: leftEyeAnimation 3s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
animation: leftEyeAnimation 3s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
body .rightEye {
-webkit-animation: rightEyeAnimation 3s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
animation: rightEyeAnimation 3s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
body .mouth {
width: 10vh;
height: 10vh;
border-radius: 50%;
border: solid 1.3vh #dfdfc2;
border-right: solid 1.3vh rgba(223, 223, 194, 0);
border-left: solid 1.3vh rgba(223, 223, 194, 0);
border-bottom: solid 1.3vh rgba(223, 223, 194, 0);
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%) rotate(360deg);
-ms-transform: translate(-50%, -50%) rotate(360deg);
transform: translate(-50%, -50%) rotate(360deg);
-webkit-animation: mouthAnimation 3s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
animation: mouthAnimation 3s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
@-webkit-keyframes mouthAnimation {
0% {
-webkit-transform: translate(-50%, -50%) rotateX(180deg);
transform: translate(-50%, -50%) rotateX(180deg);
}
10% {
-webkit-transform: translate(-50%, -50%) rotateZ(360deg);
transform: translate(-50%, -50%) rotateZ(360deg);
}
40% {
-webkit-transform: translate(-50%, -50%) rotateZ(320deg);
transform: translate(-50%, -50%) rotateZ(320deg);
}
60% {
-webkit-transform: translate(-50%, -50%) rotateZ(900deg);
transform: translate(-50%, -50%) rotateZ(900deg);
}
100% {
-webkit-transform: translate(-50%, -50%) rotateZ(900deg);
transform: translate(-50%, -50%) rotateZ(900deg);
}
}
@keyframes mouthAnimation {
0% {
-webkit-transform: translate(-50%, -50%) rotateX(180deg);
transform: translate(-50%, -50%) rotateX(180deg);
}
10% {
-webkit-transform: translate(-50%, -50%) rotateZ(360deg);
transform: translate(-50%, -50%) rotateZ(360deg);
}
40% {
-webkit-transform: translate(-50%, -50%) rotateZ(320deg);
transform: translate(-50%, -50%) rotateZ(320deg);
}
60% {
-webkit-transform: translate(-50%, -50%) rotateZ(900deg);
transform: translate(-50%, -50%) rotateZ(900deg);
}
100% {
-webkit-transform: translate(-50%, -50%) rotateZ(900deg);
transform: translate(-50%, -50%) rotateZ(900deg);
}
}
@-webkit-keyframes leftEyeAnimation {
0% {
width: 5vh;
height: 5vh;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
50% {
width: 5vh;
height: 5vh;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
60% {
width: 2vh;
height: 2vh;
-webkit-transform: translate(-150%, -50%);
transform: translate(-150%, -50%);
}
90% {
width: 2vh;
height: 2vh;
-webkit-transform: translate(-150%, -50%);
transform: translate(-150%, -50%);
}
100% {
width: 5vh;
height: 5vh;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
}
@keyframes leftEyeAnimation {
0% {
width: 5vh;
height: 5vh;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
50% {
width: 5vh;
height: 5vh;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
60% {
width: 2vh;
height: 2vh;
-webkit-transform: translate(-150%, -50%);
transform: translate(-150%, -50%);
}
90% {
width: 2vh;
height: 2vh;
-webkit-transform: translate(-150%, -50%);
transform: translate(-150%, -50%);
}
100% {
width: 5vh;
height: 5vh;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
}
@-webkit-keyframes rightEyeAnimation {
0% {
width: 5vh;
height: 5vh;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
50% {
width: 5vh;
height: 5vh;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
60% {
width: 2vh;
height: 2vh;
-webkit-transform: translate(50%, -50%);
transform: translate(50%, -50%);
}
70% {
width: 2vh;
height: 2vh;
-webkit-transform: translate(50%, -50%);
transform: translate(50%, -50%);
}
75% {
width: 2vh;
height: 2px;
-webkit-transform: translate(50%, -50%);
transform: translate(50%, -50%);
}
80% {
width: 2vh;
height: 2vh;
-webkit-transform: translate(50%, -50%);
transform: translate(50%, -50%);
}
90% {
width: 2vh;
height: 2vh;
-webkit-transform: translate(50%, -50%);
transform: translate(50%, -50%);
}
100% {
width: 5vh;
height: 5vh;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
}
@keyframes rightEyeAnimation {
0% {
width: 5vh;
height: 5vh;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
50% {
width: 5vh;
height: 5vh;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
60% {
width: 2vh;
height: 2vh;
-webkit-transform: translate(50%, -50%);
transform: translate(50%, -50%);
}
70% {
width: 2vh;
height: 2vh;
-webkit-transform: translate(50%, -50%);
transform: translate(50%, -50%);
}
75% {
width: 2vh;
height: 2px;
-webkit-transform: translate(50%, -50%);
transform: translate(50%, -50%);
}
80% {
width: 2vh;
height: 2vh;
-webkit-transform: translate(50%, -50%);
transform: translate(50%, -50%);
}
90% {
width: 2vh;
height: 2vh;
-webkit-transform: translate(50%, -50%);
transform: translate(50%, -50%);
}
100% {
width: 5vh;
height: 5vh;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
}
css眨眼效果,CSS3 精巧的笑脸/眨眼变形动画相关推荐
- css2.0圆角,CSS圆角效果-CSS3常用属性集合
CSS3使用注意项:早期的firefox chrome 等某些游览器中也实现了部分CSS3,所以为了兼容部分,在CSS3中的编写,需要如此: {-moz-border-radius: 4px; -we ...
- html5 云朵飘动效果,CSS3如何实现飘动的云朵动画 CSS3实现飘动的云朵动画代码
css3如何实现飘动的云朵动画?本篇文章小编给大家分享一下CSS3实现飘动的云朵动画代码,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. 运行效果 ht ...
- html图标动画效果,html5 svg炫酷图标变形动画特效
这是一款效果非常炫酷的html5 svg炫酷图标变形动画特效.类似的效果有:html5 svg和css3超酷图标动画特效. 使用方法 1.添加一组SVG图标到你的HTML文件中. 2.通过调用new ...
- css折线效果,CSS3 box-shadow实现纸张的曲线投影效果 张鑫旭-鑫空间-鑫生活
展示 代码 CSS代码: .curved_box { display: inline-block; *display: inline; width: 200px; height: 248px; mar ...
- html广告条效果,css3炫酷网站banner广告动画特效
这是一款可以用来遮罩网站banner或广告的动画特效插件.该特效使用的是 CSS3 animations.注意不是所有的浏览器都支持 CSS3 animations.如果你对 CSS3 animati ...
- css3加载中动画效果,CSS3实现加载中的动画效果
Loading 的菊花图形组合的不太好,基本上实现这个功能了 动画解析 这个动画用到的 CSS3 特性: transform 主要使用 transform 属性的 rotate,将线条组合成 Load ...
- html 气泡动画效果,css3实现好看的气泡按钮动画特效
CSS3在我们网页设计中是最关键的一环,为什么这么说呢?我们在浏览别人的网站时,经常会看到特别好看的动画效果,比如一个按钮啊,一个图片啊,每次看到都能够让人有种赏心悦目的感觉,这就使网站更具有吸引力和 ...
- android圆形变方形动画,CSS3 简单的圆形/方形变形动画
CSS 语言: CSSSCSS 确定 html, body { width: 100%; height: 100%; background-color: #221e40; } *, *:after, ...
- 电子脑PHP动画制作,用Flash制作变形动画效果
Flash中的变形动画是动画的一种类型,它和运动动画相反,只对图形起作用而对元件不能产生动画效果.应用变形动画可以产生一些奇妙的变形效果,能使课件更富有吸引力,下面小编就为大家介绍用Flash制作变形 ...
最新文章
- python iter 迭代函数 简介
- python2 队列的使用_使用2个队列创建堆栈
- 【转】不分英文字母大小寫的字串比較方式
- 成功解决IndexError: arrays used as indices must be of integer (or boolean) type
- Go if _,ok:=range map； ok判断key是否在map中
- org.hibernate.HibernateException: 'hibernate.dialect' must be set when no Connection avalable
- 原始线性结构单链表的实现以及操作
- 顺丰不行了吗？对快递行业的深度理解
- KubeCon 2018 参会记录 —— FluentBit Deep Dive 1
- python绘图多子图 分别美化
- android app应用签名生成工具,Android应用签名证书(.keystore)生成
- Rose软件安装教程
- 2022“杭电杯”中国大学生算法设计超级联赛（5）杭电多校第五场
- Canvas实现龙卷风动态效果
- 股票做空机构-浑水公司
- 操盘手怎样于2019年4月17号的二级市场中基于ATR实现开仓平仓
- DBA系列-推荐书籍（中文版本）
- 指尖江湖李忘生鸿蒙初开,剑网3指尖江湖李忘生怎么玩 使用攻略
- HENUOJ-1007-CYT大佬的女装(贪心算法）
- 案例：同程凤凰缓存系统基于Redis的设计与实践。