应用纯CSS完成动态性晴阴雨雪(单标识)

日期:2021-01-20 类型:科技新闻 

关键词:快速建站,网站建设系统,免费网页建站,网站免费建设,建站系统

本期共享1下怎样仅用CSS3,完成单标识的动态性晴阴雨雪。技术性重要点便是“单标识”和“纯CSS”。先看下最后实际效果:

再看看HTML编码:

<!--晴-->
<div class="weather sunny"></div>
<!--阴-->
<div class="weather cloudy"></div>
<!--雨-->
<div class="weather rainy"></div>
<!--雪-->
<div class="weather snowy"></div>

没错,便是这么骄纵,每一个动图就1个标识,并且无图无JS!下面就来详尽详细介绍下技术性完成。

涉及到到的重要CSS3特性:

transform:用于移位、转动、放缩实际效果
box-shadow:运用投射完成图象的拷贝(重要!)
clip-path:根据绘图的样子对元素开展遮罩解决
animation:设定元素的动漫
 

和完成单标识最重要的:before、:after伪类应用。

根据本期共享,能学到甚么?

最大的1点便是:box-shadow的另类游戏玩法——“影分身术”。

下面刚开始逐一解读。

2 基本情况

图中的蓝块情况地区,很基本了,无需讲了。

设定了地区的宽高、情况色和圆角实际效果。

.weather {
    position: relative;
    display: inline-block;
    width: 180px;
    height: 240px;
    background: #23b7e5;
    border-radius: 8px;
}

3 晴天

晴天标志由两个元素构成:太阳和内6角形阳光。

:before、:after 两个伪类能够在元素內部各自“加上”1个元素,恰好都运用到了。

3.1 绘图太阳

最先,用 :before完成太阳。

.sunny:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(⑸0%, ⑸0%);
    width: 60px;
    height: 60px;
    background: #F6D963;
    border-radius: 50%;
    box-shadow: 0 0 20px #ff0;
    z-index: 2;
}

content用来转化成1个元素。

position、top、left、transform用来完成管理中心垂直居中。

box-shadow完成外发光实际效果,这只是box-shadow最基础最常见的应用方法。

3.2 绘图内6角形

用 :after完成内6角形。

完成的重要便是应用遮罩。根据clip-path绘图1个内6角形。这就变为了1个简易的中学几何图形难题。

内6角形由两个等边3角形拼合而成。


 

合拼以后,大家能够把总体区划为若干个彻底同样的小等边3角形。


 

在竖直方位做个輔助线,联接正中间顶部和底部两点。不难发现,“竖直方位的最大长度”要超过“水平方位的最大长度”。


 

设小等边3角形的边长为1,之内6角形管理中心为座标原点,能够测算出每一个点的座标,以下:


 

以便应用clip-path的百分比精准定位来绘图图象,下1步必须把长度座标变换为百分比座标。

设竖直方位最大长度为100%,仍之内6角形管理中心为座标原点,每一个点的座标值变换以下:


 

因为clip-path绘图原点是在左上角,x轴右边为恰逢,y轴正下方为恰逢。必须做下座标系变换。即:

新x轴座标值 = 旧x轴座标值 + 50%

新y轴座标值 = (旧y轴座标值 - 50%) * ⑴


 

应用clip-path的polygon方式绘图内6角形,座标已根据上面的流程测算出来了。

款式编码以下:

