开脑洞系列——CSS3版天气预报
分类： 前端探索 2805 23
前言
前几天看了一篇文章 ， 颠覆了我对 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威在掘金上发布，进行了部分节选。
共 23 条评论关于 “开脑洞系列——CSS3版天气预报”