51工具盒子前言
前几天看了一篇文章 ， 颠覆了我对 CSS 认识，心中无数次蹦出一个念头：'WC，还能特么这么用，这特么太叼了' ...
于是我迫不及待想跟你们一起分享分享，以后你也可以在别人面前炫（装）耀（B）了~
ps：本文原创不是我，我只是搬运工，看到好东西与大家分享而已
装B指南
本文中，所有的图形都是在单个标签内实现的，大量使用了 CSS3 中的 ::before 、 ::after 伪元素， transparent 、 border，多重线性与径向渐变，多重内外阴影，如果你的效果不尽人意，请尝试在 Chrome 浏览器下预览。
装B技巧
本文所有图形都会有个容器 <div class="css-cell"></div>包裹，其样式结构如下：
.css-cell{position: relative; width: 100%; height: 300px; }
所有图形都是在容器内实现的，其结构如下：
<!--heart--><div class="css-cell"> <div class="heart"></div> </div>
天气那一块有部分会多一个容器，其结构如下：
<div class="css-cell "><div class="breeze-container"> <div class="breeze"></div> </div> </div>
为了方便起见，下面图形的具体实现，我只会贴出对应的类相应的样式代码~
装逼实战
太阳
利用线性渐变、阴影、旋转实现，具体代码如下：
/*sun*/.sun{ position: absolute; top: 50%; left: 50%; width:200px; height:260px; transform: translate(-50%, -50%); background:#0BF; border-radius:5px; } .sun:before{ content:""; position: absolute; width: 80px; height: 80px; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius:50%; background:rgba(255, 238, 68, 1); box-shadow: 0 0 0 15px rgba(255,255,0,0.2),0 0 15px #fff; z-index:-10; } .sun:after{ content:""; position: absolute; top: 50%; left: 50%; height: 160px; width: 160px; transform: translate(-50%, -50%) rotate(30deg); z-index:-100; background-image: -webkit-linear-gradient(top,rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%), -webkit-linear-gradient(left,rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%); background-size: 20px 100%, 100% 20px; background-repeat: no-repeat; background-position: center center, center center; animation:sunRotate 10s linear infinite; } @keyframes sunRotate{ 0%{ transform: translate(-50%, -50%) rotate(30deg); } 100%{ transform: translate(-50%, -50%) rotate(390deg); } }
多云
利用线性渐变、阴影、缩放实现，具体实现如下:
/*cloudy*/.cloudy{ position: absolute; top: 50%; left: 50%; width:200px; height:260px; transform: translate(-50%, -50%); background:#2EB5E5; border-radius:5px; } .cloudy:before { content: ""; text-indent:23px; font-size:22px; line-height:40px; color:#333; position: absolute; height: 50px;width: 50px; background: #FFFFFF; left:30%; top:45%; transform: translate(-50%, -50%); border-radius: 50%; box-shadow: #FFFFFF 65px -15px 0 -5px, #FFFFFF 25px -25px, #FFFFFF 30px 10px, #FFFFFF 60px 15px 0 -10px, #FFFFFF 85px 5px 0 -5px, #C8C8C8 35px -35px, #C8C8C8 66px -27px 0 -5px, #C8C8C8 91px -10px 0 -8px; animation: cloudy 5s ease-in-out infinite; } .cloudy:after{ content:""; position: absolute; top: 80%; left: 50%; height: 15px; width: 120px; background:rgba(0,0,0,.5); border-radius: 50%; transform: translate(-50%, -50%); animation: cloudy_shadow 5s ease-in-out infinite; } @keyframes cloudy { 50%{ transform: translate(-50%, -70%); } 100%{ transform: translate(-50%, -50%); } } @keyframes cloudy_shadow { 50%{ transform: translate(-50%, -50%) scale(0.8); background:rgba(0,0,0,.2); } 100%{ transform: translate(-50%, -50%) scale(1); background:rgba(0,0,0,.5); } }
/*cloudy2*/.cloudy2{ position: absolute; top: 50%; left: 50%; width:200px; height:260px; transform: translate(-50%, -50%); background:#2EB5E5; border-radius:5px; } .cloudy2:before { content: ""; text-indent:23px; font-size:22px; line-height:40px; color:#333; position: absolute; height: 50px;width: 50px; background: #FFFFFF; left:30%; top:55%; transform: translate(-50%, -50%); border-radius: 50%; z-index:100; box-shadow: #FFFFFF 65px -15px 0 -5px, #FFFFFF 25px -25px, #FFFFFF 30px 10px, #FFFFFF 60px 15px 0 -10px, #FFFFFF 85px 5px 0 -5px; animation: cloudy2 5s ease-in-out infinite; } .cloudy2:after{ content:""; position: absolute; top: 45%;left: 63%; height: 60px; width: 60px; z-index:10; background:linear-gradient(180deg,#FE9F38 0%, #F46635 100%); border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 10px 4px #FFA563; animation: cloudy2 10s ease-in-out infinite; } @keyframes cloudy2 { 50%{ transform: translate(-50%, -70%); } 100%{ transform: translate(-50%, -50%); } }
雨
利用线性渐变、阴影、缩放实现，具体代码如下：
/*rainy*/.rainy { position: absolute; width: 3px; height: 6px; top: 30%; left: 50%; background: #CCCCCC; border-radius: 50%; animation: rainy_rain .7s infinite linear; } .rainy:before { content: ""; color: #333; position: absolute; height: 50px; width: 50px; top: 30px; left: -40px; background: #CCC; transform: translate(-50%, -50%); border-radius: 50%; box-shadow: #CCC 65px -15px 0 -5px, #CCC 25px -25px, #CCC 30px 10px, #CCC 60px 15px 0 -10px, #CCC 85px 5px 0 -5px; animation: cloudy 5s ease-in-out infinite; } .rainy:after { content: ""; position: absolute; top: 120px; left: 50%; height: 15px; width: 120px; background: rgba(0, 0, 0, .5); border-radius: 50%; transform: translate(-50%, -50%); animation: cloudy_shadow 5s ease-in-out infinite; } @keyframes cloudy { 50% { transform: translate(-50%, -70%); } 100% { transform: translate(-50%, -50%); } } @keyframes cloudy_shadow { 50% { transform: translate(-50%, -50%) scale(0.8); background: rgba(0, 0, 0, .2); } 100% { transform: translate(-50%, -50%) scale(1); background: rgba(0, 0, 0, .5); } } @keyframes rainy_rain { 0% { box-shadow: rgba(0, 0, 0, 0) -10px 30px, rgba(0, 0, 0, 0) 40px 40px, rgba(0, 0, 0, .3) -50px 75px, rgba(0, 0, 0, .3) 55px 50px, rgba(0, 0, 0, .3) -18px 100px, rgba(0, 0, 0, .3) 12px 95px, rgba(0, 0, 0, .3) -31px 45px, rgba(0, 0, 0, .3) 30px 35px; } 25% { box-shadow: rgba(0, 0, 0, .3) -10px 45px, rgba(0, 0, 0, .3) 40px 60px, rgba(0, 0, 0, .3) -50px 90px, rgba(0, 0, 0, .3) 55px 65px, rgba(0, 0, 0, 0) -18px 120px, rgba(0, 0, 0, 0) 12px 120px, rgba(0, 0, 0, .3) -31px 70px, rgba(0, 0, 0, .3) 30px 60px; } 26% { box-shadow: rgba(0, 0, 0, .3) -10px 45px, rgba(0, 0, 0, .3) 40px 60px, rgba(0, 0, 0, .3) -50px 90px, rgba(0, 0, 0, .3) 55px 65px, rgba(0, 0, 0, 0) -18px 40px, rgba(0, 0, 0, 0) 12px 20px, rgba(0, 0, 0, .3) -31px 70px, rgba(0, 0, 0, .3) 30px 60px; } 50% { box-shadow: rgba(0, 0, 0, .3) -10px 70px, rgba(0, 0, 0, .3) 40px 80px, rgba(0, 0, 0, 0) -50px 100px, rgba(0, 0, 0, .3) 55px 80px, rgba(0, 0, 0, .3) -18px 60px, rgba(0, 0, 0, .3) 12px 45px, rgba(0, 0, 0, .3) -31px 95px, rgba(0, 0, 0, .3) 30px 85px; } 51% { box-shadow: rgba(0, 0, 0, .3) -10px 70px, rgba(0, 0, 0, .3) 40px 80px, rgba(0, 0, 0, 0) -50px 45px, rgba(0, 0, 0, .3) 55px 80px, rgba(0, 0, 0, .3) -18px 60px, rgba(0, 0, 0, .3) 12px 45px, rgba(0, 0, 0, .3) -31px 95px, rgba(0, 0, 0, .3) 30px 85px; } 75% { box-shadow: rgba(0, 0, 0, .3) -10px 95px, rgba(0, 0, 0, .3) 40px 100px, rgba(0, 0, 0, .3) -50px 60px, rgba(0, 0, 0, 0) 55px 95px, rgba(0, 0, 0, .3) -18px 80px, rgba(0, 0, 0, .3) 12px 70px, rgba(0, 0, 0, 0) -31px 120px, rgba(0, 0, 0, 0) 30px 110px; } 76% { box-shadow: rgba(0, 0, 0, .3) -10px 95px, rgba(0, 0, 0, .3) 40px 100px, rgba(0, 0, 0, .3) -50px 60px, rgba(0, 0, 0, 0) 55px 35px, rgba(0, 0, 0, .3) -18px 80px, rgba(0, 0, 0, .3) 12px 70px, rgba(0, 0, 0, 0) -31px 25px, rgba(0, 0, 0, 0) 30px 15px; } 100% { box-shadow: rgba(0, 0, 0, 0) -10px 120px, rgba(0, 0, 0, 0) 40px 120px, rgba(0, 0, 0, .3) -50px 75px, rgba(0, 0, 0, .3) 55px 50px, rgba(0, 0, 0, .3) -18px 100px, rgba(0, 0, 0, .3) 12px 95px, rgba(0, 0, 0, .3) -31px 45px, rgba(0, 0, 0, .3) 30px 35px; } }
微风
利用border、transparent、实现，这个会多一层 div.breeze-container 包裹，样式代码如下：
/*breeze*/.breeze-container{ position: absolute; top: 50%;left: 50%; width:200px;height:260px; transform: translate(-50%, -50%); text-align:center; font-size:200%; color:#fff; background:#00BBFF; border-radius:5px; } .breeze-container:after{ content:""; position:absolute; top:58%; left:50%; transform: translate(-50%, -50%); width:6px; height:70px; background:#fff; } .breeze{ position:absolute; top: 30%; left: 50%; transform: translate(-50%, -50%) rotate(1deg); border-bottom:60px solid #fff; border-left:5px solid transparent; border-right:5px solid transparent; animation: windmill 12s infinite linear; transform-origin:50.5% 62px; } .breeze:before{ position:absolute; top: 75px;left: -59px; content:""; border-right:60px solid #fff; border-top:5px solid transparent; border-bottom:5px solid transparent; transform:rotate(-30deg); } .breeze:after{ position:absolute; top: 75px;left: -1px; content:""; border-left:60px solid #fff; border-top:5px solid transparent; border-bottom:5px solid transparent; transform:rotate(30deg); } @keyframes windmill{ 0%{ transform: translate(-50%, -50%) rotate(0deg); } 100%{ transform: translate(-50%, -50%) rotate(360deg); } }
彩虹
主要是利用border、box-shadow 实现，具体实现如下：
/*rainbow*/.rainbow-container{ position: absolute; top: 50%; left: 50%; width:200px; height:260px; transform: translate(-50%, -50%); background:#F3D166; border-radius:5px; } .rainbow{ position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 1px;width: 1px; } .rainbow:before{ content:""; position:absolute; top: 50%;left: 50%; transform: translate(-50%, -50%) rotate(45deg); height: 70px;width: 70px; border-radius: 100px 0 0 0; box-shadow: #F44336 -2px -2px 0 1px, #FF9800 -4px -4px 0 3px, #FFEB3B -6px -6px 0 5px, #8BC34A -8px -8px 0 7px, #00BCD4 -10px -10px 0 9px, #2196F3 -12px -12px 0 11px, #9C27B0 -14px -14px 0 13px; animation: rainbow 5s ease-in-out infinite; } .rainbow:after{ content: ""; position: absolute; top: 70px; left: 50%; height: 15px; width: 120px; background: rgba(0, 0, 0, .5); border-radius: 50%; transform: translate(-50%, -50%); animation: cloudy_shadow 5s ease-in-out infinite; } @keyframes rainbow { 50% { transform: translate(-50%, -55%) rotate(30deg); } 100% { transform: translate(-50%, -50%) rotate(45deg); } } @keyframes cloudy_shadow { 50% { transform: translate(-50%, -50%) scale(0.8); background: rgba(0, 0, 0, .2); } 100% { transform: translate(-50%, -50%) scale(1); background: rgba(0, 0, 0, .5); } }
夜空
主要是利用 box-shadow 实现 ， 实现方式如下：
/*starry*/.starry-container{ position: absolute; top: 50%; left: 50%; width:200px; height:260px; transform: translate(-50%, -50%); background:#222233; border-radius:5px; } .starry{ position:absolute; top: 30%;left: 40%; transform: translate(-50%, -50%); height: 4px;width: 4px; border-radius:50%; box-shadow: #FFFFFF -26px 77px 0 -1px, rgba(255,255,255,0.1) -36px 59px 0 -1px, rgba(255,255,255,0.1) -28px 89px 0 -1px, #FFFFFF -35px 20px 0 -1px, #FFFFFF 14px 100px, rgba(255,255,255,0.1) 41px 60px, #FFFFFF 34px 39px, rgba(255,255,255,0.1) 14px 45px 0 -1px, #FFFFFF 64px 12px 0 -1px, rgba(255,255,255,0.1) 32px 96px 0 -1px, #FFFFFF 64px 71px, rgba(255,255,255,0.1) 60px 18px 0 -1px, #FFFFFF 34px 9px, rgba(255,255,255,0.1) -26px 55px 0 -1px; animation: starry_star 5s ease-in-out infinite; } .starry:before{ content:""; position:absolute; top: 20%;left: 50%; width:100px;height:100px; box-shadow: #FFFFFF -25px 0; transform: rotate(-5deg); border-radius: 50%; animation: starry 5s ease-in-out infinite; } @keyframes starry { 50% { transform: rotate(10deg); } } @keyframes starry_star{ 50%{ box-shadow: rgba(255,255,255,0.1) -26px 77px 0 -1px, #FFF -36px 59px 0 -1px, #FFF -28px 89px 0 -1px, rgba(255,255,255,0.1) -35px 20px 0 -1px, rgba(255,255,255,0.1) 14px 100px, #FFF 41px 60px, rgba(255,255,255,0.1) 34px 39px, #FFF 14px 45px 0 -1px, rgba(255,255,255,0.1) 64px 12px 0 -1px, #FFF 32px 96px 0 -1px, rgba(255,255,255,0.1) 64px 71px, #FFF 60px 18px 0 -1px, rgba(255,255,255,0.1) 34px 9px, #FFF -26px 55px 0 -1px; } }
雷电
主要是利用阴影、border实现，代码如下：
/*thunder*/.thunder-container { position: absolute; top: 50%; left: 50%; width: 200px; height: 260px; transform: translate(-50%, -50%); background: #444; border-radius: 5px; } .thunder { color: #333; position: absolute; height: 50px; width: 50px; top: 40%; left: 30%; background: #222; transform: translate(-50%, -50%); border-radius: 50%; box-shadow: #222 65px -15px 0 -5px, #222 25px -25px, #222 30px 10px, #222 60px 15px 0 -10px, #222 85px 5px 0 -5px; animation: cloudy 5s ease-in-out infinite; } .thunder:before { content: ""; position: absolute; top: 60px; left: 60px; border-left: 0px solid transparent; border-right: 8px solid transparent; border-top: 38px solid yellow; box-shadow: yellow -7px -32px; transform:rotate(30deg); transform-origin:center -50px; animation:stormy_thunder 2s steps(1, end) infinite;; } .thunder:after { content: ""; position: absolute; top: 120px; left: 64px; height: 15px; width: 120px; background: rgba(0, 0, 0, .5); border-radius: 50%; z-index:-1; transform: translate(-50%, -50%); animation: cloudy_shadow 5s ease-in-out infinite; } @keyframes cloudy { 50% { transform: translate(-50%, -30px); } } @keyframes cloudy_shadow { 50% { transform: translate(-50%, 0) scale(0.8); background: rgba(0, 0, 0, .2); } } @keyframes stormy_thunder{ 0% { transform: rotate(30deg); opacity:1; } 5% { transform: rotate(-34deg); opacity:1; } 10% { transform: rotate(0deg); opacity:1; } 15% { transform: rotate(-34deg); opacity:0; } }
大雪
利用阴影实现 ， 代码如下：
/*snow*/.snowy-container { position: absolute; top: 50%; left: 50%; width: 200px; height: 260px; transform: translate(-50%, -50%); text-align: center; font-size: 200%; color: #fff; background: #607D8B; border-radius: 5px; } .snowy { position: absolute; width: 4px; height: 4px; border-radius:50%; top: 30%; left: 50%; background: #fff; border-radius: 50%; animation: snowy_rain 2s infinite linear; } .snowy:before { content: ""; color: #333; position: absolute; height: 50px; width: 50px; top: 30px; left: -40px; background: #eee; transform: translate(-50%, -50%); border-radius: 50%; box-shadow: #eee 65px -15px 0 -5px, #eee 25px -25px, #eee 30px 10px, #eee 60px 15px 0 -10px, #eee 85px 5px 0 -5px; animation: cloudy 5s ease-in-out infinite; } .snowy:after { content: ""; position: absolute; top: 120px; left: 50%; height: 15px; width: 120px; background: rgba(0, 0, 0, .5); border-radius: 50%; transform: translate(-50%, -50%); animation: cloudy_shadow 5s ease-in-out infinite; } @keyframes cloudy { 50% { transform: translate(-50%, -70%); } 100% { transform: translate(-50%, -50%); } } @keyframes cloudy_shadow { 50% { transform: translate(-50%, -50%) scale(0.8); background: rgba(0, 0, 0, .2); } 100% { transform: translate(-50%, -50%) scale(1); background: rgba(0, 0, 0, .5); } } @keyframes snowy_rain { 0% { box-shadow: rgba(255, 255, 255, 0) -10px 30px, rgba(255, 255, 255, 0) 40px 40px, rgba(255, 255, 255, .6) -50px 75px, rgba(255, 255, 255, .6) 55px 50px, rgba(255, 255, 255, .6) -18px 100px, rgba(255, 255, 255, .6) 12px 95px, rgba(255, 255, 255, .6) -31px 45px, rgba(255, 255, 255, .6) 30px 35px; } 25% { box-shadow: rgba(255, 255, 255, .6) -10px 45px, rgba(255, 255, 255, .6) 40px 60px, rgba(255, 255, 255, .6) -50px 90px, rgba(255, 255, 255, .6) 55px 65px, rgba(255, 255, 255, 0) -18px 120px, rgba(255, 255, 255, 0) 12px 120px, rgba(255, 255, 255, .6) -31px 70px, rgba(255, 255, 255, .6) 30px 60px; } 26% { box-shadow: rgba(255, 255, 255, .6) -10px 45px, rgba(255, 255, 255, .6) 40px 60px, rgba(255, 255, 255, .6) -50px 90px, rgba(255, 255, 255, .6) 55px 65px, rgba(255, 255, 255, 0) -18px 40px, rgba(255, 255, 255, 0) 12px 20px, rgba(255, 255, 255, .6) -31px 70px, rgba(255, 255, 255, .6) 30px 60px; } 50% { box-shadow: rgba(255, 255, 255, .6) -10px 70px, rgba(255, 255, 255, .6) 40px 80px, rgba(255, 255, 255, 0) -50px 100px, rgba(255, 255, 255, .6) 55px 80px, rgba(255, 255, 255, .6) -18px 60px, rgba(255, 255, 255, .6) 12px 45px, rgba(255, 255, 255, .6) -31px 95px, rgba(255, 255, 255, .6) 30px 85px; } 51% { box-shadow: rgba(255, 255, 255, .6) -10px 70px, rgba(255, 255, 255, .6) 40px 80px, rgba(255, 255, 255, 0) -50px 45px, rgba(255, 255, 255, .6) 55px 80px, rgba(255, 255, 255, .6) -18px 60px, rgba(255, 255, 255, .6) 12px 45px, rgba(255, 255, 255, .6) -31px 95px, rgba(255, 255, 255, .6) 30px 85px; } 75% { box-shadow: rgba(255, 255, 255, .6) -10px 95px, rgba(255, 255, 255, .6) 40px 100px, rgba(255, 255, 255, .6) -50px 60px, rgba(255, 255, 255, 0) 55px 95px, rgba(255, 255, 255, .6) -18px 80px, rgba(255, 255, 255, .6) 12px 70px, rgba(255, 255, 255, 0) -31px 120px, rgba(255, 255, 255, 0) 30px 110px; } 76% { box-shadow: rgba(255, 255, 255, .6) -10px 95px, rgba(255, 255, 255, .6) 40px 100px, rgba(255, 255, 255, .6) -50px 60px, rgba(255, 255, 255, 0) 55px 35px, rgba(255, 255, 255, .6) -18px 80px, rgba(255, 255, 255, .6) 12px 70px, rgba(255, 255, 255, 0) -31px 25px, rgba(255, 255, 255, 0) 30px 15px; } 100% { box-shadow: rgba(255, 255, 255, 0) -10px 120px, rgba(255, 255, 255, 0) 40px 120px, rgba(255, 255, 255, .6) -50px 75px, rgba(255, 255, 255, .6) 55px 50px, rgba(255, 255, 255, .6) -18px 100px, rgba(255, 255, 255, .6) 12px 95px, rgba(255, 255, 255, .6) -31px 45px, rgba(255, 255, 255, .6) 30px 35px; } }
装逼总结
怎么样，是不是颠覆了你对 CSS3 的认识？
实际上 CSS3 带给我们的远不止这些东西，没有做不到，只有想不到，只有你脑洞够大，各种黑科技、酷炫的 CSS 必然也是手到擒来~
虽然你给不了 CSS3 全部，但它却把全部给了你，骚年，加油吧~
PS: 本文由Chris威在掘金上发布，进行了部分节选。