.sunny:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    margin: ⑷5px 0 0 ⑷5px; 
    width: 90px;
    height: 90px;
    background: #FFEB3B;
    clip-path: polygon(
     50% 0%,
        65.43% 25%,
        93.3% 25%,
        78.87% 50%,
        93.3% 75%,
        64.43% 75%,
        50% 100%,
        35.57% 75%,
        6.7% 75%,
        21.13% 50%,
        6.7% 25%,
        35.57% 25%);
    z-index: 1;
    animation: sunScale 2s linear infinite;
}
@keyframes sunScale {
    0% {
        transform: scale(1);
    }
    50% {
     transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

 


 

完成基本原理便是根据clip-path绘图了1个内6角形遮罩,把黄色调情况根据遮罩变为了最后的个内6角形。

animation根据重要帧动漫完成了“变大变小”更替动效。

最后实际效果:

4 阴天

观查图型发现,有两个云朵:前面的蓝天和后边的乌云。貌似必须各自用 :before和 :after完成。假如这样做的话,后续章节的雨天宇雪天的雨雪元素就沒有过剩的伪类能用了。因此只能用1个伪类完成两朵云。 这里就用到了box-shadow的“影分身术”了!

因为后续章节的雨天宇雪天都复用了云的款式,因此写在1起了,编码以下:

 

.cloudy:before,
.rainy:before,
.snowy:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 25%;
    transform: translate(⑸0%, ⑸0%);
    width: 36px;
    height: 36px;
    background: #fff;
    border-radius: 50%;
    z-index: 2;
}


 

真正的元素(真身)便是1个圆。根据box-shodow来把投射做为“分身术”。

先看来看box-shadow的特性:

box-shadow: h-shadow v-shadow blur spread color inset;

主要参数详解:

h-shadow: 黑影的水平偏位量。

v-shadow: 黑影的竖直偏位量。

blur: 模糊不清间距(便是渐变色的间距,设为0就沒有渐变色)。

spread: 投射的规格,根据这个操纵“影分身术”的尺寸。

color: 投射色调,根据这个完成后方的乌云。

inset: 改成内黑影。这里用不到。

先拷贝1个影分身术试试:

box-shadow: #fff 22px ⑴5px 0 6px;


 

再次拷贝好几个影分身术,带所有影分身术的详细编码以下:

.cloudy:before,
.rainy:before,
.snowy:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 25%;
    transform: translate(⑸0%, ⑸0%);
    width: 36px;
    height: 36px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 
     #fff 22px ⑴5px 0 6px,
     #fff 57px ⑹px 0 2px, 
     #fff 87px 4px 0 ⑷px,
     #fff 33px 6px 0 6px,
     #fff 61px 6px 0 2px,
     #ccc 29px ⑵3px 0 6px,
     #ccc 64px ⑴4px 0 2px,
     #ccc 94px ⑷px 0 ⑷px;
    z-index: 2;
}

 

