趣味CSS3(一)--旋转的大风车

这是一个比较酷炫一点的大风车，不断旋转的大风车。纯碎是用CSS3来写的。
我就直接把整个页面写出来了，有需要的同学，直接复制就OK了。

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>大风车-转啊转</title><style>#box {width: 400px;height: 400px;margin: 200px auto;position: relative;}#main {width: 400px;height: 400px;animation: dfc 1s linear infinite;}.css1,.css2,.css3,.css4 {width: 200px;height: 100px;border: 1px solid blue;border-radius: 100px 100px 0 0;position: absolute;background-image: linear-gradient(red, yellow);}.css1 {top: 100px;}.css2 {top: 50px;left: 150px;-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);-ms-transform: rotate(90deg);-o-transform: rotate(90deg);transform: rotate(90deg);}.css3 {top: 200px;left: 200px;-webkit-transform: rotate(180deg);-moz-transform: rotate(180deg);-ms-transform: rotate(180deg);-o-transform: rotate(180deg);transform: rotate(180deg);}.css4 {top: 250px;left: 50px;-webkit-transform: rotate(270deg);-moz-transform: rotate(270deg);-ms-transform: rotate(270deg);-o-transform: rotate(270deg);transform: rotate(270deg);}.ssss {width: 100px;height: 100px;border-radius: 100%;position: absolute;top: 150px;left: 150px;z-index: 10;background-image: radial-gradient(yellow, #fff);}.hhh {width: 2px;height: 350px;background-image: radial-gradient(yellow, #fff);position: absolute;top: 200px;left: 199px;z-index: -1;}@keyframes dfc {0% {-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);}25% {-webkit-transform: rotate( 90deg);-moz-transform: rotate( 90deg);-ms-transform: rotate( 90deg);-o-transform: rotate( 90deg);transform: rotate( 90deg);}50% {-webkit-transform: rotate(180deg);-moz-transform: rotate(180deg);-ms-transform: rotate(180deg);-o-transform: rotate(180deg);transform: rotate(180deg);}75% {-webkit-transform: rotate(270deg);-moz-transform: rotate(270deg);-ms-transform: rotate(270deg);-o-transform: rotate(270deg);transform: rotate(270deg);}100% {-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-ms-transform: rotate(360deg);-o-transform: rotate(360deg);transform: rotate(360deg);}}</style></head><body><div id="box"><div id="main"><div class="css1"></div><div class="css2"></div><div class="css3"></div><div class="css4"></div><div class="ssss"></div></div><div class="hhh"></div></div></body></html>

嗯哈，其实也不难。效果还是蛮炫的。

趣味CSS3(一)--旋转的大风车相关推荐

CSS3 制作旋转的大风车
发一个很久以前的作品,当开始得知CSS3可以做动画时,就很想玩玩,于是就做了个充满童年回忆的大风车. src="http://help.dili360.com/windmill.shtml& ...
HTML制作动画制作动态大风车,CSS3 制作旋转的大风车(充满童年回忆)
发一个很久以前的作品,当开始得知CSS3可以做动画时,就很想玩玩,于是就做了个充满童年回忆的大风车. css3 大风车提示:您可以先修改部分代码再运行 HTML: 复制代码代码如下: 实现过程:首先 ...
用css3制作旋转加载动画的几种方法
2019独角兽企业重金招聘Python工程师标准>>> 以WebKit为核心的浏览器,例如Safari和Chrome,对HTML5有着很好的支持,在移动平台中这两个浏览器对应的就是i ...
css3制作旋转动画
现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片思路:1.制作之前呢,我们先来 ...
css3 3d旋转图片立方体特效代码
纯 CSS3 3D 旋转立方体动画特效,该 3D 立方体使用 CSS3 perspective 制作,可以在水平方向.垂直方向和平面视角方向旋转,使用 CSS 来制作立方体动画,效果非常好.下面来看看 ...
html魔方转动效果,html5+css3实现旋转魔方的点点滴滴
一.知识点1:touch事件的相关内容 touchstart touchmove touchend 和其他常用事件一样,touch事件中的event对象中有许多非常有用的方法与属性,而且通过jQuer ...
CSS3 3D旋转图片立方体特效
CSS3 3D旋转图片立方体特效代码. 效果图: 这是一个3D的立方体盒子给盒子添加动画属性使其可以转动. 原理: 原理其实很简单我们看到的一个立方体其实就是靠六个平面搭建起来的如图所示 :六 ...
CSS3——3D旋转图（跑马灯效果图）
2019独角兽企业重金招聘Python工程师标准>>> CSS3--3D旋转图(跑马灯效果图) CSS3新增了很多新的属性,可以用很少的代码实现炫酷的动画效果,但由于兼容性各浏览器的 ...
css圆背景,css3圆形旋转背景动画特效
特效描述:css3 圆形旋转背景动画特效.css3 animation和transform属性制作圆形旋转背景动画. 代码结构 1. HTML代码 var followers = document. ...
CSS3实现旋转与放大缩小
CSS3实现旋转与放大缩小开发工具与关键技术:Abobe Dreamweaver 动画旋转与放大缩小作者:李国旭撰写时间:2019年1月26日一. 我们来简单认识一下动画,动画是使元素从一种样 ...

趣味CSS3(一)--旋转的大风车

趣味CSS3(一)--旋转的大风车相关推荐

最新文章

热门文章