H5实现摩天轮

最新推荐文章于 2023-12-10 09:56:34 发布
最新推荐文章于 2023-12-10 09:56:34 发布
阅读量844 收藏 2
点赞数
分类专栏： 控件 文章标签： H5 css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43635798/article/details/103001131
版权

代码：

html:css效果

<head>
	<meta charset="utf-8" />
	<title>幸福摩天轮</title>
	<link rel="stylesheet"  href="css/mtl.css" />
</head>
<body>
	<div>
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	</div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</body>

css:

@charset “utf-8”;

body{
background: url(…/img/2.jpg) no-repeat;
background-size:cover;
}
/匹配div父元素的第n个子元素/
div:nth-child(1){
width: 768px;
height: 768px;
background: url(…/img/fsw.png);
position: absolute;
left: 50%;
/向左移动自身的一半/
margin-left: -384px;
animation: zhuan 15s linear infinite;
}
ul{
list-style: none;

}
li:nth-child(1){
width: 130px;
height: 170px;
background: url(…/img/shamegirl.png);
position: absolute;
left: 50%;
margin-left: 200px;
top: 100px;
animation: renzhuan 15s linear infinite;

}
li:nth-child(2){
width: 130px;
height: 170px;
background: url(…/img/dog.png);
position: absolute;
left: 50%;
margin-left: -300px;
top: 100px;
animation: renzhuan 15s linear infinite;

}
li:nth-child(3){
width: 130px;
height: 170px;
background: url(…/img/boy.png);
position: absolute;
left: 50%;
margin-left: 0px;
top: 0px;
animation: renzhuan 15s linear infinite;

}
li:nth-child(4){
width: 130px;
height: 170px;
background: url(…/img/girls.png);
position: absolute;
left: 50%;
margin-left:170px;
top: 500px;
animation: renzhuan 15s linear infinite;

}
li:nth-child(5){
width: 130px;
height: 170px;
background: url(…/img/mimi.png);
position: absolute;
left: 50%;
margin-left:0px;
top: 650px;
animation: renzhuan 15s linear infinite;

}
div:nth-child(2){
width: 247px;
height: 490px;
background: url(…/img/bracketsmall.png);
position: absolute;
left: 50%;
margin-left: -126px;
top: 387px;
/设置在后面/
z-index: -1;

}
div:nth-child(3){
width: 358px;
height: 529px;
background: url(…/img/bracket.png);
position: absolute;
left: 50%;
margin-left: -182px;
top: 380px;

}
div:nth-child(4){

width: 577px;
height: 257px;
background: url(../img/big-title.png);
position: absolute;
left: 50%;
margin-left: -250px;
top: 250px;

}
div:nth-child(5){

width: 413px;
height: 139px;
background: url(../img/title.png);
position: absolute;
left: 50%;
margin-left: -140px;
top: 440px;

}

