用纯css写一个大太阳的天气图标
时间：2023-03-31 00:03:08
CSS
效果图如下。实现思路如下。div在伪元素前用一个光影实现一个太阳的矩形再做一个光影矩形，在伪元素后用已有的变换90°画一个圆实现太阳风格dom结构使用了两个嵌套div容器，父容器用来控制图标显示的位置，子容器用来写一个太阳光影矩形的样式。
css样式1.定义父容器样式，控制图标位置，为整个页面添加背景色对了，方便预览body{background:rgba(73,74,95,1);}.container{width:170px;高度：170px；位置：相对；margin:250pxauto;}2.光影矩形样式，带有360°旋转动画.sunny{width:20px;高度：140px；位置：绝对；顶部：20px；左：90px；%,RGBA(255,255,255,0)100%);动画：晴天15s线性无限；}@keyframes晴天{0%{变换：旋转（0度）；}100%{变换：旋转（360度）；}}3.再写一个竖直的光影矩形。晴天::之前{内容：'';宽度：20px；高度：140px；位置：绝对；底部：0；左：0；背景：-webkit-线性渐变（顶部，rgba（255,255,255,0）0%，rgba（255,255,255,0.8）50%，rgba（255,255,255,0）100%）；transform:rotate(90deg)}4.太阳圆的样式。晴天：：之后{内容：'';宽度：80px；高度：80px；位置：绝对；顶部：30px；左：-30px；背景：#ffee44；边界半径：50%；框阴影：rgba(255,255,0,0.2)00015px;}
