纯css制作电闪雷鸣的天气图标

时间: 2019-09-16阅读: 1189标签: 图标

效果

效果图如下


实现思路

  1. 使用box-shadow属性写几个圆,将这些圆错落的组合在一起,形成云朵图案
  2. after伪元素写下面的投影样式
  3. before伪元素写黄色闪电的样式


dom结构

用两个嵌套的div容器就可以了,父容器来控制图标显示的位置,子容器用来写乌云的样式。而阴影和闪电的样式都用伪元素就可以了,这些都是在css中定义的。

<div class="container">
    <div class="stormy"></div>
</div>


css样式

css按照步骤来实现

1、先写父容器样式,顺便给整个页面加个背景色,方便预览

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

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


2、写乌云的样式,别忘了乌云有一个上下移动的动画效果

.stormy{
    width: 50px;
    height: 50px;
    position: absolute;
    left: 80px;
    top: 70px;
    margin-left: -60px;
    background: #222;
    border-radius: 50%;
    box-shadow: #222 64px -15px 0 -5px,
        #222 25px -25px,
        #222 30px 10px,
        #222 60px 15px 0 -10px,
        #222 85px 5px 0 -5px;
    animation: stormy 5s ease-in-out infinite;
}

@keyframes stormy{
    50%{
        transform: translateY(-20px);
    }
}


3、阴影样式,同样是有动画的

.stormy::after{
    content: '';
    width: 120px;
    height: 15px;
    position: absolute;
    left: 5px;
    bottom: -60px;
    background: #000;
    border-radius: 50%;
    opacity: 0.2;
    transform: scale(0.7);
    animation: stormy_shadow 5s ease-in-out infinite;
}

@keyframes stormy_shadow{
    50%{
        transform: translateY(20px) scale(1);
        opacity: 0.05;
    }
}


4、闪电样式

.stormy::before{
    display: block;
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    left: 57px;
    top: 70px;
    border-left:  0px solid transparent;
    border-right: 7px solid transparent;
    border-top: 43px solid yellow;
    box-shadow: yellow -7px -32px;
    transform:  rotate(14deg);
    transform-origin: 50% -60px;
    animation: stormy_thunder 2s steps(1, end) infinite;
}

@keyframes stormy_thunder{
    0%{
        transform: rotate(20deg);
        opacity: 1;
    }
    5%{
        transform: rotate(-34deg);
        opacity: 1;
    }
    10%{
        transform: rotate(0deg);
        opacity: 1;
    }
    15%{
        transform: rotate(-34deg);
        opacity: 0;
    }
}

OK,搞定。按着步骤来,你也可以在你的页面上实现酷炫的电闪雷鸣天气图标咯~

原文:https://www.cnblogs.com/zuoWendong/archive/2019/09/16/11526871.html

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/5334

使用 node.js 从 iconfont.svg 文件中恢复单图标文件

阿里巴巴矢量图标库 (以下称iconfont)提供了方便的图标分享和管理功能。但是由于其图标项目独立于代码仓库,往往导致同一项目更换开发人员之后

font-awesome图标转为图片

font-awesome图标是字体,专业术语叫 Icon Font,本质上是使用 PUA ( Private Unicode Area )码位 Unicode 编码的字符,所以font-awesome图标、Bootstrap 的图标和 Wingdings 字体都是一样的,不一样的无非是编码。

设置网页浏览器标签小图标

在线生成ICO图标制作一个16*16 的.icon文件,文件名必须要favicon.ico,然后放在服务器根目录下面,一般浏览器会自动默认在跟目录下面查找。

reactnative 自定义项目的图标库

github比较火的有如react - native -vector- icons等图标库,为什么提到这些第三方库。首先明确一个点,你是否需要现成的第三方图标库?

阿里巴巴iconfont svg图标不能更改颜色的解决方法

svg图标 带有 fill 属性,如果选择的是多色图标且下载到本地的话,默认是带有颜色的。修改的话,需要在编译器里面打开 svg 然后将 fill 属性删除即可,然后在需要的时候使用 css 进行设置

网页中favicon.ico图标的作用、尺寸、制作

网站favicon.ico文件的用途很简单,就是在浏览器标签里,最前面显示的那个logo,对于网站 favicon.ico 图标的大小,建议大家选择 16x16 或者 32x32,再大也是完全没有必要的。favicon.ico

HTML中title前面小图标的实现_如何给网页标题添加icon小图标

今天给大家分享的是如何在网页标题中加入小图标,你的图标格式最好是.ico格式的,为了兼容性考虑,使用的颜色不要超过16色,这里这个图标的命名要求必须为favicon.ico

利用伪元素:before和:after插入图标

如果你想在网页的某些文字前加图标或者想改变li元素默认的图标,你会如何做?本文价绍一种不用再额外添加html标签,存粹利用css就能插入或者自作图标的方式。

字体图标的使用步骤

字体图标的优点:体积小,本质是字体,可以改变颜色,大小,背景等。UI人员设置svg格式交给前端人员;前端上传svg格式生成兼容性字体文件包;下载兼容性字体文件包到本地

html中为何经常使用<i>标签来作为小图标呢?

很多网站都是习惯使用<i></i>来代表小图标?而实际上用 <i> 元素做图标在语义上是不正确的(虽然看起来像 icon 的缩写),那么用<i>表示小icon,是出于好记的原因吗,还是看上去有点像icon?这样不是违背了语义化的原则吗?

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!