5个分身术的白圆(#fff),3个分身术的灰圆(#ccc)拼变成两朵云。

再给云朵再加“左右波动”的动效:

 

.cloudy:before {
    animation: cloudMove 2s linear infinite;
}
@keyframes cloudMove {
    0% {
        transform: translate(⑸0%, ⑸0%);
    }
    50% {
        transform: translate(⑸0%, ⑹0%);
    }
    100% {
        transform: translate(⑸0%, ⑸0%);
    }
}

 

5 雨天

云朵的编码立即复用第4章的阴天。这里应用 :after 伪类完成雨滴。

先完成1个雨滴(为便捷收看,临时掩藏云朵):

 

.rainy:after {
 content: "";
    position: absolute;
    top:50%;
    left: 25%;
    width: 4px;
    height: 14px;
    background: #fff;
    border-radius: 2px;
}


 

随后根据box-shadow“影分身术”:

 

.rainy:after {
     content: "";
        position: absolute;
        top:50%;
        left: 25%;
        width: 4px;
        height: 14px;
        background: #fff;
        border-radius: 2px;
+       box-shadow:
+         #fff 25px ⑴0px 0,
+         #fff 50px 0 0,
+         #fff 75px ⑴0px 0,
+         #fff 0 25px 0,
+         #fff 25px 15px 0,
+         #fff 50px 25px 0,
+         #fff 75px 15px 0,
+         #fff 0 50px 0,
+         #fff 25px 40px 0,
+         #fff 50px 50px 0,
+         #fff 75px 40px 0;
    }

 


 

再添加下雨的挪动动效,改动以下:

 

.rainy:after {
        ...(略)
+        animation: rainDrop 2s linear infinite; 
    }
+   @keyframes rainDrop {
+       0% {
+           transform: translate(0, 0) rotate(10deg);
+       }
+       100% {
+           transform: translate(⑷px, 24px) rotate(10deg);
+           box-shadow:
+           #fff 25px ⑴0px 0,
+           #fff 50px 0 0,
+           #fff 75px ⑴0px 0,
+           #fff 0 25px 0,
+           #fff 25px 15px 0,
+           #fff 50px 25px 0,
+           #fff 75px 15px 0,
+           rgba(255, 255, 255, 0) 0 50px 0,
+           rgba(255, 255, 255, 0) 25px 40px 0,
+           rgba(255, 255, 255, 0) 50px 50px 0,
+           rgba(255, 255, 255, 0) 75px 40px 0;
+       }
+   }

 


 

动漫加上了10度的转动,让雨滴歪斜,和竖直方位的挪动。

这里的重要便是:尽管实质是竖直挪动,但以便看上去是“循环系统”实际效果,必须将最下面的雨滴开展全透明渐变色,另外调整X和Y轴的值,让最后部位恰好跟原始部位重叠,就不容易显得“断掉”。

大家转化成的是3行雨滴,第1行被云朵挡住了,具体能看到的是下面两行。在第1行挪动到第2行部位的情况下,原第3行早已全透明看看不到了,恰好与原始情况1样,完成了无缝拼接循环系统拼接。

6 雪天

雪天与雨天的差别便是把雨滴换为圆形,撤销转动角度。 编码以下:

 

.snowy:after {
    content: "";
    position: absolute;
    top:50%;
    left: 25%;
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    box-shadow:
        #fff 25px ⑴0px 0,
        #fff 50px 0 0,
        #fff 75px ⑴0px 0,
        #fff 0 25px 0,
        #fff 25px 15px 0,
        #fff 50px 25px 0,
        #fff 75px 15px 0,
        #fff 0 50px 0,
        #fff 25px 40px 0,
        #fff 50px 50px 0,
        #fff 75px 40px 0;
    animation: snowDrop 2s linear infinite; 
}
@keyframes snowDrop {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(25px);
        box-shadow:
        #fff 25px ⑴0px 0,
        #fff 50px 0 0,
        #fff 75px ⑴0px 0,
        #fff 0 25px 0,
        #fff 25px 15px 0,
        #fff 50px 25px 0,
        #fff 75px 15px 0,
        rgba(255, 255, 255, 0) 0 50px 0,
        rgba(255, 255, 255, 0) 25px 40px 0,
        rgba(255, 255, 255, 0) 50px 50px 0,
        rgba(255, 255, 255, 0) 75px 40px 0;
    }
}

 

7 所有源代码

源代码以下,便捷粘贴储存为html:

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <title单标识!纯CSS完成动态性晴阴雨雪</title>
</head>

<body>
    <div class="weather sunny"></div>
    <div class="weather cloudy"></div>
    <div class="weather rainy"></div>
    <div class="weather snowy"></div>
