开脑洞系列——CSS3版天气预报

2018/1/20 00:15:18admin0 阅读23 评论

<h2>前言</h2>
前几天看了一篇文章，颠覆了我对 <span class=“box-one”> CSS</span> 认识，心中无数次蹦出一个念头：‘WC，还能特么这么用，这特么太叼了’ …

于是我迫不及待想跟你们一起分享分享，以后你也可以在别人面前炫（装）耀（B）了~

ps：本文原创不是我，我只是搬运工，看到好东西与大家分享而已

本文中，所有的图形都是在单个标签内实现的，大量使用了 <span class=“box-one”> CSS3 </span>中的 <span class=“box-one”>::before </span>、 <span class=“box-one”>::after</span> 伪元素， <span class=“box-one”>transparent</span> 、 <span class=“box-one”>border</span>，多重线性与径向渐变，多重内外阴影，如果你的效果不尽人意，请尝试在 Chrome 浏览器下预览。

本文所有图形都会有个容器 <span class=“box-one”> <div class=“css-cell”></div></span>包裹，其样式结构如下：

<pre class=“line-numbers language-css”><code class=“language-css”>
.css-cell{

position: relative;

width: 100%;

height: 300px;

}

</code></pre>
所有图形都是在容器内实现的，其结构如下：

&lt;div class="css-cell"&gt;

&lt;div class="heart"&gt;&lt;/div&gt;

&lt;/div&gt;

</code></pre>

天气那一块有部分会多一个容器，其结构如下：

&lt;div class="breeze-container"&gt;

&lt;div class="breeze"&gt;&lt;/div&gt;

&lt;/div&gt;

&lt;/div&gt;

</code></pre>

为了方便起见，下面图形的具体实现，我只会贴出对应的类相应的样式代码~
<h2>装逼实战</h2>
<h3>太阳</h3>
<img src=“https://moshanghua.oss-cn-shanghai.aliyuncs.com/images/msh-1412-01.gif” alt=“” />
利用线性渐变、阴影、旋转实现，具体代码如下：

<pre class=“line-numbers language-css”><code class=“language-css”>
/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);

}

}

</code></pre>
<h3>多云</h3>
<img src=“https://moshanghua.oss-cn-shanghai.aliyuncs.com/images/msh-1412-02.gif” alt=“” />
利用线性渐变、阴影、缩放实现，具体实现如下:

<pre class=“line-numbers language-css”><code class=“language-css”>
/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);

}

}

</code></pre>

<pre class=“line-numbers language-css”><code class=“language-css”>
/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%);

}

}

</code></pre>

<h3>雨</h3>
<img src=“https://moshanghua.oss-cn-shanghai.aliyuncs.com/images/msh-1412-04.gif” alt=“” />
利用线性渐变、阴影、缩放实现，具体代码如下：

<pre class=“line-numbers language-css”><code class=“language-css”>
/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;

}

}

</code></pre>

<h3>微风</h3>
<img src=“https://moshanghua.oss-cn-shanghai.aliyuncs.com/images/msh-1412-05.gif” alt=“” />
利用border、transparent、实现，这个会多一层 div.breeze-container 包裹，样式代码如下：

<pre class=“line-numbers language-css”><code class=“language-css”>
/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);

}

}

</code></pre>

<h3>彩虹</h3>
<img src=“https://moshanghua.oss-cn-shanghai.aliyuncs.com/images/msh-1412-06.gif” alt=“” />
主要是利用border、box-shadow 实现，具体实现如下：

<pre class=“line-numbers language-css”><code class=“language-css”>
/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);

}

}

</code></pre>

<h3>夜空</h3>
<img src=“https://moshanghua.oss-cn-shanghai.aliyuncs.com/images/msh-1412-07.gif” alt=“” />
主要是利用 box-shadow 实现，实现方式如下：

<pre class=“line-numbers language-css”><code class=“language-css”>
/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;

}

}

</code></pre>

