CSS3实现一个旋转的花朵
要效果图如下：
实现原理：
其实很简单，就是中间的圆圈定位在中间，其他的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>运行代码便能看到完整的旋转效果！
CSS3实现一个旋转的花朵的更多相关文章
- 纯CSS3实现一个旋转的3D立方体盒子
简单介绍 上网易前端微专业课程,里面有一个课外作业是实现一个3D旋转立方体.花了点时间做了下.还有点意思.写个简单教程.供大家学习. 先放上终于要实现的效果 注:代码在chrome 43.0.2357 ...
- 使用CSS3 制作一个material-design 风格登录界面
心血来潮,想学学 material design 的设计风格,就尝试完成了一个登录页面制作. 这是整体效果. 感觉还不错吧,结尾会附上代码 在编写的过程中,没有使用任何图片或者字体图标,全部使用css ...
- 用CSS3制作的旋转六面体动画
这是用CSS3制作的旋转的六面体 请用火狐或谷歌浏览器预览,有些旋转角度做的不够好,请大神指教 top bottom left right front back
- WPF 3D：简单的Point3D和Vector3D动画创造一个旋转的正方体
原文:WPF 3D:简单的Point3D和Vector3D动画创造一个旋转的正方体 运行结果: 事实上很简单,定义好一个正方体,处理好纹理.关于MeshGeometry3D的正确定义和纹理这里就不多讲 ...
- Directx11学习笔记【十二】 画一个旋转的彩色立方体
上一次我们学习了如何画一个2D三角形,现在让我们进一步学习如何画一个旋转的彩色立方体吧. 具体流程同画三角形类似,因此不再给出完整代码了,不同的部分会再说明. 由于我们要画彩色的立方体,所以顶点结构体 ...
- SceneKit做一个旋转的地球效果
SceneKit可以用寥寥几行帮你完成很多OpenGL复杂的3D设置代码,下面本猫就带大家完成一个旋转的3D地球的场景. 首先需要地球表面图片,将其导入到Xcode中: 我们用SceneKit内置的几 ...
- 使用jQuery和CSS3实现一个数字时钟
点击进入更详细教程及源码下载 在线演示 我们经常会在网站中看见一个时钟的效果.今天向大家分享一个使用jQuery和CSS3实现一个数字时钟教程. http://www.html5cn.org/ ...
- 纯CSS3悬停图标旋转导航动画代码
分享一款纯CSS3悬停图标旋转导航动画代码.这是一款鼠标移到图标上动画旋转显示导航菜单.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id="x_con ...
- 第102天：CSS3实现立方体旋转
CSS3实现立方体旋转 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
随机推荐
- PRaCtice[1]
目录 ID-3学习 代码实现 1. 样例数据集 2.信息熵的计算 ID-3学习 代码实现 该项目采用了业界领先的 TDD(TreeNewBee-Driven Development,吹牛逼导向开发模式 ...
- 回归分析|r^2|Se|变差|多重相关系数|决定系数|多重共线性|容忍度|VIF|forward selection|backward elimination|stepwise regression procedure|best-subset approach|回归方程的置信区间|预测区间|残差分析|虚拟变量
应用统计学-回归分析 拟合度使用r^2和Se来检验. 显著性检验中,对于线性model使用ANOVA,对于单独的回归系数使用t检验. 最小二乘法.贝叶斯和最大似然都可用于求回归参数,最小二乘法是最小化 ...
- 给本地web项目配置域名
给本地的web项目配置一个域名 通常访问本地问项目时,使用localhost:port/projectname或者127.0.0.1:port/projectname来实现.我们可以通过配置tomca ...
- maven中指定build一个project中几个特定的子modules
问题由来: 一个项目可能会有多个子module,在特定情况下可能只需要build其中几个module. 例如我的项目的目录结构如下 myproject |------------module_one ...
- redHat更新yum源
1. 网易镜像仓库查找相关rpm 包并下载 :http://mirrors.163.com/centos/6/os/x86_64/Packages/ wget http://mirrors.163.c ...
- 系统学习 javaweb2----HTML语言2
感想:学习javaweb之路,任重而道远. 学习笔记: 5.表格标签 5.1<table></table> 表格标签,用于效果中定义一个表格 5.2<tr>< ...
- centos 7 下iptables参数详解
在红帽RHEL7系统中firewalld服务取代了iptables服务,如果我们不想用或者不习惯使用firewalld服务,请看下面的操作: iptables命令中则常见的控制类型有: ACCEPT: ...
- NIO详解
目录 NIO 前言 IO与NIO的区别 Buffer(缓冲区) Channel(通道) Charset(字符集) NIO遍历文件 NIO 前言 NIO即New IO,这个库是在JDK1.4中才引入的. ...
- RNA sequence单分子直测技术
生命组学 按照功能分类遗传物质,可能的分类有系统流.操作流.平衡流等等.下面是使用该理论解释DNA与RNA的关系: DNA和RNA有很大不同,DNA存储遗传信息,作为生命活动的最内核物质,如同操作系统 ...
- c/c++ main 函数命令行参数的使用
C程序最大的特点就是所有的程序都是用函数来装配的.main()称之为主函数,是所有程 序运行的入口.其余函数分为有参或无参两种,均由main()函数或其它一般函数调用,若调用的是有参函数,则参数在调用 ...