CSS3实现一个旋转的花朵
2024-09-23 23:59:30
要效果图如下：
实现原理：
其实很简单，就是中间的圆圈定位在中间，其他的6个圆圈，进行不同的绝对定位，然后进行旋转！
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS实现的旋转的花朵</title>
<style>
*{
margin: 0;
padding: 0;
}
*,*:before,*:after{
box-sizing: border-box;
}
html body{
height: 100%;
}
.container {
background: #f39c12;
height: 300px;
position: relative;
}
.loader{
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.loader .spinnerBlock{
-webkit-animation: rotate 1000ms linear infinite;
animation: rotate 1000ms linear infinite;
-webkit-transform-origin: center;
transform-origin: center;
display: block;
width: 50px;
height: 50px;
}
.loader span{
display: block;
border: 2px solid #fff;
border-radius: 50%;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.loader soan:nth-child(1){
border-color: #eee;
}
.loader span:nth-child(2){
left: -18px;
top: 10px;
}
.loader span:nth-child(3){
left: -18px;
top: -10px;
}
.loader span:nth-child(4){
left: 0;
top: -18px;
}
.loader span:nth-child(5){
left: 18px;
top: -10px;
}
.loader span:nth-child(6){
left: 18px;
top: 10px;
}
.loader span:nth-child(7){
left: 0;
top: 18px;
}
@-webkit-keyframes rotate {
from{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotate {
from{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="container">
<div class="loader">
<div class="spinnerBlock">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</body>
</html>运行代码便能看到完整的旋转效果！
最新文章
- NOIP模拟赛20161114
- css 拾遗
- java网络流传输，中文乱码问题。
- codeforces 709E E. Centroids(树形dp)
- 19.allegro过孔设置[原创]
- URL的格式scheme
- 0708_Java如何设置输入流
- MVC+EF 随笔小计——NuGet程序包管理
- intent和intentfilter
- JavaScript 自动分页插件 datatables
- Apache经常使用配置
- 对于一些css样式的巧妙方法进行总结。
- 【Tools】Pycharm 2018专业版 linux安装教程 附2018专业版密钥
- asp.net core系列 25 EF模型配置(隐藏属性)
- Java开发笔记（三）Java帝国的特种官吏
- Sublime Text3配置
- SPHINX 文档写作工具安装简要指南 - windows 版 - 基于python
- git 如何revert指定范围内的commit并且只生成一个新的commit?
- Linux打开TCP BBR拥塞控制算法
- 牛客网——E求最值
热门文章
- 43)PHP,mysql_fetch_row 和mysql_fetch_assoc和mysql_fetch_array
- ABC：Meaningful Mean
- iOS商品详情、ffmpeg播放器、指示器集锦、自定义圆弧菜单、实用工具等源码
- android版本更新框架、新闻客户端、音乐播放器、自定义View、Github客户端、指南针等源码
- [LC] 429. N-ary Tree Level Order Traversal
- icloud/onenote/onedrive/microoutlook/百度云账号都是怎么回事（未完成）
- Jump Game (Medium)
- linux系统--C语言程序开发的基本步骤（包含gcc的基本步骤）
- Nginx笔记总结十五:nginx+keepalive+proxy_cache配置高可用nginx集群和高速缓存
- 用nexus搭建maven2内部服务器