成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

純CSS實(shí)現(xiàn)動(dòng)態(tài)晴陰雨雪-創(chuàng)新互聯(lián)

1 引言

本期分享一下如何僅用CSS3，實(shí)現(xiàn)單標(biāo)簽的動(dòng)態(tài)晴陰雨雪。技術(shù)關(guān)鍵點(diǎn)就是“單標(biāo)簽”和“純CSS”。先看下最終效果：

成都創(chuàng)新互聯(lián)專注于寧縣網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供寧縣營(yíng)銷型網(wǎng)站建設(shè)，寧縣網(wǎng)站制作、寧縣網(wǎng)頁(yè)設(shè)計(jì)、寧縣網(wǎng)站官網(wǎng)定制、小程序設(shè)計(jì)服務(wù)，打造寧縣網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供寧縣網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。

純CSS實(shí)現(xiàn)動(dòng)態(tài)晴陰雨雪

再看看HTML代碼：

<!--晴-->
<div class="weather sunny"></div>
<!--陰-->
<div class="weather cloudy"></div>
<!--雨-->
<div class="weather rainy"></div>
<!--雪-->
<div class="weather snowy"></div>
復(fù)制代碼

沒錯(cuò)，就是這么任性，每個(gè)動(dòng)圖就一個(gè)標(biāo)簽，而且無圖無JS！下面就來詳細(xì)介紹下技術(shù)實(shí)現(xiàn)。

涉及到的關(guān)鍵CSS3屬性：

  1. transform：用于移位、旋轉(zhuǎn)、縮放效果
  2. box-shadow：利用投影實(shí)現(xiàn)圖像的復(fù)制(關(guān)鍵！)
  3. clip-path：基于繪制的形狀對(duì)元素進(jìn)行遮罩處理
  4. animation：設(shè)置元素的動(dòng)畫

以及實(shí)現(xiàn)單標(biāo)簽最關(guān)鍵的:before、:after偽元素運(yùn)用。

通過本期分享，能學(xué)到什么？

大的一點(diǎn)就是：box-shadow的另類玩法——“影分身”。

下面開始逐個(gè)講解。

2 基礎(chǔ)背景

圖中的藍(lán)塊背景區(qū)域，很基礎(chǔ)了，不用講了。

設(shè)置了區(qū)域的寬高、背景色和圓角效果。

.weather {
    position: relative;
    display: inline-block;
   width: 180px;
    height: 240px;
    background: #23b7e5;
    border-radius: 8px;
}
復(fù)制代碼

3 晴天

晴天圖標(biāo)由兩個(gè)元素組成：太陽(yáng)和內(nèi)六角形陽(yáng)光。

:before、:after 兩個(gè)偽元素可以在元素內(nèi)部分別“添加”一個(gè)元素，正好都利用上了。

3.1 繪制太陽(yáng)

首先，用 :before實(shí)現(xiàn)太陽(yáng)。

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

content用來生成一個(gè)元素。

position、top、left、transform用來實(shí)現(xiàn)中心居中。

box-shadow實(shí)現(xiàn)外發(fā)光效果，這只是box-shadow最基本最常用的使用方式。

純CSS實(shí)現(xiàn)動(dòng)態(tài)晴陰雨雪

3.2 繪制內(nèi)六角形

用 :after實(shí)現(xiàn)內(nèi)六角形。

實(shí)現(xiàn)的關(guān)鍵就是使用遮罩。通過clip-path繪制一個(gè)內(nèi)六角形。這就變成了一個(gè)簡(jiǎn)單的初中幾何問題。
內(nèi)六角形由兩個(gè)等邊三角形拼合而成。

純CSS實(shí)現(xiàn)動(dòng)態(tài)晴陰雨雪

合并之后，我們可以把整體劃分為若干個(gè)完全相同的小等邊三角形。

純CSS實(shí)現(xiàn)動(dòng)態(tài)晴陰雨雪

在垂直方向做個(gè)輔助線，連接中間頂部和底部?jī)牲c(diǎn)。不難發(fā)現(xiàn)，“垂直方向的大長(zhǎng)度”要大于“水平方向的大長(zhǎng)度”。

純CSS實(shí)現(xiàn)動(dòng)態(tài)晴陰雨雪

設(shè)小等邊三角形的邊長(zhǎng)為1，以內(nèi)六角形中心為坐標(biāo)原點(diǎn)，可以計(jì)算出每個(gè)點(diǎn)的坐標(biāo)，如下：

純CSS實(shí)現(xiàn)動(dòng)態(tài)晴陰雨雪

為了使用clip-path的百分比定位來繪制圖像，下一步需要把長(zhǎng)度坐標(biāo)轉(zhuǎn)換為百分比坐標(biāo)。

設(shè)垂直方向大長(zhǎng)度為100%，仍以內(nèi)六角形中心為坐標(biāo)原點(diǎn)，每個(gè)點(diǎn)的坐標(biāo)值轉(zhuǎn)換如下：

純CSS實(shí)現(xiàn)動(dòng)態(tài)晴陰雨雪

