css3动画实现摩天轮效果

原谅我不会搞动图看不到效果

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>摩天轮</title><style>*{margin: 0;padding: 0;}.box{width: 500px;height: 500px;margin: 200px auto;position: relative;transform-origin: center;animation: gw 20s infinite linear;}@keyframes gw{from{transform: rotate(0deg);}to{transform: rotate(360deg);}}.box1{width: 130px;height: 170px;position: relative;margin: auto;margin-top: -470px;animation: b 20s infinite linear;transform-origin: top center;}.box2{width: 130px;height: 170px;position: relative;margin: auto;margin-top: 80px;margin-left: 385px;animation: b 20s infinite linear;transform-origin: top center;}.box3{width: 130px;height: 170px;position: relative;margin: auto;margin-top: -100px;margin-left: 20px;animation: b 20s infinite linear;transform-origin: top center;}@keyframes b{from{transform: rotate(0deg);}to{transform: rotate(-360deg);}}</style></head><body><div class="box"><img src="img/fsw.png" width="500px" height="500px"><div class="box1"><img src="img/boy.png" width="120px" height="150px"></div><div class="box2"><img src="img/girl.png" width="120px" height="150px"></div><div class="box3"><img src="img/shamegirl.png" width="120px" height="150px"></div></div></body>
</html>

图片找我要可以，也可以将图片替换成背景色，我这里只是提供一个c3动画思路

css3动画实现摩天轮效果相关推荐

CSS3动画实现高亮光弧效果，循环闪动效果
主要运用css动画进行循环播放,修改css渐变效果元素 <!Doctype html> <html><head><meta name="viewpo ...
css3动画实现吃豆豆效果
css3动画实现吃豆豆效果实现效果: HTML <div class="box"><span></span></div> CSS ...
html摩天轮效果,用CSS3 animation模拟摩天轮旋转动画效果
这次我们来实现一个简单又很有意思的动画效果,完全由CSS 的animation来实现,素材和源码来自于其他网站,个人对源码做了一些改动优化完成后的效果--旋转效果 (github pages打开特别 ...
html摩天轮效果,CSS3 2D模拟实现摩天轮旋转效果
先看效果图: 由于上传的大小原因,只能录制成这种效果,原图是无限循环的转圈. 代码: 模拟摩天轮动画 *{margin:0;padding:0;} .image{width:80px;height:8 ...
前端摩天轮效果实现，鼠标移入停止，移出继续转动。
最近实现了摩天轮的效果,记录下实现原理与过程,备忘,分享. 兼容性不高,IE10,11,Chrome41. 360浏览器(急速模式会有卡顿的感觉) 使用css3+js控制了摩天轮旋转,以及鼠标移入移出 ...
html 鼠标图标做成动画效果,很好看的css3动画按钮鼠标悬停效果【2个实例】
前一篇文章我介绍了5个悬停效果非常漂亮的css3动画按钮实例,本文将再通过2个实例介绍悬停效果很酷的css3实现的动画按钮. 实例一实例一:css3实现的动画按钮我们做一个有星星的圆形按钮!当然, ...
css520.520,30个纯css3动画代码片段和效果演示合集
开源代码已经迎来了一个新的web前端时代.初学者和专家都可以通过使用预构建的代码片段节省时间和压力.下面画廊由30个不同的片段与纯CSS创建动画效果. 所有这些代码片段都放在云IDE平台.这些weba ...
CSS3动画常用贝塞尔曲线-效果演示
CSS与贝塞尔曲线 CSS3动画常用贝塞尔曲线实现更加自然,物理感的动画. demo演示列举了一些常见的贝塞尔曲线数值,用于做动画的存档. .a1{animation: stretch 1s cub ...
html摩天轮效果,用js和纯css分别实现摩天轮效果动画
小弟最近在找工作,刚好今天面试笔试的时候遇到一个题: 大概实现后的效果应该是这样的: 说来惭愧,原来只写过简单的平移和隐藏显示动画,还真没接触过这种动画效果.... 思路: 1.先画一个圆 2.然后将 ...

css3动画实现摩天轮效果

css3动画实现摩天轮效果相关推荐

最新文章

热门文章