效果
效果圖如下
實現(xiàn)思路
dom結(jié)構(gòu)
用兩個嵌套的div容器，父容器來控制圖標顯示的位置，子容器用來寫太陽的一條光影矩形的樣式。
<div class="container"> <div class="sunny"></div></div>
css樣式
1、定義父容器樣式，控制圖標位置，順便給整個頁面加個背景色，方便預覽
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;}以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
