会动的大风车（css3）
今天用css3的写了一个会动的大风车，使用translate和rotate布局，使用animation制作动画效果；分享给大家
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding:0;
margin:0;
}
body,html{
width: 100%;
height: 100%;
overflow:hidden;
}
@keyframes move{
from{
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}
#box{
width:200px;
height:200px;
margin:100px auto;
position:relative;
-webkit-animation:4s move linear infinite running;
}
#box div{
width: 100px;
height: 50px;
border-radius:0 0 50px 50px;
-webkit-transform-origin:right center;
position:absolute;
}
.red{
background:-webkit-radial-gradient(right,circle,red,#000);
transform:translateX(100px) translateY(100px);
}
.yellow{
background:-webkit-radial-gradient(right,circle,yellow,#000);
transform:translateX(-25px) translateY(175px) rotateZ(90deg);
}
.blue{
background:-webkit-radial-gradient(right,circle,blue,#000);
transform:translateX(-100px) translateY(50px) rotateZ(180deg);
}
.green{
background:-webkit-radial-gradient(right,circle,green,#000);
transform:translateX(25px) translateY(-25px) rotateZ(-90deg);
}
#box .dot{
width: 20px;
height: 20px;
background:-webkit-radial-gradient(rgba(255,255,255,1),rgba(0,0,0,1));
border-radius:50%;
top:50%;
left:50%;
margin:-10px 0 0 -10px;
} </style>
</head>
<body>
<div id="box">
<div class="red"></div>
<div class="yellow"></div>
<div class="blue"></div>
<div class="green"></div>
<div class="dot"></div>
</div>
</body>
</html>
会动的大风车（css3）的更多相关文章
- AOS – 另外一个独特的页面滚动动画库（CSS3）
AOS 是一个用于在页面滚动的时候呈现元素动画的工具库,你可能会觉得它和 WOWJS 一样,的确他们效果是类似的.但是AOS是 CSS3 动画驱动的库,当你滚动页面的时候能让元素动起来,当页面滚回顶部 ...
- css3 animation动画技巧
一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...
- CSS3 Flex布局整理(二)-容器属性
一.Flex容器属性介绍 1.flex-flow :水平或垂直方向上的流动方式,包裹处理,其中包括了flex-direction属性和flex-wrap属性. 2.justify-content:定义 ...
- UC~移动端的IE！！！坑总结
1.接入过WAP版支付宝支付的应该会发现,支付宝页面在UC中巨丑,完全就是诺基亚时代的网页.你可能会怪它是支付宝的问题吧.但你用QQ浏览器打开,很好啊:你在电脑用火狐.Chrome打开都很好啊:那你试 ...
- 67 个JavaScript和CSS实用工具、库与资源
在这篇文章中,我不会与大家谈论大型的前端框架,如 React.Angular.Vue 等,也没有涉及那些流行的代码编辑器,如 Atom.VS Code.Sublime,我只想与大家分享一个有助于提升开 ...
- JavaScript和CSS实用工具、库与资源
JavaScript和CSS实用工具.库与资源 JavaScript 库 Particles.js - 一个用于在网页上创建漂亮的浮动粒子的 JS 库: Three.js - 用于在网页上创建 3 ...
- javaScript基础--概念以及使用
1.什么javascript? 为什么要学习? 处理网站动态特效 为后期课程打基础 什么是javascript? 是一个客户端的具有安全性的脚本语言. js和h5 的关系 : 都是向静态的元素动起来 ...
- 模仿百度首页“元宵节汤圆”动图，并实现360°不停旋转（CSS3的animation动画效果）
模仿百度首页“元宵节汤圆”动图,并实现360°不停旋转(CSS3的animation动画效果) 效果图: 切图地址: https://ss1.bdstatic.com/5eN1bjq8AAUYm2zg ...
- css3动画简介以及动画库animate.css的使用
在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...
随机推荐
- 浅谈ES6中的Proxy
Proxy是一个很有趣的对象,它能够修改某些操作的默认行为,等同于在语言层面做出修改,属于一种‘元编程’,即对编程语言进行编程. Proxy其实很好理解,就是在目标对象之前架设一层拦截,外界的访问都得 ...
- 原创：SAP LVC ALV编辑小技巧
前两天有个打印需求变更,需要在ALV显示列表中添加两个字段,可编辑,而我自己用的是函数:REUSE_ALV_GRID_DISPLAY_LVC 因为之前做可编辑基本都是固定套路,定义类,画屏幕.... ...
- 【读书笔记】iOS-复制的种类
一,你可以使用不同的方法复制对象.大多数对象都引用(即指向)其它对象. 二,浅层复制,不复制引用对象,新复制的对象只指向现有的引用对象.NSArray类的copy方法是浅层复制.当复制一个NSArra ...
- 【读书笔记】iOS-GCD-block
一,block的定义 //申明变量 (void)(^PrintStr)(void); //定义 PrintStr=^{ NSLog(@"PrintStr"); }; //调用 Pr ...
- 朝花夕拾-android 自定义toast
在一个只有你而且还未知的世界中,不去探索未知,死守一处,你到底在守什么呢? 作为一个目前的android程序员,可能过去写着delphi的代码,可能未来回去搭建服务器.不管怎样,你现在是一名安卓程序员 ...
- Cocos2d入门--2--三角函数的应用
其实,三角函数的知识点是初中的数学基础.但是在编程里合理的利用的话,也会很好玩的,可以制作出很多有趣的动画特效. 首先要注意的是 角度 和 弧度 的转换. 360度 = 2×PI弧度 180度 = ...
- Reverse反转算法＋斐波那契数列递归＋Reverse反转单链表算法－－C++实现
Reverse反转算法 #include <iostream> using namespace std; //交换的函数 void replaced(int &a,int & ...
- 深入理解java虚拟机（5）---字节码执行引擎
字节码是什么东西? 以下是百度的解释: 字节码(Byte-code)是一种包含执行程序.由一序列 op 代码/数据对组成的二进制文件.字节码是一种中间码,它比机器码更抽象. 它经常被看作是包含一个执行 ...
- 关于String StringBuffer StringBuilder
0. String对象的创建 1.关于类对象的创建,很普通的一种方式就是利用构造器,String类也不例外:String s=new String("Hello world&qu ...
- wampserver安装之后连接phpMyAdmin 不成功的解决方法
情况:我原先安装了本地的mysql数据库,默认密码不是为空,而是123456,但是wampserver安装默认mysql的密码是为空的.所以需要修改一下默认的配置.不然会出现连不上数据库. 解决方案: ...