html打造动画【系列2】- 可爱的蛙蛙表情 - Web

TOP

html打造动画【系列2】- 可爱的蛙蛙表情(二)

2017-10-13 10:50:13 【大中小】浏览:8142次

0%;height: 80%; position: absolute;top: 10%;left: 10%;border-radius: 50%; } /*蛙蛙眼珠部分样式*/ .icon .frog .eyes .eye .eye-inner .pupil {background-color: #3F6A34; width: 60%;height: 60%;position: absolute;top: 20%;left: 20%;border-radius: 50%; } /*蛙蛙眼珠里的亮光部分样式*/ .icon .frog .eyes .eye .eye-inner .pupil .light {background-color: #fff; width: 50%;height: 50%;position: absolute;top: 10%;left: 10%;border-radius: 50%; } /*蛙蛙左右两边眼睛的位置*/ .icon .frog .eyes .eye-left {position: absolute;top: 0px;left: 0;} .icon .frog .eyes .eye-right {position: absolute;top: 0px;right: 0;}

蛙蛙基本公用样式.png

第一只小青蛙

第一只小青蛙是在基本样式的基础上有一个嘴角上扬的动态效果，所以要完成第一只蛙蛙的绘制，只要在公用样式的基础上加上嘴巴的动效就可以了，dom结构也是一样的。

.frog#frog-1 .body .mouth { width: 18px; height: 22px; border-bottom: 3px solid #3F6A34; position: absolute; top: 6px; left: 0; right: 0; -webkit-animation: smile 3.8s linear 0s infinite; animation: smile 3.8s linear 0s infinite; } @-webkit-keyframes smile { 0% { border-radius: 0%; } 20% { border-radius: 50%; } 70% { border-radius: 50%; } } @keyframes smile { 0% { border-radius: 0%; } 20% { border-radius: 50%; } 70% { border-radius: 50%; } }

第一只蛙蛙动图.gif

第二只小青蛙

第二只小青蛙的嘴巴是一个大嘴巴，脸颊上还有两个小红晕，眼睛是冒着爱心的，所以在dom结构上要加上红晕的div，嘴巴眼睛的样式也要做相应的修改。（主要是嘴巴、红晕和红色爱心的制作）

<div class="frog" id="frog-2"> <div class="body"> <!--存放蛙蛙的脸颊红晕--> <div class="blush"></div> <!--加上大嘴巴的class big-month--> <div class="mouth big-mouth"></div> </div> <div class="eyes"> <div class="eye eye-left"> <div class="eye-inner"> <div class="pupil"> <div class="light"></div> </div> </div> </div> <div class="eye eye-right"> <div class="eye-inner"> <div class="pupil"> <div class="light"></div> </div> </div> </div> </div> </div> /*第二只青蛙脸颊两边的红晕样式*/ .icon .frog .body .blush {width: 75px;height: 9px;position: absolute; top: 20px;left: 0;right: 0;margin: auto; } .icon .frog .body .blush:before, .icon .frog .body .blush:after { content: "";display: block;width: 12px;height: 100%;background-color: #F7D2C9;border-radius: 50%; } .icon .frog .body .blush:before {position: absolute;top: 0;left: 0;} .icon .frog .body .blush:after {position: absolute;top: 0;right: 0;} /*第二只青蛙的嘴巴样式，用圆角和阴影的方式制作而成*/ .icon .frog .body .big-mouth {width: 30px;height: 20px;border-radius: 0 0 50% 50%; box-shadow: 2px 2px 0px 0px rgba(63, 106, 52, 0.3); } .frog#frog-2 .mouth {background-color: #fff;position: absolute;top: 30px;left: 0;right: 0; } /*第二只青蛙的眼睛样式，将眼圈的背景设置为透明色，圆圈里面的亮光隐藏*/ .frog#frog-2 .eye-inner {top: 17%;background-color: transparent !important; -webkit-animation: hearts 0.6s linear 0s infinite alternate; animation: hearts 0.6s linear 0s infinite alternate; } @-webkit-keyframes hearts { 0% { -webkit-transform: scale(0.7); transform: scale(0.7); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes hearts { 0% { -webkit-transform: scale(0.7); transform: scale(0.7); } 100% { -webkit-transform: scale(1); transform: scale(1); } } /*第二只青蛙的眼睛的爱心样式，左上角和右上角设置交圆角50%，然后左右对应的旋转45度合并成一个爱心的形状*/ .frog#frog-2 .eye-inner:before, .frog#frog-

首页上一页 1 2 3 4 下一页尾页 2/4/4
【大中小】【打印】【繁体】【投稿】【收藏】【推荐】【举报】【评论】【关闭】【返回顶部】

上一篇：奇妙的 CSS shapes(CSS图形)	下一篇：弹框&可用于判断