CSS3 摩天轮旋转特效

最新推荐文章于 2023-03-28 20:24:45 发布

月薪不过5000不改名

最新推荐文章于 2023-03-28 20:24:45 发布

阅读量479

点赞数

文章标签： css3 css html5

本文链接：https://blog.csdn.net/Infatuatedmonkey/article/details/124955413

版权

1.效果图
摩天轮
2.案例分析

这各效果分别由两部分组成:摩天轮和小朋友。
摩天轮作为div(居中显示)的背景图片
小朋友是通过定位定在指定位置的
通过css3 动画animation与transform属性中的rotate配合实现转动
问题:当摩天轮旋转时小朋友会跟着旋转，正常小朋友自己视觉效果是不会转动的
解决只需要让摩天轮顺时针转动，小朋友逆时针转动，时间相同，速度相同就可以产生相对静止的效果。

3.源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>CSS3 摩天轮旋转特效</title>
		<style>
			/* 防止抖动 */
			body{
				overflow: hidden;
			}
			/* 让整个盒子居中 */
			.bigBox{
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				width: 700px;
				height: 700px;
				background-image: url(img/ferriswheel.png);
				background-size: cover;
				animation: rotate 10s linear infinite;
			}
			/* 分别设置三个小朋友的位置 */
			.bigBox img{
				width: 300px;
				height: 300px;
				position: absolute;
				animation:  rotateChild 10s linear infinite;
			}
			.bigBox img:nth-child(1){
				top: -100px;
				left: 200px;
			}
			.bigBox img:nth-child(2){
				bottom: 100px;
				left: 0;
			}
			.bigBox img:nth-child(3){
				bottom: 100px;
				right: 0;
			}
			
			@keyframes rotate {
				form{transform: rotate(0);}
				to{transform: rotate(360deg);}
			}
			@keyframes rotateChild {
				form{transform: rotate(0);}
				to{transform: rotate(-360deg);}
			}
		</style>
	</head>
	<body>
		<div class="bigBox">
			<img src="img/item1.png">
			<img src="img/item2.png">
			<img src="img/item3.png">
		</div>
	</body>
</html>

每天一个前端小案例！！！

月薪不过5000不改名

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS3 摩天轮旋转特效

1.效果图2.案例分析这各效果分别由两部分组成:摩天轮和小朋友。摩天轮作为div(居中显示)的背景图片小朋友是通过定位定在指定位置的通过css3 动画animation与transform属性中的rotate配合实现转动问题:当摩天轮旋转时小朋友会跟着旋转，正常小朋友自己视觉效果是不会转动的解决只需要让摩天轮顺时针转动，小朋友逆时针转动，时间相同，速度相同就可以产生相对静止的效果。3.源码<!DOCTYPE html><html> <head>
复制链接

扫一扫