</body>
<style>
.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: translate(⑸0%, ⑸0%);
    width: 60px;
    height: 60px;
    background: #F6D963;
    border-radius: 50%;
    box-shadow: 0 0 20px #ff0;
    z-index: 2;
}
.sunny:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    margin: ⑷5px 0 0 ⑷5px; 
    width: 90px;
    height: 90px;
    background: #FFEB3B;
    clip-path: polygon(
     50% 0%,
        65.43% 25%,
        93.3% 25%,
        78.87% 50%,
        93.3% 75%,
        64.43% 75%,
        50% 100%,
        35.57% 75%,
        6.7% 75%,
        21.13% 50%,
        6.7% 25%,
        35.57% 25%);
    z-index: 1;
    animation: sunScale 2s linear infinite;
}
@keyframes sunScale {
    0% {
        transform: scale(1);
    }
    50% {
     transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}
.cloudy:before,
.rainy:before,
.snowy:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 25%;
    transform: translate(⑸0%, ⑸0%);
    width: 36px;
    height: 36px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 
     #fff 22px ⑴5px 0 6px,
     #fff 57px ⑹px 0 2px, 
     #fff 87px 4px 0 ⑷px,
     #fff 33px 6px 0 6px,
     #fff 61px 6px 0 2px,
     #ccc 29px ⑵3px 0 6px,
     #ccc 64px ⑴4px 0 2px,
     #ccc 94px ⑷px 0 ⑷px;
    z-index: 2;
}
.cloudy:before {
    animation: cloudMove 2s linear infinite;
}
@keyframes cloudMove {
    0% {
        transform: translate(⑸0%, ⑸0%);
    }
    50% {
        transform: translate(⑸0%, ⑹0%);
    }
    100% {
        transform: translate(⑸0%, ⑸0%);
    }
}
.rainy:after {
 content: "";
    position: absolute;
    top:50%;
    left: 25%;
    width: 4px;
    height: 14px;
    background: #fff;
    border-radius: 2px;
    box-shadow:
     #fff 25px ⑴0px 0,
     #fff 50px 0 0,
     #fff 75px ⑴0px 0,
     #fff 0 25px 0,
     #fff 25px 15px 0,
     #fff 50px 25px 0,
     #fff 75px 15px 0,
     #fff 0 50px 0,
     #fff 25px 40px 0,
     #fff 50px 50px 0,
     #fff 75px 40px 0;
    animation: rainDrop 2s linear infinite; 
}
@keyframes rainDrop {
    0% {
        transform: translate(0, 0) rotate(10deg);
    }
    100% {
        transform: translate(⑷px, 24px) rotate(10deg);
        box-shadow:
        #fff 25px ⑴0px 0,
        #fff 50px 0 0,
        #fff 75px ⑴0px 0,
        #fff 0 25px 0,
        #fff 25px 15px 0,
        #fff 50px 25px 0,
        #fff 75px 15px 0,
        rgba(255, 255, 255, 0) 0 50px 0,
        rgba(255, 255, 255, 0) 25px 40px 0,
        rgba(255, 255, 255, 0) 50px 50px 0,
        rgba(255, 255, 255, 0) 75px 40px 0;
    }
}
.snowy:after {
    content: "";
    position: absolute;
    top:50%;
    left: 25%;
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    box-shadow:
        #fff 25px ⑴0px 0,
        #fff 50px 0 0,
        #fff 75px ⑴0px 0,
        #fff 0 25px 0,
        #fff 25px 15px 0,
        #fff 50px 25px 0,
        #fff 75px 15px 0,
        #fff 0 50px 0,
        #fff 25px 40px 0,
        #fff 50px 50px 0,
        #fff 75px 40px 0;
    animation: snowDrop 2s linear infinite; 
}
@keyframes snowDrop {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(25px);
        box-shadow:
        #fff 25px ⑴0px 0,
        #fff 50px 0 0,
        #fff 75px ⑴0px 0,
        #fff 0 25px 0,
        #fff 25px 15px 0,
        #fff 50px 25px 0,
        #fff 75px 15px 0,
        rgba(255, 255, 255, 0) 0 50px 0,
        rgba(255, 255, 255, 0) 25px 40px 0,
        rgba(255, 255, 255, 0) 50px 50px 0,
        rgba(255, 255, 255, 0) 75px 40px 0;
    }
}
</style>
</html>

 

总结

以上所述是网编给大伙儿详细介绍的应用纯CSS完成动态性晴阴雨雪(单标识),期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!
假如你感觉本文对你有协助,欢迎转载,烦请注明出处,感谢!

上一篇:纯css完成选定切换实际效果的示例 返回下一篇:没有了