效果圖如下
成都創(chuàng)新互聯(lián)始終堅(jiān)持【策劃先行,效果至上】的經(jīng)營理念,通過多達(dá)十載累計(jì)超上千家客戶的網(wǎng)站建設(shè)總結(jié)了一套系統(tǒng)有效的全網(wǎng)營銷推廣解決方案,現(xiàn)已廣泛運(yùn)用于各行各業(yè)的客戶,其中包括:成都陽臺(tái)護(hù)欄等企業(yè),備受客戶贊許。
用兩個(gè)嵌套的div容器,父容器來控制圖標(biāo)顯示的位置,子容器用來寫太陽的一條光影矩形的樣式。
<div class="container">
<div class="sunny"></div>
</div>
專門建立的學(xué)習(xí)Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享學(xué)習(xí)方法和需要注意的小細(xì)節(jié),不停更新最新的教程和學(xué)習(xí)技巧(從零基礎(chǔ)開始到前端項(xiàng)目實(shí)戰(zhàn)教程,學(xué)習(xí)工具,全棧開發(fā)學(xué)習(xí)路線以及規(guī)劃)
1、定義父容器樣式,控制圖標(biāo)位置,順便給整個(gè)頁面加個(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)畫
.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、寫另一條垂直的光影矩形
.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、太陽圓圈的樣式
.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;
}
文章題目:純css寫一個(gè)大太陽的天氣圖標(biāo)
網(wǎng)站地址:http://bm7419.com/article30/pcggpo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供自適應(yīng)網(wǎng)站、App開發(fā)、網(wǎng)站改版、全網(wǎng)營銷推廣、企業(yè)網(wǎng)站制作、關(guān)鍵詞優(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)