布局(html代码块)

<body><div class="box"><div class="pic1"><img src="./images/boy.png"/></div><div class="pic2"><img src="./images/girl.png"/></div><div class="pic3"><img src="./images/shamegirl.png"/></div></div></body>

css样式

*{margin:0px;padding:0px;
}
/*给box设置摩天轮背景图*/
.box{width:768px;height:768px;background-image:url(./images/fsw.png);margin:20px auto;/*设置摩天轮动画*/animation:rotate 10s linear infinite; position:relative;
}
.pic1,.pic2,.pic3{width:130px;height:170px;position:absolute;/*设置三个小人动画*/animation:rotate1 10s linear infinite;
}
.pic1{top:300px;left:650px;
}
.pic2{top:120px;left:40px;
}
.pic3{top:570px;left:200px;
}
/*摩天轮的关键帧*/
@keyframes rotate{from{transform:rotate(0deg);}to{transform:rotate(360deg);}
}
/*三个小人的关键帧*/
@keyframes rotate1{from{transform:rotate(0deg);}to{transform:rotate(-360deg);}
}

代码中用到的图片

效果图

纯css摩天轮旋转动画相关推荐

简单html摩天轮动画效果,2D模拟实现摩天轮旋转动画特效
这次给大家带来2D模拟实现摩天轮旋转动画特效,使用2D模拟实现摩天轮旋转动画特效的注意事项有哪些,下面就是实战案例,一起来看一下. 先看效果图: 由于上传的大小原因,只能录制成这种效果,原图是无限循环 ...
html摩天轮效果,用CSS3 animation模拟摩天轮旋转动画效果
这次我们来实现一个简单又很有意思的动画效果,完全由CSS 的animation来实现,素材和源码来自于其他网站,个人对源码做了一些改动优化完成后的效果--旋转效果 (github pages打开特别 ...
纯css 图片自动旋转动画
css能否实现图片自动旋转动画呢?答案当然是肯定的, 首先看下效果: HTML代码 <img src="https://gimg2.baidu.com/image_search/src ...
实现按钮边框动画+摩天轮旋转动画+水印实现
如何实现呢? 首先就是分析如何将这6个图片分布成该方式,那我们就需要将6张图片设置水平垂直居中,然后计算出x,y轴坐标,然后移动到相应位置. 动画效果,只需将父盒子使用css3 animation动画 ...
用css3实现摩天轮旋转的动画效果
用css3实现摩天轮旋转的动画效果 1.CSS3 @keyframes 规则如需在 CSS3 中创建动画,您需要学习 @keyframes 规则. @keyframes 规则用于创建动画.在 @ke ...
纯CSS制作3D旋转风车动画效果
效果图展示 HTML源码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"&g ...
纯CSS实现轮播图（结合动画）
图片自动切换实现原理:使用一个div(class="out")并设置溢出隐藏保证每次只显示一张,在内部设置另一个div.outer包裹所有的图片,图片均水平排列,包裹图片的div使 ...
怎样实现banner自动播放html,纯css实现轮播图banner自动轮换效果
话不多说直接上代码 * { margin: 0; padding: 0; } .container { margin:300px auto; height: 400px; width: 1146px ...
c语言实现图片轮播,纯css实现轮播图
轮播图的实现原理其实是比较简单的举个例子 main的宽度是100px div-main的宽度是500px 我们用js控制div-main往左或往右移动,这样就实现了轮播,简单把好了,先介绍个 cs ...

纯css摩天轮旋转动画

布局(html代码块)

css样式

代码中用到的图片

效果图

纯css摩天轮旋转动画相关推荐

最新文章

热门文章