@keyframes zhuan {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

@keyframes renzhuan {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}

效果：

在这里插入图片描述

YY设计
关注
专栏目录
简单html摩天轮动画效果,HTML5 摩天轮动画
weixin_35231842的博客
06-07 1948
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...
html摩天轮效果,用CSS3 animation模拟摩天轮旋转动画效果
weixin_39805087的博客
06-04 713
这次我们来实现一个简单又很有意思的动画效果，完全由CSS 的animation来实现，素材和源码来自于其他网站，个人对源码做了一些改动优化完成后的效果——旋转效果 (github pages打开特别慢，要等一下)主要的方法由三步组成：1、让背景图片在十秒内完成360度旋转，模拟出摩天轮的旋转效果；2、将三张人物图片定位在背景图上，随背景转动；3、为三张图片额外创建一个animation，让人物图片...
H5实现摩天轮转动效果
11-16
摩天轮转动JQuery动画实现，前端css样式设计，小人儿跟着摇摆的效果。内附H5代码，css样式,js效果，以及图片。
H5实现摩天轮转动
qq_43635798的博客
11-10 2477
代码： html: 幸福摩天轮 css: @charset “utf-8”; body{ background: url(…/img/2.jpg) no-repeat; background-size:cover; } /匹配div父元素的第n个子元素/ di...
html摩天轮效果,CSS3 2D模拟实现摩天轮旋转效果
weixin_33404102的博客
06-04 432
先看效果图：由于上传的大小原因，只能录制成这种效果，原图是无限循环的转圈。代码：模拟摩天轮动画*{margin:0;padding:0;}.image{width:80px;height:80px;}.image1{width:620px;height:620px;}.div1{position:relative;margin:10px auto;width:638px;animation:run...
html摩天轮小案例
qq_51704382的博客
11-05 933
摩天轮小案例
新建文件夹 (5)_摩天轮动态_MML_
10-02
然后，通过定时器（如requestAnimationFrame）来定期更新画面，实现摩天轮的旋转动画。可能还涉及到CSS3的transform和transition属性，以增强视觉体验。 此外，如果MML是一种特定的编程模式或语法，那么它可能是...
H5，小程序游乐场销售源码
01-03
1. **游乐场**：游乐场通常包括各种娱乐设施，如旋转木马、摩天轮、过山车等，是休闲娱乐的重要场所。在这个上下文中，游乐场是指需要进行售票和管理的实体。 2. **源码**：源码是程序员用高级语言编写的原始代码，...
摩天楼HTML5游戏源码
06-23
HTML5是超文本标记语言的最新版本，它引入了许多新特性，增强了网页的多媒体功能、离线存储能力以及对图形和动画的支持，使得在浏览器上实现复杂的交互式游戏成为可能。 此游戏源码的运行需要服务器环境，这是因为...
用Html写的旋转的摩天轮
嗟鸠食桑
12-14 3637
Html5的摩天轮 摩天轮在转动的同时,上面的小孩也会跟着变动位置但不会旋转, 原理就是摩天轮顺时针旋转,小孩要同时逆时针旋转 胳膊太疼了 小孩的定位都是用最古老的方法加上去的 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;摩天轮&lt;/titl..
旋转的摩天轮 html源码
07-16
这是一个会旋转的摩天轮界面，使用html、js 、css编写而成，动画流畅。
用html和css为女朋友做了个幸福摩天轮，她很开心，我很骄傲
01-08
根据这段时间的博客访问量来看，我判断出写一些小玩意非常受欢迎，那也就是说，有很多人喜欢这些东西，写这个东西能帮助到一部分人，无论他们是拿来学习也好，做一个送人也好，都是有意义的。由此推出，我并不是为了那些可有可无的访问量来的。 原创文章 104获赞 1731访问量 32万+ 关注 私信 展开阅读全文 作者
html制作摩天轮,LED幻彩摩天轮的制作方法
weixin_33428129的博客
06-17 1653
本实用新型涉及桌面摆件技术领域，具体涉及LED幻彩摩天轮。背景技术：LED幻彩灯以其变化多端，装饰灯光美观的优点，越来越多的得到广大使用者的喜爱。技术实现要素：本实用新型的目的是提供LED幻彩摩天轮，通过将LED幻彩灯与摩天轮这一建筑结构向结合，并设置音乐频谱、流水灯动画特效以及灯光变换，在旋转产生美轮美奂的视觉效果。为解决上述技术问题，本实用新型采用如下技术方案：LED幻彩摩天轮，包括底座、对称...
Html+Css3实现一个摩天轮特效
weixin_45932157的博客
03-10 755
<!doctype html> <html> <head> <meta charset="utf-8"> <title>标题</title> <meta name="keywords" content=""> <meta name="description" content=""> <style> body{ background: url(./mtlImg/2.jpg) no-r
实训日记（一）html5 css 实现摩天轮
qq_45691585的博客
07-21 703
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body{ background: url(./images/2.jpg) no-repeat; /*背景*/ z-index: -1; } /*旋转轮子和小车是相反的*/ @keyframes zhuan.
html5摩天轮,JS实现摩天轮抽奖
weixin_36015177的博客
06-23 520
这次给大家带来JS实现摩天轮抽奖，JS实现摩天轮抽奖的注意事项有哪些，下面就是实战案例，一起来看一下。效果图：图片素材 ：代码如下，复制即可使用：幸运抽奖页面/*CSS代码*/*{padding:0;margin:0;}.login-box{width:500px;height:430px;/* border:1px solid red;*//*水平居中*/margin:100px auto;ba...
摩天轮主题大学生网页设计作业html网页制作课程设计模版5页带js滚动特效
最新发布
qq_55819908的博客
12-10 426
这是一个介绍摩天轮的网页制作作业成品，用dreamweaver制作html静态网页，应用div+css布局，页面中加入了框架结构，一共7个网页，包括2个框架页面，网页中还加入了js图文滚动的动态特效，使网页更生动。这个网页适合网页制作初学者，简单大气。包含元素：文字、图片、css、html、js图文滚动、框架。div+css摩天轮学生网页设计作业成品。制作工具：Dreamweaver。页面数量：5页+2页框架。网页布局：div+css。
运用css和Html动画实现会动的摩天轮
liuwenjie_的博客
10-13 3280
摩天轮效果图如下： html布局如下 css样式如下： * { margin: 0; padding: 0; } body, html { height: 100%; } body { background: url(images/2.jpg) no-repeat; background-size: 100% 100%; } img
前端HTMl摩天轮展示
阿拉斯加头头的博客
09-19 1834
前端HTMl摩天轮展示 效果图演示： 主要函数： transform函数： -360度是指逆时针旋转360度 transform: rotate(-360deg); 绝对定位： 绝对定位是找到自己的拥有定位的父级节点位置，父级没有就继续向上，最后都没有就默认body position: absolute; top: 82px; left: 70px; 相对定位： 跟绝对定位是绝配 position: relative; 代码： <!DOCTYPE html> <html la
uniapp h5实现文件下载
11-25
在uniapp中实现H5文件下载可以通过以下步骤： 1. 创建一个按钮或者其他触发下载的UI元素，给它绑定一个点击事件，当用户点击这个按钮时可以触发文件下载操作。 2. 在点击事件的处理函数中，使用uniapp提供的api来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值