纯css写一个大太阳的天气图标的方法示例
发布时间:2019-09-19 16:07:44 作者:柏大乖要乖呀 我要评论
这篇文章主要介绍了纯css写一个大太阳的天气图标的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
效果
效果图如下
实现思路
- div实现太阳的一条矩形光影
- before伪元素制作另一条光影矩形,和已有的转变90°
- after伪元素画个圆实现太阳样式
dom结构
用两个嵌套的div容器,父容器来控制图标显示的位置,子容器用来写太阳的一条光影矩形的样式。
css样式
1、定义父容器样式,控制图标位置,顺便给整个页面加个背景色,方便预览
1 2 3 4 5 6 7 8 9 10 | body{ background : rgba( 73 , 74 , 95 , 1 ); } .container{ width : 170px ; height : 170px ; position : relative ; margin : 250px auto ; } |
2、光影矩形样式,有一个360°旋转的动画
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | .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 15 s linear infinite; } @keyframes sunny { 0% { transform: rotate( 0 deg); } 100% { transform: rotate( 360 deg); } } |
3、写另一条垂直的光影矩形
1 2 3 4 5 6 7 8 9 10 | .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( 90 deg) } |
4、太阳圆圈的样式
1 2 3 4 5 6 7 8 9 10 11 | .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 ; } |
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
- 下面小编就为大家带来一篇html+css3太阳系行星运转动画效果的实现代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-06-08
最新评论