由于clip-path繪制原點(diǎn)是在左上角，x軸右側(cè)為正值，y軸下方為正值。需要做下坐標(biāo)系轉(zhuǎn)換。即：

新x軸坐標(biāo)值 = 舊x軸坐標(biāo)值 + 50%
新y軸坐標(biāo)值 = (舊y軸坐標(biāo)值 - 50%) * -1

純CSS實(shí)現(xiàn)動(dòng)態(tài)晴陰雨雪

使用clip-path的polygon方法繪制內(nèi)六角形，坐標(biāo)已通過上面的步驟計(jì)算出來了。

樣式代碼如下：

.sunny:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -45px 0 0 -45px; 
   width: 90px;
    height: 90px;
    background: #FFEB3B;
    clip-path: polygon(
        50% 0%,
        64.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);
    }
}
復(fù)制代碼

※注：safari需要將clip-path改為-webkit-clip-path。由于代碼太占篇幅，這里就不重復(fù)寫兩遍了。

純CSS實(shí)現(xiàn)動(dòng)態(tài)晴陰雨雪

<figcaption></figcaption>

實(shí)現(xiàn)原理就是通過clip-path繪制了一個(gè)內(nèi)六角形遮罩，把黃顏色背景通過遮罩變成了最終的內(nèi)六角形。

animation通過關(guān)鍵幀動(dòng)畫實(shí)現(xiàn)了“放大縮小”交替動(dòng)效。

最終效果：

純CSS實(shí)現(xiàn)動(dòng)態(tài)晴陰雨雪

4 陰天

觀察圖形發(fā)現(xiàn)，有兩個(gè)云朵：前面的白云和后面的烏云。貌似需要分別用 :before和 :after實(shí)現(xiàn)。如果這樣做的話，后續(xù)章節(jié)的雨天和雪天的雨雪元素就沒有多余的偽元素可用了。所以只能用一個(gè)偽元素實(shí)現(xiàn)兩朵云。 這里就用到了box-shadow的“影分身”了！

由于后續(xù)章節(jié)的雨天和雪天都復(fù)用了云的樣式，所以寫在一起了，代碼如下：

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

純CSS實(shí)現(xiàn)動(dòng)態(tài)晴陰雨雪

真實(shí)的元素（真身）就是一個(gè)圓。通過box-shodow來把投影作為“分身”。

先來看看box-shadow的屬性：

box-shadow: h-shadow v-shadow blur spread color inset;
參數(shù)詳解：
h-shadow: 陰影的水平偏移量。
v-shadow: 陰影的垂直偏移量。
blur: 模糊距離(就是漸變的距離，設(shè)為0就沒有漸變)。
spread: 投影的尺寸，通過這個(gè)控制“影分身”的大小。
color: 投影顏色，通過這個(gè)實(shí)現(xiàn)后方的烏云。
inset: 改為內(nèi)陰影。這里用不到。

先復(fù)制一個(gè)影分身試試：

box-shadow: #fff 22px -15px 0 6px;
復(fù)制代碼

純CSS實(shí)現(xiàn)動(dòng)態(tài)晴陰雨雪

繼續(xù)復(fù)制多個(gè)影分身，帶全部影分身的完整代碼如下：

.cloudy:before,
.rainy:before,
.snowy:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 25%;
    transform: translate(-50%, -50%);
   width: 36px;
    height: 36px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 
        #fff 22px -15px 0 6px,
        #fff 57px -6px 0 2px, 
        #fff 87px 4px 0 -4px,
        #fff 33px 6px 0 6px,
        #fff 61px 6px 0 2px,
        #ccc 29px -23px 0 6px,
        #ccc 64px -14px 0 2px,
        #ccc 94px -4px 0 -4px;
    z-index: 2;
}
復(fù)制代碼

五個(gè)分身的白圓（#fff）,三個(gè)分身的灰圓（#ccc）拼成了兩朵云。

再給云朵加上“上下浮動(dòng)”的動(dòng)效：

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

復(fù)制代碼

純CSS實(shí)現(xiàn)動(dòng)態(tài)晴陰雨雪

5 雨天

云朵的代碼直接復(fù)用第4章的陰天。這里使用 :after 偽元素實(shí)現(xiàn)雨滴。

先實(shí)現(xiàn)一個(gè)雨滴（為方便觀看，暫時(shí)隱藏云朵）：

.rainy:after {
    content: "";
    position: absolute;
    top:50%;
    left: 25%;
   width: 4px;
    height: 14px;
    background: #fff;
    border-radius: 2px;
}
復(fù)制代碼

純CSS實(shí)現(xiàn)動(dòng)態(tài)晴陰雨雪

然后通過box-shadow“影分身”：

.rainy:after {
        content: "";
        position: absolute;
        top:50%;
        left: 25%;
       width: 4px;
        height: 14px;
        background: #fff;
        border-radius: 2px;
+       box-shadow:
+           #fff 25px -10px 0,
+           #fff 50px 0 0,
+           #fff 75px -10px 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;
    }
復(fù)制代碼

