帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» 纯CSS写出来的雪地里的雪人、下雪效果
纯CSS写出来的雪地里的雪人、下雪效果
浏览:1065次
-
评论:1次
-
发布时间:2017-12-14
Html
Css
Js
body{ background-color: #b4dce4; margin: 0; height: 100vh; } .snowman{ width: 200px; height: 315px; position: absolute; bottom: 10vh; left: 50%; transform: translateX(-50%); z-index: 2; } .snowman__hat{ width: 75px; height: 83px; position: absolute; top: 1px; left: 54px; z-index: 4; } .snowman__hat:before, .snowman__hat:after{ content: ""; border: 3px solid #000; background-color: #b97a57; border-radius: 50%; position: absolute; } .snowman__hat:before{ width: 24px; height: 16px; background-color: #880015; top: 0; left: 20px; z-index: 8; transform: skewX(16deg); } .snowman__hat:after{ width: 63px; height: 30px; background-color: #b97a57; left: 6px; bottom: 0; z-index: 4; transform: skewX(-22deg); } .snowman__hat-item{ height: 67px; width: 75px; position: absolute; overflow: hidden; top: 8px; left: 0; } .snowman__hat-item:before, .snowman__hat-item:after{ content: ""; position: absolute; height: 0; width: 0; } .snowman__hat-item:before{ border-bottom: 90px solid #b97a57; border-left: 22px solid transparent; border-right: 40px solid transparent; left: 9px; bottom: 13.5px; z-index: 6; transform: rotate(-2deg); } .snowman__hat-item:after{ border-bottom: 92px solid #000; border-left: 26px solid transparent; border-right: 42px solid transparent; left: 5px; bottom: 15px; z-index: 5; transform: rotate(-3deg); } .snowman__head{ width: 94px; height: 94px; border: 3px solid #000; background-color: #99d9ea; border-radius: 50%; position: absolute; top: 52px; left: 48px; z-index: 3; } .snowman__eye{ width: 13px; height: 13px; padding: 3px; background-color: #000; border-radius: 50%; position: absolute; } .snowman__eye:before{ content: ""; display: block; width: 11px; height: 8px; border-radius: 50%; border-top: 3px solid #fff; transform: rotate(-15deg); } .snowman__eye-left{ left: 27px; top: 31px; } .snowman__eye-right{ top: 25px; right: 8px; } .snowman__nose{ width: 18px; height: 50px; position: absolute; top: 49.5px; left: 47.8px; z-index: 2; transform-origin: left top; transform: rotate(-60deg); } .snowman__nose:before{ content: ""; width: 12px; height: 9px; border: 2px solid #000; background-color: #ff7f27; border-radius: 50%; position: absolute; top: 3px; left: 0; z-index: 1; } .snowman__carrots{ position: relative; z-index: 1; } .snowman__carrots:before, .snowman__carrots:after{ content: ""; position: absolute; width: 0; height: 0; } .snowman__carrots:before{ border-left: 10px solid transparent; border-right: 6px solid transparent; border-top: 37px solid #000; top: 11px; } .snowman__carrots:after{ border-left: 8px solid transparent; border-right: 4px solid transparent; border-top: 34px solid #ff7f27; left: 2px; top: 10px; } .snowman__roth{ width: 32px; height: 13px; position: absolute; bottom: 7px; left: 38px; border-radius: 0 0 25px 25px; background-color: #ea1c23; border: 3px solid #000; transform: skewX(8deg); } .snowman__body{ width: 135px; height: 115px; position: absolute; top: 115px; left: 47%; transform: translateX(-50%); z-index: 2; } .snowman__body:before{ content: ""; width: 100%; height: 100%; background-color: #b9e6f0; box-shadow: inset 0 0 14px 3px #8bd5e5; border: 3px solid #000; border-radius: 50%; position: absolute; top: 0; left: 0; z-index: 2; } .snowman__body:after{ content: ""; width: 60px; height: 20px; border-bottom: 3px solid #000; border-radius: 50%; position: absolute; left: 20px; bottom: 15px; transform: rotate(28deg); z-index: 3; } .snowman__oval:before, .snowman__oval:after{ content: ""; width: 65px; height: 40px; border: 3px solid #000; border-radius: 50% 50%; position: absolute; } .snowman__oval:before{ z-index: 2; } .snowman__hands:before, .snowman__hands:after{ background-color: #9ab1d1; } .snowman__hands:before{ top: 35px; left: -25px; transform: rotate(-27deg); } .snowman__hands:after{ top: 30px; right: -41px; transform: rotate(30deg); } .snowman__body2{ width: 200px; height: 140px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); } .snowman__sphere{ width: 160px; height: 140px; box-shadow: inset 0 0 20px 5px #7ec5d8; background-color: #99d9ea; border-radius: 50%; border: 3px solid #000; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 1; } .snowman__sphere:before, .snowman__sphere:after{ content: ""; position: absolute; border-bottom: 3px solid #000; border-radius: 50%; } .snowman__sphere:before{ width: 70px; height: 20px; right: 15px; bottom: 25px; transform: rotate(-35deg); } .snowman__sphere:after{ width: 50px; height: 10px; right: 5px; top: 55px; transform: rotate(-65deg); } .snowman__feet:before, .snowman__feet:after{ background-color: #7092be; } .snowman__feet:before{ left: 0; bottom: 1px; transform: rotate(-18deg); } .snowman__feet:after{ right: 4px; bottom: 1px; transform: rotate(15deg); } .background{ width: 100%; height: 30vh; background-color: #fdfdff; position: absolute; bottom: 0; left: 0; } .background:before, .background:after{ content: ""; width: 30vw; height: 15vh; border-radius: 50%; background-color: #fdfdff; position: absolute; bottom: 20vh; } .background:before{ left: 10%; } .background:after{ right: 10%; } .snow{ width: 5px; height: 5px; border-radius: 50%; background-color: #fefefe; animation-name: snow; animation-duration: 8000ms; animation-iteration-count: infinite; opacity: 0; position: absolute; top: 0; transform: translateZ(0) translate(0, 0) scale(.2); } .snow1{ left: 10%; transform: translate(1vh); } .snow2{ left: 20%; transform: translate(1.5vh); animation-delay: 200ms; } .snow3{ left: 30%; transform: translate(2vh); animation-delay: 520ms; } .snow4{ left: 40%; transform: translate(2.5vh); animation-delay: 999ms; } .snow5{ left: 50%; transform: translate(3vh); animation-delay: 150ms; } .snow6{ left: 60%; transform: translate(3.5vh); animation-delay: 400ms; } .snow7{ left: 70%; transform: translate(4vh); animation-delay: 1550ms; } .snow8{ left: 80%; transform: translate(4.5vh); animation-delay: 655ms; } .snow9{ left: 86%; transform: translate(5vh); animation-delay: 250ms; } .snow10{ left: 55%; transform: translate(5.5vh); animation-delay: 600ms; } .snow11{ left: 15%; transform: translate(6vh); animation-delay: 2000ms; } .snow12{ left: 25%; transform: translate(6.5vh); animation-delay: 2400ms; } .snow13{ left: 35%; transform: translate(7vh); animation-delay: 2999ms; } .snow14{ left: 45%; transform: translate(7.5vh); animation-delay: 1300ms; } .snow15{ left: 55%; transform: translate(8vh); animation-delay: 2150ms; } .snow16{ left: 65%; transform: translate(8.5vh); animation-delay: 2140ms; } .snow17{ left: 75%; transform: translate(5.5vh); animation-delay: 2600ms; } .snow18{ left: 84%; transform: translate(5.5vh); animation-delay: 2666ms; } .snow19{ left: 89%; transform: translate(5.5vh); animation-delay: 2200ms; } .snow20{ left: 10%; transform: translate(5.5vh); animation-delay: 2400ms; } .snow21{ left: 20%; transform: translate(5.5vh); animation-delay: 3200ms; } .snow22{ left: 30%; transform: translate(5.5vh); animation-delay: 3500ms; } .snow24{ left: 40%; transform: translate(2.5vh); animation-delay: 3999ms; } .snow25{ left: 50%; transform: translate(3vh); animation-delay: 3150ms; } .snow26{ left: 60%; transform: translate(3.5vh); animation-delay: 3400ms; } .snow27{ left: 70%; transform: translate(4vh); animation-delay: 4550ms; } .snow28{ left: 79%; transform: translate(4.5vh); animation-delay: 3655ms; } .snow29{ left: 86%; transform: translate(5vh); animation-delay: 3250ms; } .snow30{ left: 55%; transform: translate(5.5vh); animation-delay: 4600ms; } .snow31{ left: 15%; transform: translate(6vh); animation-delay: 6000ms; } .snow32{ left: 25%; transform: translate(6.5vh); animation-delay: 6400ms; } .snow33{ left: 35%; transform: translate(7vh); animation-delay: 6999ms; } .snow34{ left: 45%; transform: translate(7.5vh); animation-delay: 5300ms; } .snow35{ left: 55%; transform: translate(8vh); animation-delay: 6150ms; } .snow36{ left: 65%; transform: translate(8.5vh); animation-delay: 6140ms; } .snow37{ left: 75%; transform: translate(5.5vh); animation-delay: 6600ms; } .snow38{ left: 83%; transform: translate(5.5vh); animation-delay: 6666ms; } .snow39{ left: 89%; transform: translate(5.5vh); animation-delay: 6200ms; } @keyframes snow{ 10%{ opacity: 1 } 80%{ transform: translate3d(0, 85vh, 0) scale(1.2); } }
$("h1").html(function(index, html) { return html.replace(/\S/g, '
$&
'); });
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
2.1.1
<!doctype html><html><head><meta charset="utf-8"><title>纯CSS写出来的雪地里的雪人、下雪效果-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:纯css 雪人,下雪效果
简单Tab切换
动态圆形导航效果
讨论这个常用代码(1)
回答他人问题或分享心得会奖励牛币
Lv10 CTO
华***n
2017年12月15日
送波6.感谢分享
回复
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
1065
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值