簡(jiǎn)介

層疊樣式表(英文全稱(chēng)：Cascading Style Sheets)是一種用來(lái)表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語(yǔ)言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁(yè)，還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化。CSS 能夠?qū)W(wǎng)頁(yè)中元素位置的排版進(jìn)行像素級(jí)精確控制，支持幾乎所有的字體字號(hào)樣式，擁有對(duì)網(wǎng)頁(yè)對(duì)象和模型樣式編輯的能力。

創(chuàng)新互聯(lián)主營(yíng)田陽(yáng)網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,app軟件開(kāi)發(fā),田陽(yáng)h5小程序設(shè)計(jì)搭建,田陽(yáng)網(wǎng)站營(yíng)銷(xiāo)推廣歡迎田陽(yáng)等地區(qū)企業(yè)咨詢(xún)

效果

效果圖如下

實(shí)現(xiàn)思路

1. div實(shí)現(xiàn)太陽(yáng)的一條矩形光影
2. before偽元素制作另一條光影矩形，和已有的轉(zhuǎn)變90°
3. after偽元素畫(huà)個(gè)圓實(shí)現(xiàn)太陽(yáng)樣式

dom結(jié)構(gòu)

用兩個(gè)嵌套的div容器，父容器來(lái)控制圖標(biāo)顯示的位置，子容器用來(lái)寫(xiě)太陽(yáng)的一條光影矩形的樣式。

   



專(zhuān)門(mén)建立的學(xué)習(xí)Q-q-u-n ⑦⑧④-⑦⑧③-零①②  分享學(xué)習(xí)方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)技巧（從零基礎(chǔ)開(kāi)始到前端項(xiàng)目實(shí)戰(zhàn)教程，學(xué)習(xí)工具，全棧開(kāi)發(fā)學(xué)習(xí)路線(xiàn)以及規(guī)劃）

css樣式

1、定義父容器樣式，控制圖標(biāo)位置，順便給整個(gè)頁(yè)面加個(gè)背景色，方便預(yù)覽

body{
   background: rgba(73, 74, 95, 1);
}

.container{
   width: 170px;
   height: 170px;
   position: relative;
   margin: 250px auto;
}

2、光影矩形樣式，有一個(gè)360°旋轉(zhuǎn)的動(dòng)畫(huà)

.sunny{
   width: 20px;
   height: 140px;
   position: absolute;
   top: 20px;
   left: 90px;
   background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
   animation: sunny 15s linear infinite;
}

@keyframes sunny {
   0%{
     transform: rotate(0deg);
   }
   100%{
     transform: rotate(360deg);
   }
}

3、寫(xiě)另一條垂直的光影矩形

.sunny::before{
   content: '';
   width: 20px;
   height: 140px;
   position: absolute;
   bottom: 0;
   left: 0;
   background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
   transform: rotate(90deg)
}

4、太陽(yáng)圓圈的樣式

.sunny::after{
   content: '';
   width: 80px;
   height: 80px;
   position: absolute;
   top: 30px;
   left: -30px;
   background: #ffee44;
   border-radius: 50%;
   box-shadow: rgba(255,255,0,0.2) 0 0 0 15px;
}

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

本文名稱(chēng)：css制作天氣圖標(biāo)-創(chuàng)新互聯(lián)
網(wǎng)頁(yè)路徑：http://weahome.cn/article/phsps.html