新增第128个小实例：纯CSS实现简约的天气图标动画特效
This commit is contained in:
DESKTOP-BM6RJU5\wyanh
parent
2c8b5e8de6
commit
6f21f5f937
|
|
@ -131,4 +131,5 @@
|
|||
124. HTML5+CSS3小实例：丝滑切换的loading加载动画
|
||||
125. HTML5+CSS3+JS小实例：小清新的卡片式注册登录切换效果
|
||||
126. HTML5+CSS3小实例：纯CSS实现瀑布流布局
|
||||
127. HTML5+CSS3小实例：带标题的图像悬停效果
|
||||
127. HTML5+CSS3小实例：带标题的图像悬停效果
|
||||
128. HTML5+CSS3小实例：纯CSS实现简约的天气图标动画特效
|
||||
|
|
@ -0,0 +1,226 @@
|
|||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body{
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* 自定义属性（变量），通过var函数进行调用 */
|
||||
--bg-color: #161616;
|
||||
background-color: var(--bg-color);
|
||||
}
|
||||
.container{
|
||||
width: 700px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
/* 晴 */
|
||||
.sunny{
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
/* 太阳 */
|
||||
.sunny .sun{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: var(--bg-color);
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 0 6px orange;
|
||||
/* 执行动画：动画名 时长 线性的 无限次播放 */
|
||||
animation: sunny 10s linear infinite;
|
||||
}
|
||||
/* 光线 */
|
||||
.sunny .sun .rays{
|
||||
position: absolute;
|
||||
top: -32px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 6px;
|
||||
height: 18px;
|
||||
background-color: yellow;
|
||||
box-shadow: 0 86px yellow;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.sunny .sun .rays::before,
|
||||
.sunny .sun .rays::after{
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 6px;
|
||||
height: 18px;
|
||||
background-color: yellow;
|
||||
box-shadow: 0 86px yellow;
|
||||
border-radius: 4px;
|
||||
transform: rotate(60deg);
|
||||
transform-origin: 50% 52px;
|
||||
}
|
||||
.sunny .sun .rays::before{
|
||||
transform: rotate(-60deg);
|
||||
}
|
||||
/* 雨 */
|
||||
.rainy{
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
/* 云朵 */
|
||||
.rainy .cloud{
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
/* --bg-color:red; */
|
||||
background-color: var(--bg-color);
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
box-shadow: -35px 11px 0 -11px var(--bg-color),
|
||||
33px 15px 0 -15px var(--bg-color),
|
||||
0 0 0 6px lightgray,
|
||||
-35px 11px 0 -5px lightgray,
|
||||
33px 15px 0 -9px lightgray;
|
||||
}
|
||||
/* 让云朵下边为直边 */
|
||||
.rainy .cloud::after{
|
||||
content: "";
|
||||
width: 73px;
|
||||
height: 16px;
|
||||
background-color: var(--bg-color);
|
||||
box-shadow: 0 6px 0 0 lightgray;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: -8px;
|
||||
}
|
||||
/* 雨滴区域 */
|
||||
.rainy .rain{
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background-color: var(--bg-color);
|
||||
position: absolute;
|
||||
top: 55%;
|
||||
left: 20%;
|
||||
}
|
||||
/* 雨滴 */
|
||||
.rainy .rain::after{
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-color: #0cf;
|
||||
border-radius: 100% 0 60% 50% / 60% 0 100% 50%;
|
||||
box-shadow: 10px 14px 0 -2px rgba(255,255,255,0.2),
|
||||
-14px 18px 0 -2px rgba(255,255,255,0.2),
|
||||
-22px -2px 0 rgba(255,255,255,0.2);
|
||||
transform: rotate(-28deg);
|
||||
margin: -16px 0 0 -4px;
|
||||
/* 执行动画 */
|
||||
animation: rainy 2s linear infinite;
|
||||
}
|
||||
/* 多云 */
|
||||
.cloudy{
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
/* 云朵 */
|
||||
.cloudy .cloud{
|
||||
z-index: 1;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
/* --bg-color:red; */
|
||||
background-color: var(--bg-color);
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
box-shadow: -35px 11px 0 -11px var(--bg-color),
|
||||
33px 15px 0 -15px var(--bg-color),
|
||||
0 0 0 6px lightgray,
|
||||
-35px 11px 0 -5px lightgray,
|
||||
33px 15px 0 -9px lightgray;
|
||||
}
|
||||
/* 让云朵下边为直边 */
|
||||
.cloudy .cloud::after{
|
||||
content: "";
|
||||
width: 73px;
|
||||
height: 16px;
|
||||
background-color: var(--bg-color);
|
||||
box-shadow: 0 6px 0 0 lightgray;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: -8px;
|
||||
}
|
||||
/* 小云朵 */
|
||||
.cloudy .cloud:nth-child(2){
|
||||
z-index: 0;
|
||||
background-color: #fff;
|
||||
box-shadow: -35px 11px 0 -11px #fff,
|
||||
33px 15px 0 -15px #fff,
|
||||
0 0 0 6px #fff,
|
||||
-35px 11px 0 -5px #fff,
|
||||
33px 15px 0 -9px #fff;
|
||||
opacity: 0.3;
|
||||
transform: scale(0.5) translate(96px,-48px);
|
||||
/* 执行动画 */
|
||||
animation: cloudy 3s linear infinite;
|
||||
}
|
||||
/* 小云朵的下边 */
|
||||
.cloudy .cloud:nth-child(2)::after{
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* 定义动画 */
|
||||
@keyframes sunny {
|
||||
0%{
|
||||
transform: rotate(0);
|
||||
}
|
||||
100%{
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes rainy {
|
||||
0%{
|
||||
background-color: #0cf;
|
||||
box-shadow: 10px 14px 0 -2px rgba(255,255,255,0.2),
|
||||
-14px 18px 0 -2px rgba(255,255,255,0.2),
|
||||
-22px -2px 0 rgba(255,255,255,0.2);
|
||||
}
|
||||
25%{
|
||||
box-shadow: 10px 14px 0 -2px rgba(255,255,255,0.2),
|
||||
-14px 18px 0 -2px #0cf,
|
||||
-22px -2px 0 rgba(255,255,255,0.2);
|
||||
}
|
||||
50%{
|
||||
background-color: rgba(255,255,255,0.2);
|
||||
box-shadow: 10px 14px 0 -2px #0cf,
|
||||
-14px 18px 0 -2px rgba(255,255,255,0.2),
|
||||
-22px -2px 0 rgba(255,255,255,0.2);
|
||||
}
|
||||
100%{
|
||||
box-shadow: 10px 14px 0 -2px rgba(255,255,255,0.2),
|
||||
-14px 18px 0 -2px rgba(255,255,255,0.2),
|
||||
-22px -2px 0 #0cf;
|
||||
}
|
||||
}
|
||||
@keyframes cloudy {
|
||||
0%{
|
||||
opacity: 0;
|
||||
}
|
||||
50%{
|
||||
opacity: 0.3;
|
||||
}
|
||||
100%{
|
||||
opacity: 0;
|
||||
transform: scale(0.5) translate(-200%,-48px);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
|
||||
<title>纯CSS实现简约的天气图标动画特效</title>
|
||||
<link rel="stylesheet" href="128.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<!-- 晴 -->
|
||||
<div class="sunny">
|
||||
<div class="sun">
|
||||
<div class="rays"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 雨 -->
|
||||
<div class="rainy">
|
||||
<div class="cloud"></div>
|
||||
<div class="rain"></div>
|
||||
</div>
|
||||
<!-- 多云 -->
|
||||
<div class="cloudy">
|
||||
<div class="cloud"></div>
|
||||
<div class="cloud"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue