会动的大风车（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 ...
随机推荐
- 拖拽改变div的大小
拖拽改变div的大小 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&qu ...
- javamail 发送邮件demo
package com.suntray.test; import javax.mail.BodyPart; import javax.mail.Message; import javax.mail.M ...
- 使用VideoView自定义一个播放器控件
介绍 最近要使用播放器做一个简单的视频播放功能,开始学习VideoView,在横竖屏切换的时候碰到了点麻烦,不过在查阅资料后总算是解决了.在写VideoView播放视频时候定义控制的代码全写在Actv ...
- DOM解析XML文件
1.首先把第三方代码拖进工程 GDataXMLNode.h和GDataXMLNode.m这两个文件放进工程里面 2.引入libxml2库文件 3.将GDataXMLNode.h文件中的这两个东西在工程 ...
- iOS多线程-03-NSOperation与NSOperationQueue
简介 通过NSOperation与NSOperationQueue的组合也能实现多线程 通常将任务封装成NSOperation对象,并将对象添加到NSOperationQueue中实现 NSOpera ...
- 听说你会打地鼠（动态规划dp）
题目来源:https://biancheng.love/contest-ng/index.html#/41/problems G 听说你会打地鼠 时间限制:300ms 内存限制:65536kb 题 ...
- 转 Android Dalvik虚拟机初识
首先,让我们来思考下面几个问题: 什么是Dalvik虚拟机? Dalvik VM与JVM有什么区别? Dalvik VM有什么新的特点? Dalvik VM的架构是怎么样的? 首先,我得承认第一个问题 ...
- [转]ionic $state.go passed $stateParams
本文转自:http://stackoverflow.com/questions/19516771/state-go-toparams-not-passed-to-stateparams If you ...
- leetcode_438_Find All Anagrams in a String_哈希表_java实现
题目: Given a string s and a non-empty string p, find all the start indices of p's anagrams in s. Stri ...
- 【Android UI设计与开发】10：滑动菜单栏（二）SlidingMenu 动画效果的实现
其实就是在显示菜单栏时,有个动画的效果.代码比较简单,下面进行说明. 1.效果图如下,手机上查看效果更佳 2.代码实现,这里只讲解动画效果的实现,具体代码可在源代码中查看 <1> 先定义一 ...