利用CSS3动画制作摩天轮

本篇文章向大家介绍利用CSS3动画制作摩天轮旋转特效，代码很简单，还不赶紧学起来，发给你的小朋友看看吧!

运行效果：

代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.wrapper{background: url(img/bg.jpg);}.box{width:768px ;margin: 0 auto;animation:name 20s linear infinite ;position: relative;transform-origin: center;}@keyframes name{from{transform: rotate(0);}to{transform: rotate(360deg);}}.box img:nth-of-type(2){position: absolute;top: 70px;left:60px;animation:name 20s linear infinite  reverse;}.box img:nth-of-type(3){position: absolute;top: 70px;right:60px;animation:name 20s linear infinite  reverse;}</style></head><body><div class="wrapper"><div class="box"><img src="img/fsw.png" ><img src="img/1.png" ><img src="img/2.png" ></div></div></body>
</html>

图片素材：

超简单吧，赶紧保存下来试试吧！

如有疑惑请留言或私信!

利用CSS3动画制作摩天轮相关推荐

利用CSS3动画制作“百度浏览器”官网奔跑的北极熊
现在各大浏览器的官网是越做越炫酷了.比如百度浏览器官网,虽然我不用这个浏览器呢(只用原版Chrome,不为其他,只因国内换壳的浏览器内核版本太低,跟Chrome官方始终有差距).但是不得不佩服百度的设 ...
利用CSS3动画效果制作照片墙
[效果] 纯CSS3制作动态照片墙 [原理] HTML页面中写一个盒子,盒子里面放10张图片.让这10张图片,随意摆放(给图片设置旋转角度和在盒子中的所处位置),再利用CSS3动画的技术,对这10张图 ...
动漫风html源码,CSS3动画制作一个卡通风格的404错误页面代码
CSS3动画制作一个卡通风格的404错误页面代码(有动画效果) html> Css 404错误页 .error-container { text-align: center; font-size ...
5分钟教你利用css3动画实现奔跑的北极熊效果
实现原理:利用css3动画中的animation-timing-function的steps(),让一张有连续动作图片一段一段的在页面上显示出来,从而实现动画效果. 1.需要素材: 2.准备一个div ...
利用CSS3动画让图片动起来
利用CSS3动画让图片动起来原材料:一张png图片实现原理:利用了两个动画bear.move,bear动画让小熊奔跑起来,就是通过控制背景图片的位置让每张小熊图片依次闪过,从而看上去就像跑起来一样 ...
CSS3动画制作的旋转风车，大家五一节日快乐
✅作者简介: 大家好五一快乐,我是痴心阿文,你们的学友哥,今天给大家分享一个CSS3动画制作的旋转风车!
使用CSS3动画制作导航菜单
使用CSS3动画制作导航菜单 1.使用定位属性把图片"赚"和"花"设置到相对应的位置上 2.使用animation属性给中间的"赚"和&qu ...
制作 JS 广告的简易入门（二）利用 CSS3 技术制作广告
HTML5 Family: CSS3 Ads Versus Flash Ads http://www.sencha.com/blog/html5-family-css3-ads-versus-flas ...
css3动画制作转动相册
一.CSS3 动画 CSS3 可以创建动画,它可以取代许多网页动画图像.Flash 动画和 JavaScript 实现的效果. 1.CSS3 @keyframes 规则要创建 CSS3 动画,你需要 ...

利用CSS3动画制作摩天轮

利用CSS3动画制作摩天轮相关推荐

最新文章

热门文章