会动的大风车（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 ...
随机推荐
- 微信html5开发选哪一个
html5选哪个开发框架 ①. Justep起步 X5框架 : 专门用来开发web App的大型开发工具集,x5 v3.0有765.58M,不选. ②.Jquery Mobile ...
- [Weblogic]如何清理缓存
背景:在开发调试或测试时,很多时候重新更新部署服务后会发现某些更新并没有体现到,还是之前的情况,也或者会出现其他错误问题,这个时候就要考虑到可能是weblogic缓存未清理引起. 清理缓存步骤如下: ...
- c# 其他技术学习
1.注册表编辑 为了方便对注册表进行操作,.NET提供了Registry类和RegistryKey类 2.API函数的应用 (1)自定义特性的代码:在类.属性.方法的上方加上“[]”的代码 (2)有个 ...
- Effective Java 20 Prefer class hierarchies to tagged classes
Disadvantage of tagged classes 1. Verbose (each instance has unnecessary irrelevant fields). 2. Erro ...
- Effective Java 49 Prefer primitive types to boxed primitives
No. Primitives Boxed Primitives 1 Have their own values Have identities distinct from their values 2 ...
- FiddlerScript修改特定请求参数下的返回值
使用场景: api/Live/GetLiveList接口: (1)Type为1,接口返回直播列表 (2)Type为2,接口返回回放列表 现在想修改直播列表的返回值 思路: 利用FiddlerScrip ...
- 《SQL Server企业级平台管理实践》读书笔记——SQL Server中关于系统库Tempdb总结
Tempdb系统数据库是一个全局资源,可供连接到SQL Server实例的所有用户使用. 存储的内容项: 1.用户对象 用户对象由用户显示创建.这些对象可以位于用户会话的作用域中,也可以位于创建对象所 ...
- 关于nginx的限速模块
nginx 使用 ngx_http_limit_req_module和ngx_http_limit_conn_module 来限制对资源的请求 这种方法,对于CC攻击(Challenge Collap ...
- DataTable转List<Model>通用类
/// <summary> /// DataTable转List<Model>通用类[实体转换辅助类] /// </summary> public class Mo ...
- nginx 配置wordpress固定链接（自定义）
今天在wordpress 下配置文章固定链接的时候,遇到了404的错误.我首先在wordpress下的设置里的“固定链接”配置页面,自定义链接的结构 “http://www.haozi8.com/%p ...