css3实现摩天轮特效

css3效果摩天轮

效果图
html代码
css3代码
完整代码

效果图

html代码

<div class="box"><div class="wheel"><ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></div><div class="bracket"></div><div class="bracketsmall"></div><div class="bigtitle"></div><div class="title"></div><div class="arrow"></div></div>

css3代码

<style>*{margin:0px;padding: 0px;}body{background: url("images/2.jpg");background-size: cover;background-position: center center;}.box{/*border:solid 1px red;*/width: 1000px;height: 1000px;margin:0px auto;position: relative;}.wheel{background: url("images/fsw.png");height:768px;width: 768px;margin: 0px auto;-webkit-animation:wheelrotation 10s linear infinite;position: relative;}.bracket{width: 358px;height: 529px;background: url("images/bracket.png");position: absolute;left:318px;top:375px;}.bracketsmall{width: 247px;height: 505px;background: url("images/bracketsmall.png");position: absolute;left:375px;top:382px;z-index:-2;}.bigtitle{width: 577px;height: 257px;position: absolute;left: 212px;top: 269px;background-image: url("images/big-title.png");}.title{width: 413px;height: 139px;position: absolute;left: 306px;top: 464px;background-image: url("images/title.png");}.arrow{width: 48px;height: 64px;position: absolute;left: 482px;top: 550px;background-image: url("images/arrow.png");}ul{list-style: none;}li{height:170px;width: 130px;position: absolute;-webkit-animation:childrotation 10s linear infinite;-webkit-transform-origin:50% 0;}li:nth-child(1){background: url("images/boy.png");left: 330px;top:0px;}li:nth-child(2){background: url("images/dog.png");left: 594px;top:125px;}li:nth-child(3){background: url("images/girl.png");left: 694px;top:370px;}li:nth-child(4){background: url("images/girls.png");left: 594px;top:650px;}li:nth-child(5){background: url("images/hairboy.png");left: 330px;top:740px;}li:nth-child(6){background: url("images/mimi.png");left: 94px;top:640px;}li:nth-child(7){background: url("images/mudog.png");left: -6px;top:370px;}li:nth-child(8){background: url("images/shamegirl.png");left: 94px;top:125px;}@-webkit-keyframes wheelrotation{0%{-webkit-transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);}}@-webkit-keyframes childrotation{0%{-webkit-transform:rotate(0deg);}100%{-webkit-transform:rotate(-360deg);}}</style>

完整代码

<html>
<head><title>旋转摩天轮</title><meta charset="utf-8"/><style>*{margin:0px;padding: 0px;}body{background: url("images/2.jpg");background-size: cover;background-position: center center;}.box{/*border:solid 1px red;*/width: 1000px;height: 1000px;margin:0px auto;position: relative;}.wheel{background: url("images/fsw.png");height:768px;width: 768px;margin: 0px auto;-webkit-animation:wheelrotation 10s linear infinite;position: relative;}.bracket{width: 358px;height: 529px;background: url("images/bracket.png");position: absolute;left:318px;top:375px;}.bracketsmall{width: 247px;height: 505px;background: url("images/bracketsmall.png");position: absolute;left:375px;top:382px;z-index:-2;}.bigtitle{width: 577px;height: 257px;position: absolute;left: 212px;top: 269px;background-image: url("images/big-title.png");}.title{width: 413px;height: 139px;position: absolute;left: 306px;top: 464px;background-image: url("images/title.png");}.arrow{width: 48px;height: 64px;position: absolute;left: 482px;top: 550px;background-image: url("images/arrow.png");}ul{list-style: none;}li{height:170px;width: 130px;position: absolute;-webkit-animation:childrotation 10s linear infinite;-webkit-transform-origin:50% 0;}li:nth-child(1){background: url("images/boy.png");left: 330px;top:0px;}li:nth-child(2){background: url("images/dog.png");left: 594px;top:125px;}li:nth-child(3){background: url("images/girl.png");left: 694px;top:370px;}li:nth-child(4){background: url("images/girls.png");left: 594px;top:650px;}li:nth-child(5){background: url("images/hairboy.png");left: 330px;top:740px;}li:nth-child(6){background: url("images/mimi.png");left: 94px;top:640px;}li:nth-child(7){background: url("images/mudog.png");left: -6px;top:370px;}li:nth-child(8){background: url("images/shamegirl.png");left: 94px;top:125px;}@-webkit-keyframes wheelrotation{0%{-webkit-transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);}}@-webkit-keyframes childrotation{0%{-webkit-transform:rotate(0deg);}100%{-webkit-transform:rotate(-360deg);}}</style>
</head>
<body><div class="box"><div class="wheel"><ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></div><div class="bracket"></div><div class="bracketsmall"></div><div class="bigtitle"></div><div class="title"></div><div class="arrow"></div></div>
</body>
</html>

css3实现摩天轮特效相关推荐

用css3实现摩天轮旋转的动画效果
用css3实现摩天轮旋转的动画效果 1.CSS3 @keyframes 规则如需在 CSS3 中创建动画,您需要学习 @keyframes 规则. @keyframes 规则用于创建动画.在 @ke ...
CSS3 摩天轮旋转特效
1.效果图 2.案例分析这各效果分别由两部分组成:摩天轮和小朋友. 摩天轮作为div(居中显示)的背景图片小朋友是通过定位定在指定位置的通过css3 动画animation与transform属 ...
简单html摩天轮动画效果,2D模拟实现摩天轮旋转动画特效
这次给大家带来2D模拟实现摩天轮旋转动画特效,使用2D模拟实现摩天轮旋转动画特效的注意事项有哪些,下面就是实战案例,一起来看一下. 先看效果图: 由于上传的大小原因,只能录制成这种效果,原图是无限循环 ...
html摩天轮效果,用CSS3 animation模拟摩天轮旋转动画效果
这次我们来实现一个简单又很有意思的动画效果,完全由CSS 的animation来实现,素材和源码来自于其他网站,个人对源码做了一些改动优化完成后的效果--旋转效果 (github pages打开特别 ...
html摩天轮效果,CSS3 2D模拟实现摩天轮旋转效果
先看效果图: 由于上传的大小原因,只能录制成这种效果,原图是无限循环的转圈. 代码: 模拟摩天轮动画 *{margin:0;padding:0;} .image{width:80px;height:8 ...
很哇塞的网页特效之摩天轮相册
情人节到了,给大家分享一个仿摩天轮效果的相册页面,效果如下图: 页面主要部分是图片列表,使用div包裹: <div class="carousel-item">< ...
css3动画实现摩天轮效果
原谅我不会搞动图看不到效果 <!DOCTYPE html> <html><head><meta charset="utf-8">&l ...
html5 banner特效,HTML5特效库 CSS3遮罩banner动画特效源码
效果图各位朋友.大家早上好! 今天给大家带来的是 CSS3遮罩banner动画特效源码! 看倦的轮播图的,可以试试这个特效!别有一番意思! 大家可以按照自己的意愿进行行修改,改成自己喜欢的样子! 有 ...
html图片轮播思路,css3如何实现轮播图？css3实现轮播图片的方法
我们在网页上经常会看到有一块位置会有很多的图片来回切换,这就是轮播图,轮播图的出现,让重要的信息可以在一个位置显现,那么,轮播图是如何实现的呢?轮播图的实现用js或者css都可以,本篇文章就来给大家介 ...

css3实现摩天轮特效

css3效果摩天轮

效果图

html代码

css3代码

完整代码

css3实现摩天轮特效相关推荐

最新文章

热门文章