純CSS實(shí)現(xiàn)動(dòng)態(tài)晴陰雨雪

再加入下雨的移動(dòng)動(dòng)效，修改如下：

.rainy:after {
        ...(略)
+        animation: rainDrop 2s linear infinite; 
    }
+   @keyframes rainDrop {
+       0% {
+           transform: translate(0, 0) rotate(10deg);
+       }
+       100% {
+           transform: translate(-4px, 24px) rotate(10deg);
+           box-shadow:
+           #fff 25px -10px 0,
+           #fff 50px 0 0,
+           #fff 75px -10px 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;
+       }
+   }
復(fù)制代碼

純CSS實(shí)現(xiàn)動(dòng)態(tài)晴陰雨雪

動(dòng)畫添加了10度的旋轉(zhuǎn)，讓雨滴傾斜，以及垂直方向的移動(dòng)。

這里的關(guān)鍵就是：雖然本質(zhì)是垂直移動(dòng)，但為了看上去是“循環(huán)”效果，需要將最下面的雨滴進(jìn)行透明漸變，同時(shí)調(diào)節(jié)X和Y軸的值，讓最終位置正好跟初始位置重合，就不會(huì)顯得“斷開”。

我們生成的是三行雨滴，第一行被云朵擋住了，實(shí)際能看到的是下面兩行。在第一行移動(dòng)到第二行位置的時(shí)候，原第三行已經(jīng)透明看不見了，正好與初始狀態(tài)一樣，實(shí)現(xiàn)了無縫循環(huán)拼接。

6 雪天

雪天與雨天的區(qū)別就是把雨滴換成圓形，取消旋轉(zhuǎn)角度。 代碼如下：

.snowy:after {
    content: "";
    position: absolute;
    top:50%;
    left: 25%;
   width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    box-shadow:
        #fff 25px -10px 0,
        #fff 50px 0 0,
        #fff 75px -10px 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 -10px 0,
        #fff 50px 0 0,
        #fff 75px -10px 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;
    }
}
復(fù)制代碼

純CSS實(shí)現(xiàn)動(dòng)態(tài)晴陰雨雪

7 全部源碼

源碼如下，方便粘貼保存為html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>單標(biāo)簽！純CSS實(shí)現(xiàn)動(dòng)態(tài)晴陰雨雪</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(-50%, -50%);
   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: -45px 0 0 -45px; 
   width: 90px;
    height: 90px;
    background: #FFEB3B;
    clip-path: polygon(
        50% 0%,
        64.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(-50%, -50%);
   width: 36px;
    height: 36px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 
        #fff 22px -15px 0 6px,
        #fff 57px -6px 0 2px, 
        #fff 87px 4px 0 -4px,
        #fff 33px 6px 0 6px,
        #fff 61px 6px 0 2px,
        #ccc 29px -23px 0 6px,
        #ccc 64px -14px 0 2px,
        #ccc 94px -4px 0 -4px;
    z-index: 2;
}
.cloudy:before {
    animation: cloudMove 2s linear infinite;
}
@keyframes cloudMove {
    0% {
        transform: translate(-50%, -50%);
    }
    50% {
        transform: translate(-50%, -60%);
    }
    100% {
        transform: translate(-50%, -50%);
    }
}
.rainy:after {
    content: "";
    position: absolute;
    top:50%;
    left: 25%;
   width: 4px;
    height: 14px;
    background: #fff;
    border-radius: 2px;
    box-shadow:
        #fff 25px -10px 0,
        #fff 50px 0 0,
        #fff 75px -10px 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(-4px, 24px) rotate(10deg);
        box-shadow:
        #fff 25px -10px 0,
        #fff 50px 0 0,
        #fff 75px -10px 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 -10px 0,
        #fff 50px 0 0,
        #fff 75px -10px 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 -10px 0,
        #fff 50px 0 0,
        #fff 75px -10px 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>
復(fù)制代碼

純CSS實(shí)現(xiàn)動(dòng)態(tài)晴陰雨雪

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

當(dāng)前題目：純CSS實(shí)現(xiàn)動(dòng)態(tài)晴陰雨雪-創(chuàng)新互聯(lián)
文章源于：http://jinyejixie.com/article40/dchiho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、商城網(wǎng)站、定制網(wǎng)站、響應(yīng)式網(wǎng)站、網(wǎng)站排名、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站建設(shè)網(wǎng)站維護(hù)公司
新民市| 汉川市| 襄城县| 兴隆县| 砚山县| 隆昌县| 安国市| 东港市| 静海县| 盐山县| 松潘县| 偏关县| 剑川县| 大丰市| 元氏县| 嘉禾县| 桃园市| 高青县| 汨罗市| 温泉县| 房山区| 万宁市| 历史| 建宁县| 门头沟区| 名山县| 澄城县| 天峻县| 鹿泉市| 永济市| 建平县| 阿鲁科尔沁旗| 玉龙| 罗江县| 绿春县| 濮阳市| 枣庄市| 兴城市| 平安县| 德安县| 土默特右旗|