纯css小猫
来源：互联网 发布：php时间戳转换成时间 编辑：程序博客网 时间：2024/04/20 01:35
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>纯css小猫</title> <style> *{padding:0;margin: 0;} li{list-style:none;} body{background:#f6f7f2;} .box{width:700px;height:500px;margin:100px auto;border:1px solid #8d8d8d;background:#ffffff;position: relative;} .ears{margin:60px 0 0 120px;z-index:0;position: relative; width:440px;height: 200px;} .ear{width: 160px;height: 200px;border: 2px solid #000; background: #f3f3f3;position: absolute;} .ear_l{border-radius: 4% 80% 0% 50%;left:0;top: 0; transform: rotate(-15deg); -ms-transform: rotate(-15deg); -moz-transform: rotate(-15deg); -webkit-transform: rotate(-15deg); -o-transform: rotate(-15deg);transition: all 1s;} .ear_r{border-radius: 80% 4% 50% 0%;right:0;top: 0; transform: rotate(15deg); -ms-transform: rotate(15deg); -moz-transform: rotate(15deg); -webkit-transform: rotate(15deg); -o-transform: rotate(15deg);transition: all 1s;} .face{width:400px;height: 340px;border-radius: 50% 50% 35% 35%;position: absolute;left:136px;top:84px; border: 2px solid #000;background: #f3f3f3; z-index:10;} .facebox{width:400px;height:340px;border-radius: 50% 50% 35% 35%;position: relative;overflow: hidden;} .hairs{width:180px;height:160px;border-radius:0 0 50% 50%;overflow: hidden;position: absolute;left:111px;top:-2px; background: #8d8d8d;} .hair{width:90px;height:160px;background: #f0ac6b;} .eye-wrap{width:300px;height:70px; position: absolute;top:200px;left: 50%; margin-left:-150px;overflow:hidden;} .eye{height:104px;width:104px;position:absolute;} .eye_l{left:0;top:0;} .eye_r{right:0;top:0;} .eye-circle{width:100px;height: 100px;overflow: hidden; border: 2px solid #000;border-radius:50%;position:absolute;left:0;top:0;} .eye-core{height:100px;width:30px;background:#000; position:absolute;left:50%;top:0;margin-left: -15px;transition: all 1s;} .eye-bottom{height:50px;width:160px;border-radius:50%;background: #f6f7f2;border-top:2px solid #000; position:absolute;bottom:16px;transition: all 1s;} .eye_l .eye-bottom{left:-30px;} .eye_r .eye-bottom{right:-30px;} .eye-red{width:66px;height:24px; position: absolute;top:44px;left: 18px; border-radius:50% 50% 50% 50%; background: -moz-radial-gradient( 50% 50%, rgba(253,214,240,0.8) 0%, rgba(253,224,244,0.8) 66%, rgba(253,234,247,0.8) 100%); background: -webkit-radial-gradient( 50% 50%, rgba(253,214,240,0.8) 0%, rgba(253,224,244,0.8) 66%, rgba(253,234,247,0.8) 100%); background: -ms-radial-gradient( 50% 50%, rgba(253,214,240,0.8) 0%, rgba(253,224,244,0.8) 66%, rgba(253,234,247,0.8) 100%); opacity:0; transition: all 0.1s ease-in 0.2s;} .nose{width:30px;height:10px; border-bottom: 8px solid #000;border-radius:0% 0% 50% 50%; position: absolute;top:250px;left:50%;margin-left: -15px;z-index:15;} .mouth-wrap{width:100px;height:20px;position:absolute;top:268px;left:50%; margin-left:-50px;overflow: hidden;} .mouth{width:50px;height:40px;} .mouth-wrap .left{border-bottom:4px solid #000;border-right: 4px solid #000; border-radius: 0% 40% 50% 20%;position: absolute;left: 0;bottom:0;} .mouth-wrap .right{border-bottom: 4px solid #000;border-left: 4px solid #000; border-radius: 40% 0% 20% 50%;position: absolute;right: 0;bottom:0;} .mustache-wrap{ height:80px;width: 380px; position:absolute;top:190px;left:50%; z-index:20;margin-left: -190px;} .mustache > div:first-child{ width:30px;height: 10px; border-top:6px #E53941 solid; border-radius:30% 50% 20% 50%; transform: rotate(25deg); -ms-transform: rotate(25deg); -moz-transform: rotate(25deg); -webkit-transform: rotate(25deg); -o-transform: rotate(25deg);margin-left: 20px;} .mustache > div:nth-child(2) { width: 20px; height: 6px; background-color: #E53941; border-radius: 50% 50% 50% 50%; transform: rotate(25deg); -ms-transform: rotate(25deg); -moz-transform: rotate(25deg); -webkit-transform: rotate(25deg); -o-transform: rotate(25deg); margin-left: 20px; } .mustache > div:nth-child(3) { width: 32px; height: 10px; border-bottom: 4px #E53941 solid; border-radius: 30% 0% 50% 30%; transform: rotate(25deg); -ms-transform: rotate(25deg); -moz-transform: rotate(25deg); -webkit-transform: rotate(25deg); -o-transform: rotate(25deg); margin-left: 8px; } .mustache > div:nth-child(4) { margin-top: 20px; width: 26px; height: 20px; border-bottom: 4px #E53941 solid; border-radius: 30% 0% 50% 30%; transform: rotate(30deg); -ms-transform: rotate(30deg); -moz-transform: rotate(30deg); -webkit-transform: rotate(30deg); -o-transform: rotate(30deg); margin-left: 28px; } .mustache > div:last-child { width: 22px; height: 10px; border-bottom: 3px #E53941 solid; border-radius: 0% 0% 50% 50%; transform: rotate(-15deg); -ms-transform: rotate(-15deg); -moz-transform: rotate(-15deg); -webkit-transform: rotate(-15deg); -o-transform: rotate(-15deg); margin-left: 40px; margin-top: -8px; } .mustache-wrap .right { transform: rotateY(180deg); -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); margin-top: -85px; } .box:hover .ear_l{ transform: rotate(0deg); -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); border-radius: 4% 80% 0% 60%; transition: all 1s; } .box:hover .ear_r{ transform: rotate(0deg); -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); border-radius: 80% 4% 60% 0%; transition: all 1s; } .box:hover .eye-bottom { bottom:16px; transition: all 1s; } .box:hover .eye-core { width:40px;margin-left: -20px; transition: all 1s; } .box:hover .eye-red{ opacity: 1; transition: all 1s; } .box:hover .mouth { border-radius: 50%; transition: all 1s; } </style></head><body><div class="box"> <ul class="ears"> <li class="ear ear_l"></li> <li class="ear ear_r"></li> </ul> <div class="face"> <div class="facebox"> <ul class="hairs"> <li class="hair"></li> </ul> <div class="eye-wrap"> <div class="eye eye_l"> <div class="eye-circle"> <div class="eye-core"></div> </div> <div class="eye-bottom"></div> <div class="eye-red"></div> </div> <div class="eye eye_r"> <div class="eye-circle"> <div class="eye-core"></div> </div> <div class="eye-bottom"></div> <div class="eye-red"></div> </div> </div> <div class="nose"></div> <div class="mouth-wrap"> <div class="mouth left"></div> <div class="mouth right"></div> </div> <div class="mustache-wrap"> <div class="mustache left"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="mustache right"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> </div> </div></div></body></html>注意事项：当将style中的css样式分离到css文件中后，每次刷新页面会出现动画（元素转为设置状态的动画=》不需要）
0 0
- 纯css小猫
- 纯CSS3绘制的小猫笑脸动画
- 小猫
- Css-纯CSS注释层
- 纯CSS工具提示
- 纯CSS菜单
- 纯CSS下拉菜单
- 中国象棋纯CSS版
- 纯CSS Lightbox效果
- 纯CSS+DIV对联
- 纯CSS Lightbox效果
- 纯CSS下拉菜单
- 纯CSS下拉菜单
- 纯css 下拉列表
- 纯CSS圆角框
- 纯CSS级联菜单
- 纯CSS Tooltips
- 纯css下拉菜单
- sql 2008获取表字段说明
- 欢迎使用CSDN-markdown编辑器
- clang: a C language family frontend for LLVM
- Android SDK之系统权限
- （Ryan的Koa系列博客）6.依赖库：on-finished（本文尚未完成）
- 纯css小猫
- Android ContentProvider+获取系统联系人小Demo
- <iframe>标签自适应高度和宽度
- 在jsp的c标签循环后台对象属性的情况下，使用js提取其中一个id属性使用ajax传到后台删除
- iOS开源项目周报0216
- Java 基础
- arcEngine 10.1与arcEngine 10.2中smoothline的区别
- 一些有趣的js正则表达式
- eclipse中Junit报错总结（1）
