效果图如下
用两个嵌套的div容器就可以了,父容器来控制图标显示的位置,子容器用来写乌云的样式。而阴影和闪电的样式都用伪元素就可以了,这些都是在css中定义的。
<div class="container"> <div class="stormy"></div> </div>
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
很多网站都是习惯使用<i></i>来代表小图标?而实际上用 <i> 元素做图标在语义上是不正确的(虽然看起来像 icon 的缩写),那么用<i>表示小icon,是出于好记的原因吗,还是看上去有点像icon?这样不是违背了语义化的原则吗?
页面分享微信显示小图和描述的功能,微信就会抓取这张图片做为分享图片,微信对自定义分享内容作了限制,于是最终还是得回到配置wx.config上来。
如果你想在网页的某些文字前加图标或者想改变li元素默认的图标,你会如何做?本文价绍一种不用再额外添加html标签,存粹利用css就能插入或者自作图标的方式。
今天给大家分享的是如何在网页标题中加入小图标,你的图标格式最好是.ico格式的,为了兼容性考虑,使用的颜色不要超过16色,这里这个图标的命名要求必须为favicon.ico
这篇文章主要介绍前端常用的css图标库有哪些?比如:阿里巴巴矢量图标库Iconfont、Font Awesome、Cikonss、Glyph Icons、Simple Line Icons等等,使用css图标,可以通过样式对他进行设置字体颜色,大小等
网站favicon.ico文件的用途很简单,就是在浏览器标签里,最前面显示的那个logo,对于网站 favicon.ico 图标的大小,建议大家选择 16x16 或者 32x32,再大也是完全没有必要的。favicon.ico
图标是前端在业务开发中不得不写的一个东西,以我司的几个部门为例,每个组在写图标上都有不一样的方式:用户平台:单色图标用 iconfont 上提供的字体文件,彩色图标用 img 引入代替或者使用iconfont 上提供的 symbol.js 。
font-awesome图标是字体,专业术语叫 Icon Font,本质上是使用 PUA ( Private Unicode Area )码位 Unicode 编码的字符,所以font-awesome图标、Bootstrap 的图标和 Wingdings 字体都是一样的,不一样的无非是编码。
小图标icon是一个优秀Web中不可缺少的一部分,起到画龙点睛的效果。在Bootstrap框架中也为大家提供了250多个不同的icon图片。本文将详细介绍Bootstrap图标,Bootstrap框架中的图标都是字体图标
字体图标的优点:体积小,本质是字体,可以改变颜色,大小,背景等。UI人员设置svg格式交给前端人员;前端上传svg格式生成兼容性字体文件包;下载兼容性字体文件包到本地
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!