如何使用css實現(xiàn)一個大太陽的天氣圖標(biāo)-四川平武建站

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

如何使用css實現(xiàn)一個大太陽的天氣圖標(biāo)

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

站在用戶的角度思考問題，與客戶深入溝通，找到鐵山港網(wǎng)站設(shè)計與鐵山港網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：網(wǎng)站制作、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、國際域名空間、虛擬主機、企業(yè)郵箱。業(yè)務(wù)覆蓋鐵山港地區(qū)。

效果

效果圖如下

如何使用css實現(xiàn)一個大太陽的天氣圖標(biāo)

實現(xiàn)思路

div實現(xiàn)太陽的一條矩形光影
before偽元素制作另一條光影矩形，和已有的轉(zhuǎn)變90°
after偽元素畫個圓實現(xiàn)太陽樣式

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

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

css樣式

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

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

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

2、光影矩形樣式，有一個360°旋轉(zhuǎn)的動畫

.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實現(xiàn)一個大太陽的天氣圖標(biāo)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章名稱：如何使用css實現(xiàn)一個大太陽的天氣圖標(biāo)
文章URL：http://ef60e0e.cn/article/gioppg.html

99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区

新聞中心

其他資訊