CSS3 带3D卡片翻转动画的天气预报

Weather Forecast 含下雨、闪电动画特效。

CSS3, rain

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2776
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    margin: 0;
    color: #444;
    background-color: #333366;
    font: 300 14px/18px Roboto, sans-serif;
}
*,
:after,
:before {
    box-sizing: border-box
}
.pull-left {
    float: left
}
.pull-right {
    float: right
}
.clearfix:after,
.clearfix:before {
    content: '';
    display: table
}
.clearfix:after {
    clear: both;
    display: block
}
@font-face {
    font-family: 'iconvault';
    src: url(data:application/font-woff;charset=utf-8;base64,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) format('woff');
    font-weight: normal;
    font-style: normal;
}
[class^="icon-"],
[class*=" icon-"] {
    font-family: 'iconvault';
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    -webkit-font-smoothing: antialiased;
}
.basecloud:before,
.windyraincloud:before,
.windysnowcloud:before,
.basethundercloud:before {
    font-family: 'iconvault';
    font-style: normal;
    position: absolute;
    color: #ccc
}
.basecloud:before {
    content: '\f105'
}
.windyraincloud:before {
    content: '\f111'
}
.windysnowcloud:before {
    content: '\f109'
}
.basethundercloud:before {
    content: '\f105'
}
.icon-thunder:before {
    content: '\f114';
    position: absolute;
    color: #ffa500
}
.icon-sunny:after {
    content: '\f101';
    color: #ffa500;
    position: absolute
}
.icon-drizzle:before {
    content: '\f10a';
    color: #82b2e4;
    position: absolute
}
.icon-hail:before {
    content: '\f10f';
    position: absolute;
    color: #ccc
}
.icon-showers:before {
    content: '\f104';
    position: absolute;
    color: #82b2e4
}
.icon-rainy:before {
    content: '\f107';
    position: absolute;
    color: #4681c3
}
.icon-snowy:before {
    content: '\f10b';
    position: absolute;
    color: #acd3f3
}
.icon-frosty:before {
    content: '\f102';
    position: absolute;
    color: #85d8f7
}
.icon-windy:before {
    content: '\f115';
    position: absolute;
    color: #ccc
}
.icon-windyrain:before {
    content: '\f10e';
    position: absolute;
    color: #acd3f3
}
.icon-windysnow:before {
    content: '\f103';
    position: absolute;
    color: #acd3f3
}
.icon-sleet:before {
    content: '\f10c';
    position: absolute;
    color: #acd3f3
}
.icon-moon:after {
    content: '\f10d';
    color: #ffa500;
    position: absolute
}
.icon-night:after {
    content: '\f100';
    position: absolute;
    color: #ffa500
}
.icon-sun::after {
    content: '\f113';
    color: #ffa500;
    position: absolute
}
.icon-cloud:after {
    content: '\f106';
    color: #ccc;
    position: absolute
}
.icon-sunrise:before {
    content: '\f112';
    color: #ffa500;
    position: absolute
}
.icon-sunset:before {
    content: '\f110';
    color: #f96f23;
    position: absolute
}
.icon-mist:before {
    content: '\f108';
    color: #ccc;
    position: absolute
}
.box-inner:after,
.box-base:before,
.box-base:after,
.cloud:before,
.cloud:after,
.cloud .dtl:before,
.cloud .dtl:after,
.statue .hair:before,
.statue .hair:after,
.statue .crown .arrow:before,
.statue .crown .arrow:after,
.statue .body:before,
.statue .body:after,
.statue .hand:before,
.statue .hand:after,
.statue .torch-glow:before,
.statue .torch-glow:after,
.statue .torch:before,
.statue .torch:after,
.statue .cloth:before,
.statue .cloth:after,
.statue .cloth-wrap:before,
.statue .cloth-wrap:after,
.statue .base .top:before,
.statue .base .top:after,
.toggle-switch .tgl-btn:after,
.toggle-switch .dtl-icon>i:before,
.toggle-switch .dtl-icon>i:after {
    content: '';
    position: absolute;
}
.statue,
.statue .head,
.statue .hair,
.statue .crown .arrow,
.statue .torch,
.statue .body,
.statue .cloth,
.statue .base .bar,
.statue .base .top,
.statue .cloth-wrap,
.toggle-switch .dtl-icon>i {
    margin: auto;
    position: relative;
}
.box-wrap {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    position: fixed;
    background-color: #333366;
    background: -webkit-linear-gradient(top, #333366 0, #000 100%);
    background: linear-gradient(to bottom, #333366 0, #000 100%);
}
.box,
.box-base,
.box-inner,
.box .flip {
    max-width: 600px;
    max-height: 350px;
    width: 100%;
    height: 100%
}
.box-inner {
    margin: auto;
    position: relative
}
.box-inner:after {
    width: 100%;
    height: 5px;
    bottom: -56px;
    background: #444;
    -webkit-transform: scaleX(1.41);
    transform: scaleX(1.41);
}
.box {
    margin: auto;
    margin-top: 80px;
    -webkit-perspective: 600px;
    perspective: 600px;
}
.box-base {
    z-index: 1;
    bottom: -320px;
    position: absolute;
    background-color: #333;
    -webkit-transform: rotateX(90deg) translateZ(160px);
    transform: rotateX(90deg) translateZ(160px);
}
.box .flip {
    position: absolute;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: all .8s cubic-bezier(1, 1.55, .2, .8);
    transition: all .8s cubic-bezier(1, 1.55, .2, .8);
}
.box .flip.front {
    z-index: 1;
}
.box .flip.back {
    color: #66cccd;
    background: #333;
    -webkit-transform: rotateX(-90deg) translateZ(160px);
    transform: rotateX(-90deg) translateZ(160px);
}
.toggle {
    opacity: 0;
    z-index: 999;
    visibility: hidden;
    position: absolute;
}
.toggle:checked ~ .box-inner .flip.front {
    z-index: -1;
    opacity: 0;
    -webkit-transform: rotateX(90deg) translateZ(160px);
    transform: rotateX(90deg) translateZ(160px);
}
.toggle:checked ~ .box-inner .flip.back {
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
}
.toggle:checked ~ .box-inner .box:after {
    z-index: -1
}
.city {
    width: 100%;
    bottom: 40px;
    position: absolute;
}
.clouds,
.cloud,
.cloud .dtl {
    position: absolute;
}
.clouds {
    z-index: -1;
    width: inherit;
}
.cloud {
    width: 75px;
    height: 15px;
    border-radius: 15px;
    background-color: #4b5d8b;
    -webkit-animation: move-cloud 10s linear infinite;
    animation: move-cloud 10s linear infinite;
}
.cloud .dtl {
    bottom: 0;
    left: -4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: inherit;
}
.cloud .dtl:before {
    top: -4px;
    left: 22px;
    width: 14px;
    height: 20px;
    border-radius: 12px;
    background-color: inherit;
}
.cloud .dtl:after {
    left: 34px;
    width: 34px;
    bottom: 2px;
    height: 34px;
    border-radius: 50%;
    background-color: inherit;
}
.cloud.cloud-1 {
    top: 15px;
    left: 80px;
    animation-dealy: .2s;
}
.cloud.cloud-2 {
    top: -25px;
    right: 200px;
    background-color: #333366;
    animation-dealy: .4s;
    -webkit-animation-duration: 13s;
    animation-duration: 13s;
}
.cloud.cloud-3 {
    top: 40px;
    width: 55px;
    right: 240px;
    background-color: #2c2c54;
    animation-dealy: .6s;
    -webkit-animation-duration: 15s;
    animation-duration: 15s;
}
.cloud.cloud-3 .dtl {
    width: 18px;
    height: 18px;
}
.cloud.cloud-3 .dtl:before {
    top: -12px;
    left: 14px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: inherit;
}
.cloud.cloud-3 .dtl:after {
    bottom: 0;
    left: 38px;
    width: 24px;
    height: 24px;
}
@-webkit-keyframes move-cloud {
    0%, 100% {
        -webkit-transform: translateX(100px);
        transform: translateX(100px)
    }
    50% {
        -webkit-transform: translateX(-50px);
        transform: translateX(-50px)
    }
}
@keyframes move-cloud {
    0%, 100% {
        -webkit-transform: translateX(100px);
        transform: translateX(100px)
    }
    50% {
        -webkit-transform: translateX(-50px);
        transform: translateX(-50px)
    }
}
.statue {
    left: -70px;
}
.statue .head {
    z-index: 2;
    width: 18px;
    height: 22px;
    margin-bottom: 4px;
    background-color: #66cccd;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border-bottom-left-radius: 12px 22px;
    border-bottom-right-radius: 12px 22px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .38);
}
.statue .hair {
    width: inherit;
    height: inherit;
    overflow: hidden;
    border-radius: inherit;
    border-top: 2px solid #006f75;
}
.statue .hair:before,
.statue .hair:after {
    top: -8px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #389699;
}
.statue .hair:before {
    left: -7px
}
.statue .hair:after {
    right: -5px
}
.statue .crown {
    width: inherit;
    height: inherit;
    position: absolute;
}
.statue .crown .arrow,
.statue .crown .arrow:before,
.statue .crown .arrow:after {
    width: 0;
    height: 0;
    position: absolute;
    border: 2px solid transparent;
    border-bottom: 16px solid #66cccd;
}
.statue .crown .arrow.arrow-1 {
    top: -7px;
    left: -8px;
    -webkit-transform: rotate(-70deg);
    transform: rotate(-70deg)
}
.statue .crown .arrow.arrow-1:before {
    top: 1px;
    left: -8px;
    -webkit-transform: rotate(-18deg);
    transform: rotate(-18deg)
}
.statue .crown .arrow.arrow-1:after {
    right: -9px;
    -webkit-transform: rotate(25deg);
    transform: rotate(25deg)
}
.statue .crown .arrow.arrow-2 {
    top: -17px;
    left: 50%;
    margin-left: -2px
}
.statue .crown .arrow.arrow-2:before,
.statue .crown .arrow.arrow-2:after {
    display: none
}
.statue .crown .arrow.arrow-3 {
    top: -7px;
    right: -8px;
    -webkit-transform: rotate(70deg);
    transform: rotate(70deg)
}
.statue .crown .arrow.arrow-3:before {
    top: 1px;
    right: -8px;
    -webkit-transform: rotate(18deg);
    transform: rotate(18deg)
}
.statue .crown .arrow.arrow-3:after {
    left: -9px;
    -webkit-transform: rotate(-25deg);
    transform: rotate(-25deg)
}
.statue .body {
    width: 30px;
    height: 90px;
    margin: auto;
    background-color: #66cccd;
    border-top-right-radius: 4px;
}
.statue .body:before,
.statue .body:after {
    width: 0;
    bottom: 0;
    height: 0;
    border: 4px solid transparent;
}
.statue .body:before {
    left: -3px;
    border-bottom: 18px solid #66cccd;
}
.statue .body:after {
    right: -3px;
    border-bottom: 24px solid #66cccd;
}
.statue .hands {
    width: inherit;
    height: inherit;
    position: absolute;
}
.statue .hand {
    position: absolute
}
.statue .hand.left {
    top: -45px;
    width: 30px;
    left: -16px;
    height: 52px;
    border: 7px solid #66cccd;
    border-top: none;
    border-right: none;
    border-bottom-left-radius: 35px 45px;
    border-top-left-radius: 5px 30px;
}
.statue .hand.left:before {
    top: -4px;
    z-index: 1;
    left: -8px;
    width: 10px;
    height: 14px;
    box-shadow: 0 0 2px;
    background-color: #66cccd;
    border-top-left-radius: 4px 4px;
    border-top-right-radius: 4px 4px;
    border-bottom-left-radius: 5px 8px;
    border-bottom-right-radius: 5px 8px;
}
.statue .hand.left:after {
    left: -4px;
    z-index: 1;
    width: 18px;
    bottom: -5px;
    height: 14px;
    background-color: #66cccd;
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
}
.statue .hand.right {
    top: 4px;
    z-index: 2;
    width: 15px;
    right: -12px;
    height: 40px;
    background-color: #4b9296;
    -webkit-transform: rotate(35deg);
    transform: rotate(35deg);
}
.statue .hand.right:after {
    top: 12px;
    left: 10px;
    width: 9px;
    height: 13px;
    background-color: #66cccd;
    border-top-left-radius: 4px 4px;
    border-top-right-radius: 4px 4px;
    border-bottom-right-radius: 5px 8px;
}
.statue .torch-glow,
.statue .torch {
    position: absolute;
}
.statue .torch-glow {
    top: -50px;
    left: -38px;
    width: 72px;
    height: 72px;
}
.statue .torch-glow:before,
.statue .torch-glow:after {
    z-index: -1;
    width: inherit;
    height: inherit;
    border-radius: 50%;
    -webkit-animation: torch-glow 2s linear infinite;
    animation: torch-glow 2s linear infinite;
}
.statue .torch-glow:before {
    color: rgb(73, 70, 81);
    background-color: rgba(73, 70, 81, .75);
    background: -webkit-radial-gradient(#444 0, rgba(68, 68, 68, .15) 100%);
    background: radial-gradient(#444 0, rgba(68, 68, 68, .15) 100%);
}
.statue .torch-glow:after {
    top: 50%;
    left: 50%;
    width: 48px;
    height: 48px;
    margin-top: -24px;
    margin-left: -24px;
    color: rgb(99, 84, 63);
    background-color: rgba(99, 84, 63, .75);
    background: -webkit-radial-gradient(#996633 0, rgba(68, 68, 68, .15) 100%);
    background: radial-gradient(#996633 0, rgba(68, 68, 68, .15) 100%);
}
@-webkit-keyframes torch-glow {
    0%, 100% {
        box-shadow: 0 0 20px;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    50% {
        box-shadow: none;
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
}
@keyframes torch-glow {
    0%, 100% {
        box-shadow: 0 0 20px;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    50% {
        box-shadow: none;
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
}
.statue .torch {
    top: -8px;
    left: -5px;
    width: 4px;
    height: 22px;
    background-color: #4b9296;
    border-radius: 0 0 4px 4px;
}
.statue .torch:after {
    top: -5px;
    left: 50%;
    width: 10px;
    height: 5px;
    margin-left: -5px;
    background-color: #4b9296;
    border-radius: 0 0 4px 4px;
}
.statue .torch .flame {
    left: -1px;
    top: -14px;
    width: 8px;
    height: 8px;
    position: absolute;
    border-top-right-radius: 8px 12px;
    border-bottom-left-radius: 12px 8px;
    background-color: #ff9642;
    background: -webkit-linear-gradient(top, #face3a -4px, #ff9642 100%);
    background: linear-gradient(to bottom, #face3a -4px, #ff9642 100%);
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
}
.statue .cloth-wrap {
    height: 100%
}
.statue .cloth-wrap:before,
.statue .cloth-wrap:after {
    background-color: #66cccd;
}
.statue .cloth-wrap:before {
    left: 2px;
    top: -11px;
    width: 20px;
    height: 32px;
    background-color: #66cccd;
    -webkit-transform: rotate(-80deg);
    transform: rotate(-80deg);
}
.statue .cloth-wrap:after {
    right: -4px;
    width: 20px;
    height: 20px;
    background-color: #66cccd;
    -webkit-transform: rotate(-28deg);
    transform: rotate(-28deg);
    border-top-right-radius: 4px;
}
.statue .cloth {
    width: 100%;
    height: 100%;
    position: absolute;
}
.statue .cloth:before,
.statue .cloth:after {
    width: 0;
    height: 0;
    z-index: 1;
}
.statue .cloth.cloth-1:before {
    top: -8px;
    left: -5px;
    width: 4px;
    height: 14px;
    background-color: #46aab3;
    -webkit-transform: rotate(32deg);
    transform: rotate(32deg);
}
.statue .cloth.cloth-1:after {
    top: 2px;
    left: -10px;
    border-radius: 1px;
    border: 8px solid #66cccd;
    border-right: 14px solid transparent;
    border-bottom: 0 solid transparent;
    -webkit-transform: rotate(-70deg) skew(-30deg);
    transform: rotate(-70deg) skew(-30deg);
}
.statue .cloth.cloth-2:before {
    top: -2px;
    left: -2px;
    width: 12px;
    z-index: 0;
    height: 20px;
    background-color: #46aab3;
    -webkit-transform: rotate(-18deg);
    transform: rotate(-18deg);
}
.statue .cloth.cloth-2:after {
    left: 2px;
    width: 15px;
    height: 35px;
    background-color: #66cccd;
    border-bottom-left-radius: 3px 12px;
    -webkit-transform: rotate(58deg) skewX(18deg);
    transform: rotate(58deg) skewX(18deg);
}
.statue .cloth.cloth-3:before {
    top: 24px;
    left: -10px;
    border-radius: 1px;
    border: 8px solid #46aab3;
    border-right: 32px solid transparent;
    border-bottom: 3px solid transparent;
    -webkit-transform: rotate(-52deg) skew(-28deg);
    transform: rotate(-52deg) skew(-28deg);
}
.statue .cloth.cloth-3:after {
    top: 30px;
    left: 8px;
    width: 3px;
    height: 35px;
    background: #46aab3;
    border-top-left-radius: 3px 35px;
    border-bottom-right-radius: 3px 35px;
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
}
.statue .cloth.cloth-4:before {
    top: 20px;
    left: 11px;
    border-radius: 1px;
    border: 7px solid #46aab3;
    border-left: 2px solid transparent;
    border-top: 7px solid transparent;
    border-bottom: 42px solid transparent;
    -webkit-transform: rotate(-14deg) skewX(-26deg);
    transform: rotate(-14deg) skewX(-26deg);
}
.statue .cloth.cloth-4:after {
    left: 3px;
    z-index: 2;
    width: 15px;
    bottom: 14px;
    height: 10px;
    background-color: #66cccd;
    -webkit-transform: rotate(-33deg) skewX(20deg);
    transform: rotate(-33deg) skewX(20deg);
}
.statue .cloth.cloth-5 {
    overflow: hidden
}
.statue .cloth.cloth-5:before {
    width: 24px;
    height: 30px;
    bottom: 1px;
    right: -5px;
    background-color: #46aab3;
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
    background: -webkit-linear-gradient(314deg, #46aab3 0, transparent 100%);
    background: linear-gradient(136deg, #46aab3 0, transparent 100%);
}
.statue .cloth.cloth-6:before {
    right: 2px;
    border: 10px solid transparent;
    border-top: 4px solid #46aab3;
    border-right: 4px solid #46aab3;
    border-top-right-radius: 4px;
}
.statue .cloth.cloth-6:after {
    width: 4px;
    right: -2px;
    height: 30px;
    bottom: 20px;
    background-color: #46aab3;
    border-bottom-right-radius: 4px 5px;
    -webkit-transform: rotate(-4deg);
    transform: rotate(-4deg);
}
.statue .base .top {
    width: 45px;
    height: 45px;
    background: -webkit-linear-gradient(top, #38999d 0, #3f6564 100%);
    background: linear-gradient(to bottom, #38999d 0, #3f6564 100%);
}
.statue .base .top:before,
.statue .base .top:after {
    left: 50%;
    background-color: #66cccd;
}
.statue .base .top:before {
    height: 4px;
    width: 50px;
    margin-left: -25px
}
.statue .base .top:after {
    top: 10px;
    height: 6px;
    width: 54px;
    margin-left: -27px
}
.statue .base .bar.mid,
.statue .base .bar.bot {
    width: 66px;
    height: 8px;
    background-color: #3f6564;
}
.statue .base .bar.bot {
    width: 100px;
}
.rain {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    /*display:none;*/
    
    overflow: hidden;
    position: absolute;
    -webkit-animation: blnk 6s linear infinite;
    animation: blnk 6s linear infinite;
}
.rain i {
    width: 1px;
    height: 30px;
    bottom: 200px;
    position: absolute;
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .6) 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .6) 100%);
    -webkit-animation: fall .63s linear infinite;
    animation: fall .63s linear infinite;
}
@-webkit-keyframes fall {
    to {
        margin-top: 900px
    }
}
@keyframes fall {
    to {
        margin-top: 900px
    }
}
@-webkit-keyframes blnk {
    0%, 95%, 98% {
        background-color: transparent
    }
    96%,
    99%,
    100% {
        background-color: #fff
    }
}
@keyframes blnk {
    0%, 95%, 98% {
        background-color: transparent
    }
    96%,
    99%,
    100% {
        background-color: #fff
    }
}
.toggle:checked ~ .rain {
    z-index: -1;
}
.text-gradient {
    color: #33ffcc;
    background: -webkit-linear-gradient(left, #33ffcc 0, #33ffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}
.general-info {
    right: 0;
    bottom: 0;
    min-width: 180px;
    min-height: 200px;
    position: absolute;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition: all .4s ease-in-out 0s;
    transition: all .4s ease-in-out 0s;
}
.general-info .measure {
    font-size: 36px;
    line-height: 36px;
    font-weight: 400;
}
.general-info .status,
.general-info .current-date {
    font-size: 13px;
    font-weight: 400
}
.general-info .city-name {
    font-size: 24px;
    margin-top: 15px
}
.toggle:checked ~ .box-inner .general-info {
    -webkit-transform: translateX(50px);
    transform: translateX(50px)
}
.content {
    padding: 30px;
}
.content .title {
    font-size: 24px;
    margin-bottom: 8px;
}
.forecast .grd:after,
.content .forecast .grd:before {
    content: '';
    display: table
}
.forecast .grd:after {
    clear: both;
    display: block
}
.forecast .grd {
    margin-left: -5px;
    margin-right: -5px;
}
.forecast .grd>.col {
    float: left;
    padding: 5px;
    width: 16.6666%;
    -webkit-transition: all .4s ease-in-out 0s;
    transition: all .4s ease-in-out 0s;
}
@-webkit-keyframes show-list {
    0% {
        -webkit-transform: translateY(100px);
        transform: translateY(100px);
        opacity: 0
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }
}
@keyframes show-list {
    0% {
        -webkit-transform: translateY(100px);
        transform: translateY(100px);
        opacity: 0
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }
}
.toggle:checked ~ .box-inner .forecast .grd>.col {
    -webkit-animation: show-list 1s linear backwards;
    animation: show-list 1s linear backwards;
    -webkit-animation-delay: .4s;
    animation-delay: .4s
}
.toggle:checked ~ .box-inner .forecast .grd>.col:nth-child(1) {
    -webkit-animation-duration: .3s;
    animation-duration: .3s
}
.toggle:checked ~ .box-inner .forecast .grd>.col:nth-child(2) {
    -webkit-animation-duration: .4s;
    animation-duration: .4s
}
.toggle:checked ~ .box-inner .forecast .grd>.col:nth-child(3) {
    -webkit-animation-duration: .5s;
    animation-duration: .5s
}
.toggle:checked ~ .box-inner .forecast .grd>.col:nth-child(4) {
    -webkit-animation-duration: .6s;
    animation-duration: .6s
}
.toggle:checked ~ .box-inner .forecast .grd>.col:nth-child(5) {
    -webkit-animation-duration: .7s;
    animation-duration: .7s
}
.toggle:checked ~ .box-inner .forecast .grd>.col:nth-child(6) {
    -webkit-animation-duration: .8s;
    animation-duration: .8s
}
.forecast .info {
    padding: 10px;
    cursor: default;
    background-color: rgba(255, 255, 255, .03);
    -webkit-transition: background .2s ease-in-out 0s;
    transition: background .2s ease-in-out 0s;
}
.forecast .grd .info:hover {
    background-color: rgba(255, 255, 255, .08);
}
.forecast .date {
    font-size: 14px;
}
.forecast .ico {
    width: 38px;
    height: 38px;
    font-size: 38px;
    line-height: 38px;
    display: inline-block;
}
.forecast .unit .min,
.forecast .unit .max {
    position: relative;
    margin-right: 8px
}
.forecast .unit .min {
    font-size: 14px
}
.forecast .info .text {
    font-size: 14px;
    margin-top: 5px;
}
.author {
    margin-top: 5px;
    text-align: right;
}
.summary {
    margin-top: 5px;
    -webkit-transition: all .2s ease-in-out 0s;
    transition: all .2s ease-in-out 0s
}
.toggle:checked ~ .box-inner .summary {
    -webkit-animation: flip-inf .2s linear backwards;
    animation: flip-inf .2s linear backwards;
    -webkit-animation-delay: .9s;
    animation-delay: .9s
}
@-webkit-keyframes flip-inf {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}
@keyframes flip-inf {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}
.author {
    margin-top: 10px;
}
.author a {
    color: #fff;
    display: inline-block;
    text-decoration: none;
}
.toggle-switch {
    right: 0;
    z-index: 20;
    width: 50px;
    height: 50px;
    bottom: -50px;
    cursor: pointer;
    position: absolute;
    -webkit-perspective: 200px;
    perspective: 200px;
}
.toggle-switch .tgl-btn {
    width: 50px;
    height: 50px;
    overflow: hidden;
    position: absolute;
    background-color: #80DEEA;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: all .4s ease-in-out 0s;
    transition: all .4s ease-in-out 0s;
    background: -webkit-linear-gradient(60deg, #80DEEA 0, #26C6DA 100%);
    background: linear-gradient(30deg, #80DEEA 0, #26C6DA 100%);
}
.toggle-switch .tgl-btn:hover {
    color: #fff;
    background: -webkit-linear-gradient(60deg, #26C6DA 0, #80DEEA 100%);
    background: linear-gradient(30deg, #26C6DA 0, #80DEEA 100%)
}
.toggle-switch .tgl-btn:after {
    top: 0;
    left: -25px;
    width: 20px;
    height: 100%;
    background-color: rgba(255, 255, 255, .55);
    -webkit-transform: skewX(-15deg);
    transform: skewX(-15deg);
    -webkit-filter: blur(2px);
}
.toggle-switch .tgl-btn.front:after {
    -webkit-animation: shine 2s linear infinite;
    animation: shine 2s linear infinite
}
@-webkit-keyframes shine {
    0%, 90% {
        opacity: 0;
        left: -25px
    }
    100% {
        opacity: 1;
        left: 50px
    }
}
@keyframes shine {
    0%, 90% {
        opacity: 0;
        left: -25px
    }
    100% {
        opacity: 1;
        left: 50px
    }
}
.toggle-switch .ico {
    width: 36px;
    margin: auto;
    height: 36px;
    font-size: 36px;
    line-height: 50px;
}
.toggle-switch .ico>i:before,
.toggle-switch .ico>i:after {
    color: inherit
}
.toggle-switch .dtl-icon {
    width: inherit;
    height: inherit;
    text-align: center;
}
.toggle-switch .dtl-icon>i {
    height: 30px;
    margin-top: 10px;
    position: relative;
    display: inline-block;
    border-left: 1px solid;
}
.toggle-switch .dtl-icon>i:before,
.toggle-switch .dtl-icon>i:after {
    top: -1px;
    height: 15px;
    border: inherit;
}
.toggle-switch .dtl-icon>i:before {
    left: -7px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.toggle-switch .dtl-icon>i:after {
    right: -6px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.toggle-switch .tgl-btn.back,
.toggle:checked ~ .box-inner .toggle-switch .tgl-btn.front {
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg)
}
.toggle:checked ~ .box-inner .toggle-switch .tgl-btn.back {
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg)
}
.toggle:checked ~ .box-inner .toggle-switch .tgl-btn.back:after {
    -webkit-animation: shine 2s linear infinite;
    animation: shine 2s linear infinite
}

HTML

Weather Forecast 含下雨、闪电动画特效。

CSS3, rain

编辑器支持Emmet

快捷键

Weather Forecast 含下雨、闪电动画特效。

CSS3, rain

CSS3 5个天气预报动画式图标

一组使用SVG和CSS3制作的气象（天气预报）动画图标

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：