HTML+CSS css3可爱布丁蛋糕表情动画特效

style.cs代码：

*:before, *:after {position: absolute;content: "";
}
*:hover {z-index: 10;
}body {width: 100%;height: 100%;background: #f8dee9;
}.dessert {position: absolute;
}.pudding {position: absolute;width: 150px;height: 150px;top: calc(50% - 75px);left: calc(50% - 75px);
}
.pudding__part {position: absolute;width: 150px;height: 120px;background: #f4d37c;-webkit-transform-origin: bottom;transform-origin: bottom;
}
.pudding__part:before {top: 0;right: -10px;width: 0;height: 0;border-left: 10px solid #f4d37c;border-top: 120px solid transparent;border-bottom: 0 solid transparent;
}
.pudding__part:after {top: 0;left: -10px;width: 0;height: 0;border-right: 10px solid #f4d37c;border-top: 120px solid transparent;border-bottom: 0 solid transparent;
}
.pudding__cream {position: absolute;top: -10px;left: 50px;width: 45px;height: 15px;background: #fff3e5;border-radius: 50%;-webkit-transform: scale(1.5);transform: scale(1.5);z-index: 10;
}
.pudding__cream:before {top: -8px;left: 7px;width: 30px;height: 15px;background: #fff3e5;border-radius: 50%;
}
.pudding__cream:after {top: -18px;left: 15px;height: 25px;width: 15px;background: #fff3e5;border-radius: 80% 10% 55% 50%/55% 10% 80% 50%;-webkit-transform: rotate(-40deg);transform: rotate(-40deg);
}
.pudding__cherry {position: absolute;top: -20px;left: 88px;width: 25px;height: 25px;z-index: 10;border-radius: 50%;background: #eb3939;
}
.pudding__cherry:before {top: -8px;left: 11px;width: 12px;height: 17px;border-radius: 50%;-webkit-transform: rotate(37deg);transform: rotate(37deg);border-left: 2px solid #323232;background: transparent;
}
.pudding__head {position: absolute;top: -18px;width: 150px;height: 40px;border-radius: 50%;background: #834c0e;
}
.pudding__bottom {position: absolute;bottom: -25px;left: -10px;width: 170px;height: 45px;border-radius: 50%;background: #f4d37c;
}
.pudding__eye {position: absolute;width: 55px;height: 20px;top: 40px;left: 44px;
}
.pudding__eye:before, .pudding__eye:after {background: #323232;border-radius: 50%;width: 8px;height: 8px;
}
.pudding__eye:before {left: 0;-webkit-transform: rotate(225deg);transform: rotate(225deg);
}
.pudding__eye:after {right: 0;-webkit-transform: rotate(45deg);transform: rotate(45deg);
}
.pudding__mouse {position: absolute;width: 20px;height: 10px;top: 60px;left: 63px;border-bottom: 2px solid #323232;border-radius: 50%;background: transparent;
}
.pudding__sara {position: absolute;bottom: -8px;left: -35px;width: 220px;height: 45px;border-radius: 50%;z-index: -1;background: #d4d2d2;overflow: hidden;
}
.pudding__sara:before {bottom: 4px;left: -7px;width: 220px;height: 45px;border-radius: 50%;background: #fff;
}
.pudding:hover .pudding__part {-webkit-animation: skew 2.3s linear;animation: skew 2.3s linear;
}
.pudding:hover .pudding__eye:before, .pudding:hover .pudding__eye:after {background: transparent;border-radius: 0;width: 5px;height: 5px;border-left: 3px solid #323232;border-bottom: 3px solid #323232;
}
.pudding:hover .pudding__mouse:before, .pudding:hover .pudding__mouse:after {background: #f5e3eb;width: 20px;height: 20px;border-radius: 50%;top: -10px;
}
.pudding:hover .pudding__mouse:before {left: -40px;
}
.pudding:hover .pudding__mouse:after {right: -40px;
}@-webkit-keyframes skew {0% {-webkit-transform: skewX(0deg);transform: skewX(0deg);}5% {-webkit-transform: skewX(5deg);transform: skewX(5deg);}10% {-webkit-transform: skewX(-4deg);transform: skewX(-4deg);}15% {-webkit-transform: skewX(3deg);transform: skewX(3deg);}20% {-webkit-transform: skewX(-2deg);transform: skewX(-2deg);}25% {-webkit-transform: skewX(0.9deg);transform: skewX(0.9deg);}30% {-webkit-transform: skewX(-0.6deg);transform: skewX(-0.6deg);}35% {-webkit-transform: skewX(0.3deg);transform: skewX(0.3deg);}40% {-webkit-transform: skewX(-0.2deg);transform: skewX(-0.2deg);}45% {-webkit-transform: skewX(0.1deg);transform: skewX(0.1deg);}50% {-webkit-transform: skewX(0deg);transform: skewX(0deg);}
}@keyframes skew {0% {-webkit-transform: skewX(0deg);transform: skewX(0deg);}5% {-webkit-transform: skewX(5deg);transform: skewX(5deg);}10% {-webkit-transform: skewX(-4deg);transform: skewX(-4deg);}15% {-webkit-transform: skewX(3deg);transform: skewX(3deg);}20% {-webkit-transform: skewX(-2deg);transform: skewX(-2deg);}25% {-webkit-transform: skewX(0.9deg);transform: skewX(0.9deg);}30% {-webkit-transform: skewX(-0.6deg);transform: skewX(-0.6deg);}35% {-webkit-transform: skewX(0.3deg);transform: skewX(0.3deg);}40% {-webkit-transform: skewX(-0.2deg);transform: skewX(-0.2deg);}45% {-webkit-transform: skewX(0.1deg);transform: skewX(0.1deg);}50% {-webkit-transform: skewX(0deg);transform: skewX(0deg);}
}

