酷站(www.ku0.com)-致力于为互联网从业者提供动力!

热门关键词:  企业  as  baidu  c4rp3nt3r  美女
酷站

css

旗下栏目: html css xml html5 DW bootstrap Frontpage教程

纯css写一个大太阳的天气图标的教程方法

来源:互联网搜集 作者:秩名 人气: 发布时间:2019-09-19
本篇文章主要介绍了纯css写一个大太阳的天气图标的教程方法,对大家的学习或者工作具有一定的参考学习价值,感兴趣的小伙伴们可以参考一下,也感谢大家对酷站(ku0.com)的支持。

效果

效果图如下
 


 

 

实现思路
 

  • div实现太阳的一条矩形光影
  •  
  • before伪元素制作另一条光影矩形,和已有的转变90°
  •  
  • after伪元素画个圆实现太阳样式


dom结构

用两个嵌套的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°旋转的动画

 
.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;
}
 

原文链接:https://www.jb51.net/css/693979.html

最新更新