css33d摩天轮动画

news/2024/11/7 18:35:43/

摩天轮代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>*{margin: 0;padding: 0;}html,body{height:100%;}body{background: url("img3/2.jpg")no-repeat;background-size:100% 100%;overflow:hidden;}.box{width:620px;height:520px;background:url(img3/bracket.png)no-repeat center bottom;position:fixed;left:0;right:0;bottom:-140px;margin:auto;                }.box img:nth-child(1){position:absolute;top:-380px;left:-73px;animation:move1 60s linear infinite;}.box img:nth-child(2){position:absolute;top:-134px;left:30px;}.box2{width: 768px;height: 768px;position:fixed;top:0px;left:0px;bottom:0px;right:0px;margin:auto;animation:move1 60s linear infinite;}.box2 img{position:absolute;animation:move2 60s linear infinite;transform-origin:50% 0;}.box2 img:nth-child(1){top:40px;left:324px;}.box2 img:nth-child(2){top:132px;right:88px;}.box2 img:nth-child(3){top:380px;right:-25px;}.box2 img:nth-child(4){bottom:-30px;right:86px;}.box2 img:nth-child(5){bottom:-127px;right:306px;}.box2 img:nth-child(6){bottom:-27px;left:75px;}.box2 img:nth-child(7){bottom:215px;left:0px;}.box2 img:nth-child(8){top:144px;left:80px;}@keyframes move1{0%{transform:rotate(0deg);}50%{transform:rotate(180deg);}100%{transform:rotate(360deg);}}@keyframes move2{0%{transform:rotate(0deg);}50%{transform:rotate(-180deg);}100%{transform:rotate(-360deg);}}</style></head><body><div class="box"><img src="img3/fsw.png" alt="" /><img src="img3/big-title.png" alt="" /></div><div class="box2"><img src="img3/boy.png"/><img src="img3/girl.png"/><img src="img3/girls.png"/><img src="img3/hairboy.png"/><img src="img3/mimi.png"/><img src="img3/mudog.png"/><img src="img3/dog.png"/><img src="img3/mudog.png"/></div></body>
</html>

在这里插入图片描述


http://www.ppmy.cn/news/911178.html

相关文章

【力扣1599】 经营摩天轮的最大利润

你正在经营一座摩天轮&#xff0c;该摩天轮共有 4 个座舱 &#xff0c;每个座舱 最多可以容纳 4 位游客 。你可以 逆时针 轮转座舱&#xff0c;但每次轮转都需要支付一定的运行成本 runningCost 。摩天轮每次轮转都恰好转动 1 / 4 周。 给你一个长度为 n 的数组 customers &…

摩天大楼

Problem:摩天大楼 Description: 随着科技的发展&#xff0c;某国家准备修建一座高楼&#xff0c;高度为n&#xff08;n<1e18&#xff09;&#xff0c;来展现他们国家的强大国力&#xff0c;他们国家有两支强大的施工队&#xff0c;国家于是把修建计划给了这两只施工队&…

css3实现摩天轮特效

css3效果摩天轮 效果图html代码css3代码完整代码 效果图 html代码 <div class"box"><div class"wheel"><ul><li></li><li></li><li></li><li></li><li></li><li>&l…

LC-1599. 经营摩天轮的最大利润(贪心)

1599. 经营摩天轮的最大利润 难度中等39 你正在经营一座摩天轮&#xff0c;该摩天轮共有 4 个座舱 &#xff0c;每个座舱 最多可以容纳 4 位游客 。你可以 逆时针 轮转座舱&#xff0c;但每次轮转都需要支付一定的运行成本 runningCost 。摩天轮每次轮转都恰好转动 1 / 4 周。…

LeetCode 1599. 经营摩天轮的最大利润

【LetMeFly】1599.经营摩天轮的最大利润 力扣题目链接&#xff1a;https://leetcode.cn/problems/maximum-profit-of-operating-a-centennial-wheel/ 你正在经营一座摩天轮&#xff0c;该摩天轮共有 4 个座舱 &#xff0c;每个座舱 最多可以容纳 4 位游客 。你可以 逆时针 轮…

前端HTMl摩天轮展示

前端HTMl摩天轮展示 效果图演示&#xff1a; 主要函数&#xff1a; transform函数&#xff1a; -360度是指逆时针旋转360度 transform: rotate(-360deg);绝对定位&#xff1a; 绝对定位是找到自己的拥有定位的父级节点位置&#xff0c;父级没有就继续向上&#xff0c;最后都…

巴黎没有摩天轮

巴黎没有摩天轮(穷忙时代最触动内心的超人气畅销书&#xff0c;在职场中面对自己&#xff0c;在「摩天轮」里贴近爱情) 内容简介 有一种人生&#xff0c;叫做“摩天轮”&#xff1a;你始终站在观光舱里透过玻璃看风景&#xff0c;即使转到最高点&#xff0c;即使无限接近&#…

【八月】摩天轮的眼泪

The only person in the world who can safely depend on for life is the one in the mirror, the one who has experienced setbacks but is still strong 这世上唯一能够放心依赖终生的那个人 就是镜子里的那个你 那个历经挫折却依旧坚强的你 ​ ​​​​ Read well durin…