CSS动画效果-用于背景（旋转等）

图示，我加了一张图片，不需要的可以不用添加，主要是10个正方形进行旋转。喜欢不同的图形可以进行更改，对颜色可以进行调整。

话不多说，直接上代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>登录页</title><link rel="stylesheet" href="./style.css">
</head>
<body><div class="all_page"><div class="next_page"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div></div>
</body>
</html>

body{margin: 0;padding: 0;
}
.all_page{position: absolute;width: 100%;height: 100vh;overflow: hidden;background-image: url(./img/云层.png);
}
.next_page{width: 100%;height: 100%;
}
.next_page span{position: absolute;width: 80px;height: 80px;}.next_page span:nth-child(1){top:50%;left: 50%;background-color: #be97d4;animation: animate 10s linear infinite;
}
.next_page span:nth-child(2){top:5%;left: 5%;background-color: #dcecf0;animation: animate 5s linear infinite;
}
.next_page span:nth-child(3){top:20%;left: 25%;background-color: #be97d4;animation: animate 10s linear infinite;
}
.next_page span:nth-child(4){top:40%;left: 15%;background-color: #dfcaad;animation: animate 15s linear infinite;
}
.next_page span:nth-child(5){top:75%;left: 25%;background-color: #be97d4;animation: animate 9s linear infinite;
}
.next_page span:nth-child(6){top:10%;left: 70%;background-color: #b87cda;animation: animate 10s linear infinite;
}
.next_page span:nth-child(7){top:30%;left: 80%;background-color: #b87cda;animation: animate 10s linear infinite;
}
.next_page span:nth-child(8){top:80%;left: 60%;background-color: #c4e9f3;animation: animate 12s linear infinite;
}
.next_page span:nth-child(9){top:80%;left: 90%;background-color: #be97d4;animation: animate 7s linear infinite;
}
.next_page span:nth-child(10){top:18%;left: 45%;background-color: #dfcaad;animation: animate 6s linear infinite;
}
.next_page span:nth-child(2n+1){background: transparent;border: 5px solid #82ddc5;
}
@keyframes animate{0%{transform: scale(0) translateY(0) rotate(0deg);opacity: 1;}100%{transform: scale(1) translateY(100px) rotate(360deg);opacity: 0;}
}

CSS动画效果-用于背景（旋转等）相关推荐

css动画效果制作正方体旋转相册
以下代码利用css动画效果制作了一个旋转的正方体,给正方体六个面放置好图片就可以当一个炫酷有趣的正方体旋转相框啦!可以将女朋友的照片放进去哦,赶快去试试,给女朋友一个惊喜吧! 下面没有放入背景建议大家 ...
Css动画效果旋转卡牌
这次我们来实现一个用css动画效果敲打出来一个旋转卡牌的小案列. 首先把img图片框架敲打出来,给它一个div标签,里面包裹六个img标签. 放进去图片之后,然后给图片设置一下css样式. 设置tra ...
CSS动画效果构成分析
CSS动画特效的基本构成文章目录 CSS动画特效的基本构成 CSS动画效果一.动画轨迹,运动路径 1.规定目标样式属性transfrom: 二.控制运动路径 transition animati ...
赞！15个来自 CodePen 的酷炫 CSS 动画效果
CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...
如何用CSS动画特效让图片旋转起来
杜老师逆战班学员 2020.02.22 我们通常浏览网页,基本上看过去都是呈现着各种文字加图片的2D效果信息,作为一名前端开发工程师非常重要的工作就是要让用户看到网页时有眼前一亮.耳目一新的感觉,用户 ...
html中flash的简单动画效果,css 动画效果
要搞就搞明白,一知半解时停止研究损失最大 css3意义: CSS3 动画通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片.Flash 动画以及 JavaScript. 重点知识 C ...
CSS动画效果的回调
用纯JS实现动画效果代码量大,计算复杂.因此现在前端页面的动画效果一般都采用CSS来实现. CSS动画实现简单高效,但是在处理动画,控制动画过程上却缺少一些有效手段. 例如我们想在动画效果完成时调用回 ...
CSS动画效果无限循环放大缩小
效果图: CSS动画效果无限循环放大缩小 <image class="anima" mode="widthFix" @click="nav&qu ...
css鼠标移入线条延中心伸长,css动画效果：鼠标移上去底部线条从中间往两边延伸 - 子成君-分享出去，快乐加倍！-旧版已停更...
本站已不再更新,最新资源请前往zcjun.com获取! css: .top-nav a:after { content: ' '; position: absolute; z-index: 2; bo ...

CSS动画效果-用于背景（旋转等）

CSS动画效果-用于背景（旋转等）相关推荐

最新文章

热门文章