CSS icon标志之纯CSS完成带动漫实际效果的天气标志

日期:2021-03-04 类型:科技新闻 

关键词:凡科自助建站,企业网站怎么建设,智能建站系统,自己建个网站,搭建网站基本步骤

CSS3动漫特性其实不是许多,但关键实际上是你如何去应用它,从简易的hover情况或繁杂的小动漫,都可以以恰当的用CSS3动漫特性来完成。
今日关键是和大伙儿共享1个较为有艺术创意、好用的CSS天气标志动漫,静态数据的天气标志看上去是很死板,若再加动漫,看起来会更为真正生动,下列事例便是很好的参照实例。

下面大家来做1个会下雨的天气标志案例,全过程实际上很简易哦。

STEP1: 总体HTML构架

拷贝编码
编码以下:

<div class="icon rainy">
<div class="cloud"></div>
<div class="rain"></div>
</div>

STEP2: 用CSS绘图云朵标志
CSS编码以下


拷贝编码
编码以下:

body {
max-width: 42em;
padding: 2em;
margin: 0 auto;
color: #161616;
font-family: 'Roboto', sans-serif;
text-align: center;
background-color: currentColor;
}
.icon {
position: relative;
display: inline-block;
width: 12em;
height: 10em;
font-size: 1em; /* control icon size here */
}
.cloud {
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
width: 3.6875em;
height: 3.6875em;
margin: ⑴.84375em;
background: currentColor;
border-radius: 50%;
box-shadow:
⑵.1875em 0.6875em 0 -0.6875em,
2.0625em 0.9375em 0 -0.9375em,
0 0 0 0.375em #fff,
⑵.1875em 0.6875em 0 -0.3125em #fff,
2.0625em 0.9375em 0 -0.5625em #fff;
}
.cloud:after {
content: '';
position: absolute;
bottom: 0;
left: -0.5em;
display: block;
width: 4.5625em;
height: 1em;
background: currentColor;
box-shadow: 0 0.4375em 0 -0.0625em #fff;
}
.cloud:nth-child(2) {
z-index: 0;
background: #fff;
box-shadow:
⑵.1875em 0.6875em 0 -0.6875em #fff,
2.0625em 0.9375em 0 -0.9375em #fff,
0 0 0 0.375em #fff,
⑵.1875em 0.6875em 0 -0.3125em #fff,
2.0625em 0.9375em 0 -0.5625em #fff;
opacity: 0.3;
transform: scale(0.5) translate(6em, ⑶em);
animation: cloud 4s linear infinite;
}
.cloud:nth-child(2):after { background: #fff; }
.rain{
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
width: 3.75em;
height: 3.75em;
margin: 0.375em 0 0 ⑵em;
background: currentColor;
}
.rain:after {
content: '';
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
width: 1.125em;
height: 1.125em;
margin: ⑴em 0 0 -0.25em;
background: #0cf;
border-radius: 100% 0 60% 50% / 60% 0 100% 50%;
box-shadow:
0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2),
-0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2),
⑴.375em -0.125em 0 rgba(255,255,255,0.2);
transform: rotate(⑵8deg);
animation: rain 3s linear infinite; /*设定动漫 rain */
}
STEP3: 下雨动漫
/* 下雨动漫 Animations */
@keyframes rain {
0% {
background: #0cf;
box-shadow:
0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2),
-0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2),
⑴.375em -0.125em 0 #0cf;
}
25% {
box-shadow:
0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2),
-0.875em 1.125em 0 -0.125em #0cf,
⑴.375em -0.125em 0 rgba(255,255,255,0.2);
}
50% {
background: rgba(255,255,255,0.3);
box-shadow:
0.625em 0.875em 0 -0.125em #0cf,
-0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2),
⑴.375em -0.125em 0 rgba(255,255,255,0.2);
}
100% {
box-shadow:
0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2),
-0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2),
⑴.375em -0.125em 0 #0cf;
}
}

最图实际效果:


以上所述是对于CSS icon标志之纯CSS完成带动漫实际效果的天气标志 的所有內容,期待对大伙儿有一定的协助。