如何使用css實(shí)現一個(gè)大太陽(yáng)的天氣圖標

小編給大家分享一下如何使用css實(shí)現一個(gè)大太陽(yáng)的天氣圖標，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

效果

效果圖如下

實(shí)現思路

• div實(shí)現太陽(yáng)的一條矩形光影

• before偽元素制作另一條光影矩形，和已有的轉變90°

• after偽元素畫(huà)個(gè)圓實(shí)現太陽(yáng)樣式

dom結構

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

<div class="container">
    <div class="sunny"></div>
</div>

css樣式

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

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

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

2、光影矩形樣式，有一個(gè)360°旋轉的動(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;
}