<h3>雷电</h3>
<img src=“https://moshanghua.oss-cn-shanghai.aliyuncs.com/images/msh-1412-08.gif” alt=“” />
主要是利用阴影、border实现，代码如下：

<pre class=“line-numbers language-css”><code class=“language-css”>
/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; }

}

</code></pre>

<h3>大雪</h3>
<img src=“https://moshanghua.oss-cn-shanghai.aliyuncs.com/images/msh-1412-09.gif” alt=“” />
利用阴影实现，代码如下：

<pre class=“line-numbers language-css”><code class=“language-css”>
/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;

}

}

</code></pre>

怎么样，是不是颠覆了你对 <span class=“box-one”>CSS3</span> 的认识？

实际上<span class=“box-one”> CSS3</span> 带给我们的远不止这些东西，没有做不到，只有想不到，只有你脑洞够大，各种黑科技、酷炫的 <span class=“box-one”>CSS </span>必然也是手到擒来~

虽然你给不了<span class=“box-one”> CSS3</span> 全部，但它却把全部给了你，骚年，加油吧~

<div class=“cue-blue” style=“margin-top: 30px;”>
PS: 本文由Chris威在掘金上发布，进行了部分节选。
</div>

评论区

#12
燕十三2018/5/1 23:14:54
css3吗？挺6的。我只懂一点皮毛。没升入研究过， [piezui]

WindowsChrome
- #1
  xiaomo2018/5/2 12:58:52
  @燕十三
  [xiaojiujie] [xiaojiujie]
  
  WindowsFirefox
#11
吾爱资源网2018/4/1 22:02:26
写的不错，顶一下

WindowsChrome
#10
北海2018/3/17 10:24:32
为什么不在博客放个？不是美滋滋？

WindowsChrome
- #1
  xiaomo2018/3/19 08:29:55
  @北海
  放不上，技术不够 [xiaoku] [xiaojiujie]
  
  WindowsFirefox
#9
365cent2018/2/27 23:16:50
我之前也做个带带天气的贺卡，感觉还行http://www.365cent.com/gift/elsa
就是不知道怎么接天气预报的api

WindowsChrome
- #1
  xiaomo2018/2/28 11:09:53
  @365cent
  哇哦，厉害了啊， [guzhang]
  
  WindowsFirefox
#8
Parkmimi2018/2/26 12:21:25
wow CSS还能这么玩！（不过我之前看到有人用CSS3画出来个哆啦A梦过，感觉这个更高端啊）

WindowsChrome
- #1
  xiaomo2018/2/26 13:29:12
  @Parkmimi
  哈哈，说句离谱的，只有你想不到的，没有画不出的 [xieyanxiao]
  
  WindowsFirefox
#7
广树2018/1/26 22:57:25
这个只要对动画和图形有一定理解并且熟悉css3的话，还不算难。

WindowsChrome
- #1
  xiaomo2018/1/27 20:37:42
  @广树
  哈哈，很有意思的 [xieyanxiao]
  
  WindowsChrome
#6
wu先生2018/1/23 17:50:50
不明觉历啊。 [weixiao]

WindowsChrome
- #1
  xiaomo2018/1/24 23:00:20
  @wu先生
  一脸懵逼 [tuosai]
  
  WindowsChrome
#5
轩陌2018/1/23 08:01:56
[img]/wp-content/themes[xu]anmo/images/comments/1412/20180123080106177261.jpeg[/img]

macOSSafari
#4
北海2018/1/22 00:35:45
那不是可以根据这个撸一个天气预报了再撸个api

AndroidChrome
- #1
  xiaomo2018/1/24 23:01:20
  @北海
  这想法强势 [xiaoku]
  
  WindowsChrome
#3
淘气2018/1/22 00:32:31
我就看看不说话 [haobang]

macOSSafari
- #1
  xiaomo2018/1/24 23:00:48
  @淘气
  我就笑笑 [xieyanxiao]
  
  WindowsChrome