css3实现摩天轮特效

最新推荐文章于 2024-05-14 06:49:48 发布
最新推荐文章于 2024-05-14 06:49:48 发布
阅读量1.5k 收藏 3
点赞数 3
文章标签： html css js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45378970/article/details/108913315
版权

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>
是小王啊i
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
简单html摩天轮动画效果,HTML5 摩天轮动画
weixin_35231842的博客
06-07 1918
CSS语言：CSSSCSS确定/* Rotation angle for the current item *//* Angle between two items */body {background: white;}.point-group {-webkit-animation: rotateGroup 5s linear 1.2s infinite;animation: rotateGrou...
动画-实现一个摩天轮
weixin_52249641的博客
11-22 1312
实现一个摩天轮效果1.全部代码2.添加图片3.定义动画4.调用动画 1.全部代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ background: url("./img/2.jpg"); }
2024年最新Matlab 使用笔记（本人出品，必属精品）_摩天轮社区(1)，2024年最新物联网嵌入式开发开发人员不得不收集的代码
最新发布
2401_85011985的博客
05-14 1180
元胞元胞数组是对常规的数值数组的扩展， 其每一个元素称为一个元胞(cell)， 每一个元胞中可以存储任意类型、任意尺寸的数据。与数值数组一样， 元胞数组维数不受限制， 可以是一维、 二维或更高维。元胞数组对元胞的索引方法也分单下标和全下标两种。对于元胞数组，元胞和元胞里的内容是两个不同范畴(或者说不同层次)的概念。如果把元胞数组比着一个柜子，那么，元胞就是柜子上的抽屉，元胞里的内容则是抽屉里存放的东西。结果：结构体结构体就不用赘述了，其他编程语言中经常用到。
如何搭建自己的ip池
wq10_12的博客
05-26 2085
购买代理ip来搭建代理池，虽然要付出一定的成本，但相对于购买服务器还是更实惠的，但毕竟购买的代理ip是共享ip池出来的，在使用过程中，还是会受到一定的限制，比如单次提取多少，提取一次之后需要等待多久进行下一次提取等。就是去网上找免费的代理ip，然后全部收集到自己的代理ip池里面在进行使用，虽然减少了购买代理ip的成本，但是网上的免费代理ip没有人维护，而且谁都可以使用，所以在使用的时候，真正可以使用的或许并没有多少，适合新手练手但不适合用来工作。下面我们来介绍几个方法。2、购买代理ip，搭建代理ip池。
利用CSS3动画制作摩天轮
qq_46362763的博客
03-21 1125
利用CSS3动画制作摩天轮旋转特效，代码很简单，还不赶紧学起来，发给你的小朋友看看吧
html摩天轮小案例
qq_51704382的博客
11-05 886
摩天轮小案例
CSS3实现摩天轮动画特效
08-23
我们可以利用CSS3技术可以在网页上绘制任何东西，并且可以制作一些简单的动画。这次分享了一个用CSS3实现的摩天轮动画特效，摩天轮上悬挂着几个座位，几个小朋友坐在里面，摩天轮不断地旋转着，动画效果非常逼真。
简易摩天轮旋转css3特效
04-25
【简易摩天轮旋转css3特效】是一种利用现代Web技术，特别是GSAP（GreenSock Animation Platform）和CSS3，创建的交互式动画效果。这个特效主要用于网页设计，为用户提供一个卡通风格的摩天轮旋转展示，增加了网站的...
简易摩天轮旋转css3特效.zip
10-10
这个压缩包包含的是一个使用CSS3实现的摩天轮旋转特效的代码资源。CSS3是层叠样式表（Cascading Style Sheets）的第三版，它引入了许多强大的新特性，如动画（Animations）、过渡（Transitions）和2D/3D变换...
纯CSS3模拟摩天轮旋转动画效果特效代码
03-20
【纯CSS3模拟摩天轮旋转动画效果特效代码】是一个利用CSS3的强大功能来创建一个动态的、逼真的摩天轮旋转效果的实例。在现代网页设计中，CSS3不仅提供了丰富的样式设置，还引入了动画和过渡效果，使得开发者能够无需...
纯css3实现带旋转效果的摩天轮动画特效源码.zip
11-20
【纯CSS3实现带旋转效果的摩天轮动画特效源码】是一种利用现代浏览器支持的CSS3技术来创建动态、视觉吸引人的动画效果的方法。在本案例中，开发者通过CSS3的属性和选择器，无需JavaScript或其他编程语言，就能实现一...
摩天楼HTML5游戏源码
06-23
摩天楼HTML5游戏源码，运行需要服务器环境，已经反复测试，放心使用。
H5实现摩天轮转动效果
11-16
摩天轮转动JQuery动画实现，前端css样式设计，小人儿跟着摇摆的效果。内附H5代码，css样式,js效果，以及图片。
自建一个小型的ip代理池-适合新人练手入门
02-07
自建一个小型的ip代理池呢 结合博客网址学习：https://blog.csdn.net/qq_33125039/article/details/82229277
Demo使用骨骼动画和物理引擎制作摩天轮动画cocosCreator.zip
11-27
cocosCreator使用骨骼动画和物理引擎制作摩天轮动画，初级教程，文图教程链接：https://www.jianshu.com/p/5e0c31e6cca2
前端HTMl摩天轮展示
阿拉斯加头头的博客
09-19 1780
前端HTMl摩天轮展示 效果图演示： 主要函数： transform函数： -360度是指逆时针旋转360度 transform: rotate(-360deg); 绝对定位： 绝对定位是找到自己的拥有定位的父级节点位置，父级没有就继续向上，最后都没有就默认body position: absolute; top: 82px; left: 70px; 相对定位： 跟绝对定位是绝配 position: relative; 代码： <!DOCTYPE html> <html la
自建代理IP池管理系统
09-29
数据时代，数据最贵，爬虫是最需要掌握的技术之一，代理IP则是爬虫最大的代价。自建代理IP池管理系统，自己来掌控代理IP，物尽其用，节约成本，还可以抓取公开、免费的代理IP放入系统中，供自己使用。
用css3实现摩天轮旋转的动画效果
TianBangbaba的博客
02-22 1919
用css3实现摩天轮旋转的动画效果 1.CSS3 @keyframes 规则 如需在 CSS3 中创建动画，您需要学习 @keyframes 规则。 @keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。 2.什么是 CSS3 中的动画 动画是使元素从一种样式逐渐变化为另一种样式的效果。 您可以改变任意多的样式任意多...
如何构建自己的IP代理池
你呢的博客
08-24 1382
在学习爬虫的过程中，肯定遇到过被封IP的问题，这个时候我们就需要去用代理来帮我们完成爬取任务，然而，爬着爬着又被封了，好，再换一个代理，一会过后又封了。这种情况有两种方法来解决 方法一：对我们的爬虫进行限速，使爬取速度接近人工访问的速度 方法二：使用代理池 在这里只说明一下代理池，我们可以使用西刺的免费代理，将其爬取下来存在数据库中，这样只需要在每次爬取的时候从数据库中取一个IP就可以了 下面是从...
CSS3实现边框线条动画特效
05-27
可以使用CSS3中的transition和transform属性来实现边框线条动画特效。以下是一个示例代码： ```html <div class="box"></div> ``` ```css .box { width: 200px; height: 200px; border: 2px solid #333; ...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值