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

最新推荐文章于 2023-05-21 23:02:32 发布
最新推荐文章于 2023-05-21 23:02:32 发布
阅读量555 收藏 1
点赞数
文章标签： js css 动画

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


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



参考文献

本文主要来源以下文章：

magicCss

CSS Secrets

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

weixin_39204527
关注
【Web前端面试】葵花宝典（2022版本）—— CSS篇
qq_49002903的博客
06-08 4692
你还在担心面试不过嘛？面试题找不到，小编特意整理了30+道高频前端面试题，送给大家，希望大家都能顺利通过面试，拿下高薪，也可持续关注本面试题专栏。本篇文章主要写的是面试题中的CSS篇，之后会更新前端其他方面相关面试题。.....................
html中怎么写一个天气预报,纯CSS实现天气预报
weixin_34379309的博客
06-03 2239
CSS实现天气.weather{position: relative;display: inline-block;width: 180px;height: 240px;background: #23b7e5;border-radius: 8px;}.sunny:before{content: "";position: absolute;top: 50%;left: 50%;transform: t...
Weather-forecast:用Javascript，HTML和CSS进行天气预报
05-12
天气预报 用Javascript，HTML和CSS进行天气预报。
天气预报鼠标css,6个纯CSS3实现的天气预报动画图标
weixin_31993501的博客
08-03 253
CSS语言：CSSSCSS确定html {box-sizing: border-box;}html *,html *:before,html *:after {box-sizing: inherit;}body {max-width: 42rem;padding: 2rem;margin: 0 auto;color: #161616;font-family: 'Roboto', sans-seri...
天气预报鼠标css,CSS3 5个天气预报动画式图标
weixin_35719518的博客
08-03 284
CSS语言：CSSSCSS确定@import url('https://fonts.googleapis.com/css?family=Work+Sans:200');:root {--shadow: #fd6f21;--ring: currentColor;--blend1: #fc5830;--blend2: #f98c24;--blend-from: 0%;--blend-to: 100%;...
使用表格和 CSS 设计天气预报样式
qq_44078323的博客
04-26 2349
使用表格和 CSS 设计天气预报样式 一、实验题目：使用表格和 CSS 设计天气预报样式 二、实验内容：设计如下图所示的天气预报样式，可适当加入其他元素 三、实验步骤：写明实验具体内容及步骤、源代码、实验结果等（附截图） 四、实验总结：实验中遇到的问题、思考与总结等 源代码： <!DOCTYPE html> <html> <head> <meta charset=utf-8" /> <title>天气预报</title> &l
CSS3天气预报动画图标
08-23
今天我们要来分享一款很不错的CSS3天气预报动画图标，图标表示了晴、多云、阴、雨、雷阵雨、雪这6种天气情况，并且每一个图标都带有动画，非常生动地描述了当前的天气状况。关于天气预报，也可以看看这款纯CSS3天气动画图标。
前端学习（二）——css3学习
08-09
前端学习（二）——css3学习
CSS3——CSS3动画(animation)及应用
流楚丶格念的博客
07-15 4860
改革春风吹满地动画(CSS3) animation案例1：太阳系的运作案例2：图片播放标题 动画(CSS3) animation 动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。 语法格式： animation:动画名称 花费时间 运动曲线 何时开始 播放次数 是否反方向; 关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意r @keyframes 动画名称 { from{ 开始位置 } 0% to{ 结束 }
Web编程基础——CSS、JavaScript、jQuery
07-22
资源名称：Web编程基础——CSS、JavaScript、jQuery 资源截图： 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
天气预报代码各种样式
05-06
各种天气预报的样式jsp和html啊啊啊啊啊
CSS3天气预报APP应用UI界面
04-25
CSS3天气预报APP应用UI界面是一款可以显示当日天气详情和未来几天的天气预报，带降水量、湿度、风速和本地位置效果。
天气+地位+日期+时间html页面
09-04
本页面为html文件，使用了js+css+html，定时器，实现了天气+城市+日期+时间功能。实验好用，
天气预报前端
05-21
微信小程序，前端，天气预报小程序，学习使用，请勿使用在工程上
利用CSS3实现天气图标
qq_24698097的博客
04-26 832
本文利用CSS3实现天气的图标，包括晴天，多云，雨天，下雪，打雷，采用了CSS3中的box-shadow，动画特效采用animation。其中主要采用box-shaow属性，感觉这个属性功能还挺强，详细说明见链接：https://www.runoob.com/cssref/css3-pr-box-shadow.html 直接上代码，整体代码比较简单，如何使用的话需要微调位置，这个比较麻烦。整体效果如下所示： 首先HTML代码 <div class="weather">
天气预报鼠标css,5个纯CSS实现的天气预报动画图标
weixin_29291863的博客
08-03 382
CSS语言：CSSSCSS确定@import url('https://fonts.googleapis.com/css?family=Raleway');body {background: #fff;}div {width: 130px;height: 130px;border-radius: 40%;z-index: 120;}h1 {font-family: 'Raleway', sans-...
HTML、CSS和JavaScript实现简单天气预报
最新发布
m0_63359528的博客
05-21 5679
首先需要获取天气API的数据，可以通过向第三方天气数据服务商发送HTTP请求来获取数据。上面的代码中，先定义了要获取天气数据的城市和API Key，在JavaScript中使用fetch方法发送HTTP请求，获取数据后再使用DOM操作将数据渲染到HTML页面上对应的元素中。接着，将获取到的天气数据动态地展示在HTML页面上。可以使用JavaScript的DOM操作方法，将获取到的数据渲染到页面上指定的位置。最后，为了美化界面，可以使用CSS对整个天气预报页面进行样式设置。
css3制作天气预报icons
Smile_Lee00的博客
08-21 729
在codepen上看到的用css3制作的天气预报icons觉得很不错，偷过来分享下~ html> html> head lang="en"> meta charset="UTF-8"> title>title> style> html { box-sizing: border-box; } html *, html *:
【小练习03】CSS-表格（table）--天气预报
Java仗剑走天涯
05-12 1319
【小练习03】CSS-表格（table）--天气预报
CSS大师指南：第二版——最新CSS3技术和实战案例
"《精通CSS：高级Web标准解决方案(第2版)》是由Andy Budd、Simon Collison和Cameron Moll合著的一本权威指南，它专注于高级CSS技术，旨在帮助Web设计师和开发者理解和掌握Web标准。该书自第一版畅销后，经过更新，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值