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

小咪咪 2022-06-02 07:39 199阅读 0赞

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

### 装B指南 ###

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

### 装B技巧 ###

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

>     .css-cell{     position: relative;     width: 100%;     height: 300px; }

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

>      <div class="css-cell">     <div class="heart"></div> </div>

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

>     <div class="css-cell ">     <div class="breeze-container">         <div class="breeze"></div>     </div> </div>

为了方便起见，下面图形的具体实现，我只会贴出对应的类相应的样式代码~

### 装逼实战 ###

*  太阳

![0_wx_fmt_gif_tp_webp_wxfrom_5_wx_lazy_1][]

利用线性渐变、阴影、旋转实现，具体代码如下：

>     /*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);     } }

*  多云

![0_wx_fmt_gif_tp_webp_wxfrom_5_wx_lazy_1 1][]

利用线性渐变、阴影、缩放实现，具体实现如下：

>     /*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);     } }

![0_wx_fmt_gif_tp_webp_wxfrom_5_wx_lazy_1 2][]

>     /*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%);     } }

*  雨

![0_wx_fmt_gif_tp_webp_wxfrom_5_wx_lazy_1 3][]

利用线性渐变、阴影、缩放实现，具体代码如下：

>     /*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;     } }

*  微风

![0_wx_fmt_gif_tp_webp_wxfrom_5_wx_lazy_1 4][]

利用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);     } }

*  彩虹

![0_wx_fmt_gif_tp_webp_wxfrom_5_wx_lazy_1 5][]

主要是利用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);     } }

*  夜空

![0_wx_fmt_gif_tp_webp_wxfrom_5_wx_lazy_1 6][]

主要是利用 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;     } }

*  雷电

![0_wx_fmt_gif_tp_webp_wxfrom_5_wx_lazy_1 7][]

主要是利用阴影、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; } }

*  大雪

![0_wx_fmt_gif_tp_webp_wxfrom_5_wx_lazy_1 8][]

利用阴影实现 ， 代码如下：

>     /*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 全部，但它却把全部给了你，骚年，加油吧~

![640_wx_fmt_other_tp_webp_wxfrom_5_wx_lazy_1][]

### 参考文献 ###

本文主要来源以下文章：

magicCss

CSS Secrets

对  CSS 感兴趣的同学可以去作者的  github 点个赞~

[0_wx_fmt_gif_tp_webp_wxfrom_5_wx_lazy_1]: /images/20220602/192da639eabf446d8527e79c2380a494.png
[0_wx_fmt_gif_tp_webp_wxfrom_5_wx_lazy_1 1]: /images/20220602/866defba1e28440d874a310066528974.png
[0_wx_fmt_gif_tp_webp_wxfrom_5_wx_lazy_1 2]: /images/20220602/32fba866da194c4784e42078b812661d.png
[0_wx_fmt_gif_tp_webp_wxfrom_5_wx_lazy_1 3]: /images/20220602/7ae77f9b24fe499f955bcac08426e43a.png
[0_wx_fmt_gif_tp_webp_wxfrom_5_wx_lazy_1 4]: /images/20220602/026251d420f645e7adcd27a19ecef1f7.png
[0_wx_fmt_gif_tp_webp_wxfrom_5_wx_lazy_1 5]: /images/20220602/cf243215818e4aaf9e4aa6cdfcbfa101.png
[0_wx_fmt_gif_tp_webp_wxfrom_5_wx_lazy_1 6]: /images/20220602/0db7b82561e9440dbc0433c8f7c205d5.png
[0_wx_fmt_gif_tp_webp_wxfrom_5_wx_lazy_1 7]: /images/20220602/4753ae83ca52429ab6b2d03da9a70cd0.png
[0_wx_fmt_gif_tp_webp_wxfrom_5_wx_lazy_1 8]: /images/20220602/eb25991c76fa4dafbb879be4a2d40c4a.png
[640_wx_fmt_other_tp_webp_wxfrom_5_wx_lazy_1]: /images/20220602/15cd8cc7a13f44ea8c03d9a4018d1804.png