如何使用css實(shí)現(xiàn)一個(gè)大太陽(yáng)的天氣圖標(biāo)
小編給大家分享一下如何使用css實(shí)現(xiàn)一個(gè)大太陽(yáng)的天氣圖標(biāo)，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
站在用戶的角度思考問題，與客戶深入溝通，找到鐵山港網(wǎng)站設(shè)計(jì)與鐵山港網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：網(wǎng)站制作、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、國(guó)際域名空間、虛擬主機(jī)、企業(yè)郵箱。業(yè)務(wù)覆蓋鐵山港地區(qū)。
效果
效果圖如下
實(shí)現(xiàn)思路
div實(shí)現(xiàn)太陽(yáng)的一條矩形光影
before偽元素制作另一條光影矩形，和已有的轉(zhuǎn)變90°
after偽元素畫個(gè)圓實(shí)現(xiàn)太陽(yáng)樣式
dom結(jié)構(gòu)
用兩個(gè)嵌套的div容器，父容器來控制圖標(biāo)顯示的位置，子容器用來寫太陽(yáng)的一條光影矩形的樣式。
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)畫
.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、太陽(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;
}以上是“如何使用css實(shí)現(xiàn)一個(gè)大太陽(yáng)的天氣圖標(biāo)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
新聞標(biāo)題：如何使用css實(shí)現(xiàn)一個(gè)大太陽(yáng)的天氣圖標(biāo)
文章轉(zhuǎn)載：
http://weahome.cn/article/gioppg.html
重慶分公司
重慶分公司
