CSS3版天气预报

前言 前几天看了一篇文章 , 颠覆了我对 CSS 认识,心中无数次蹦出一个念头:’WC,还能特么这么用,这特么太叼了’ … 于是我迫不及待想跟你们一起分享分享,以后你也可以在别人面前炫(装)耀(B)了~ ps:本文原创不是我,我只是搬运工,看到好东西与大家分享而已 装B指南 本文中,所有的图形都是在单个标签内实现的,大量使用了 CSS3 中的 ::before 、 ::after 伪元素, transparent 、 border,多重线性与径向渐变,多重内外阴影,如果你的效果不尽人意,请尝试在 Chrome 浏览器下预览。 装B技巧 本文所有图形都会有个容器

包裹,其样式结构如下:

    .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);

 }

 }

多云

利用线性渐变、阴影、缩放实现,具体实现如下:```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);

}

}
[![阴天](https://ws2.sinaimg.cn/large/006KchQJly1fqnykb96uqg3086081gpe.gif "阴天")](https://ws2.sinaimg.cn/large/006KchQJly1fqnykb96uqg3086081gpe.gif "阴天")
```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%);

    }

    }

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

/*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: 本文转载至筱陌之家

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏练小习的专栏

一个CSS画的灰太狼,IE下属于重口味,慎看!

还有几个不错的,比如一个小日本制作的多啦A梦,一个Twitter的当机页面等等,大家可以搜下看看.不得不感叹做前端的哥们闲起来还真是可怕啊.Firefox是正常...

1896
来自专栏练小习的专栏

一些收集整理的JS

整理出一些收集的JS代码,在这里向所有原作者致敬。 1.收集键盘指令 按A就会跳转到练习的网页,请按A <SCRIPT language="JavaScript...

2145
来自专栏谈补锅

Quartz2D复习(二) --- 手势解锁

这次支付宝手机客户端升级,把手势解锁那个功能去掉了,引起很多人的抱怨,觉得少了手势解锁的保护,个人信息容易泄漏了。。。

854
来自专栏iOS Developer

仿window阿里旺旺登陆界面,打印机吐纸动画效果---转自Bison的技术博客

1252
来自专栏iOS Developer

分分钟解决iOS开发中App启动广告的功能

1.2K3
来自专栏Alice

demo2动态加载显示商品详情页

/* 要求:实现 头像+昵称(多余7位用...)           商品图片(根据商品实际的图片的大小进行动态的展示。按照一定的比例进行展示。)       ...

1979
来自专栏陈满iOS

iOS开发验证:设置UITableView的Footer视图透明

其实,上述的方法可以将视图背景改成非透明色,比如红色。但改成透明的时候,还是会显示灰色,不是真正的透明。

671
来自专栏雨尘分享

iOS 10.3 Label高度计算问题 (UITableView+FDTemplateLayoutCell)1.前言2.问题发现3.解决问题4.列举下解决问题的方法

5094
来自专栏Rindew的iOS技术分享

解决iOS 10 之后调用拨号,系统弹窗延迟

2186
来自专栏一“技”之长

iOS简易蓝牙对战五子棋游戏设计思路之二——核心棋盘逻辑与胜负判定算法

    上一篇博客我们介绍了在开发一款蓝牙对战五子棋游戏中核心的蓝牙通讯框架的设计与编写,本篇博客将来完成独立的棋盘逻辑与胜负判定算法。上篇博客地址如下:

942

扫码关注云+社区