html 代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>css3可爱布丁蛋糕表情动画特效</title><link rel="stylesheet" href="css/style.css" /></head><body><div class="pudding"><div class="pudding__part"><div class="pudding__head"></div><div class="pudding__eye"></div><div class="pudding__mouse"></div><div class="pudding__cream"></div><div class="pudding__cherry"></div><div class="pudding__bottom"></div></div><div class="pudding__sara"></div></div><div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"><p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p></div></body>
</html>

HTML+CSS css3可爱布丁蛋糕表情动画特效相关推荐

html5表情包网站,HTML5 CSS3 可爱的表情动画
CSS 语言: CSSSCSS 确定 @import url(https://fonts.googleapis.com/css?family=Press+Start+2P); body { backg ...
css滑动星星评分,纯css3滑动星星打分动画特效
特效描述:纯css3 滑动星星打分动画.纯css3滑动星星打分动画特效代码结构 1. 引入CSS 2. HTML代码基本样式: Basic star rating: 5 stars 4 stars ...
css可以做什么小船,基于css3小船水面游动动画特效
基于css3小船水面游动动画特效,这是一款色彩鲜艳扁平风格的css3动画特效.效果图如下: 实现的代码. html代码: css代码: * { padding: 0; margin: 0; } bod ...
css圆背景,css3圆形旋转背景动画特效
特效描述:css3 圆形旋转背景动画特效.css3 animation和transform属性制作圆形旋转背景动画. 代码结构 1. HTML代码 var followers = document. ...
jQuery+CSS3实现404背景动画特效【转】
jQuery+CSS3实现404背景动画特效效果: http://hovertree.com/texiao/jquery/74/ 源码下载: http://hovertree.com/h/bjaf/ ...
html加载特效大全,10种炫酷的CSS3 loading加载动画特效
这是一组效果非常炫酷的纯CSS3 loading加载动画特效.这组loading动画共10种不同的效果,全部使用animation帧动画制作而成.这些特效代码简洁,效果炫酷,非常值得学习借鉴. 制作方 ...
h5动画 php,HTML_多视角3D逼真HTML5水波动画，html5+css3进度条倒计时动画特效 - phpStudy...
多视角3D逼真HTML5水波动画 html5+css3进度条倒计时动画特效这个作品在今天上网找网络资源的时候无意中发现的,看到效果非常棒并且很实用,就第一时间把它整理出来与大家分享了,主要用到了htm ...
2014圣诞节一款纯css3实现的雪人动画特效
在2014年的圣诞节,爱编程小编给大家分分享一款纯css3实现的雪人动画特效.该实例实现一个雪人跳动的特效,效果图如下: 在线预览源码下载实现的代码. html代码: <span cla ...
html图片鼠标动态效果代码,CSS3鼠标hover图片动画特效代码
这是一款CSS3鼠标hover图片动画特效代码.该鼠标hover动画使用简单的CSS transition技术,配合元素的宽度变化,制作出炫酷的鼠标hover图片遮罩层动画效果. 使用方法在页面中引 ...

HTML+CSS css3可爱布丁蛋糕表情动画特效

HTML+CSS css3可爱布丁蛋糕表情动画特效相关推荐

最新文章

热门文章