2D模擬實現摩天輪旋轉動畫特效
這次帶給大家2D模擬實現摩天輪旋轉動畫特效，使用2D模擬實現摩天輪旋轉動畫特效的注意事項有哪些，下面就是實戰案例，一起來看一下。
先看效果圖：
由於上傳的大小原因，只能錄製成這種效果，原圖是無限循環的轉圈。
程式碼：
<span style="font-size:18px;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>模拟摩天轮动画</title>
<style>
*{margin:0;padding:0;}
.image{width:80px;height:80px;}
.image1{width:620px;height:620px;}
.p1{position:relative;margin:10px auto;width:638px;
animation:run 20s linear infinite;
-webkit-animation:run 20s linear infinite;
-moz-animation:run 20s linear infinite;
-o-animation:run 20s linear infinite;
}
img:nth-child(2){
position:absolute;top:25px;left:270px;opacity:0.7;
animation:run2 20s linear infinite;
-webkit-animation:run2 20s linear infinite;
-moz-animation:run2 20s linear infinite;
-o-animation:run2 20s linear infinite;
transform-origin:top center;
-webkit-transform-origin:top center;
-moz-transform-origin:top center;
-o-transform-origin:top center;
}
img:nth-child(3){
position:absolute;top:580px;left:270px;opacity:0.7;
animation:run2 20s linear infinite;
-webkit-animation:run2 20s linear infinite;
-moz-animation:run2 20s linear infinite;
-o-animation:run2 20s linear infinite;
transform-origin:top center;
-webkit-transform-origin:top center;
-moz-transform-origin:top center;
-o-transform-origin:top center;
}
img:nth-child(4){
position:absolute;top:300px;left:550px;opacity:0.7;
animation:run2 20s linear infinite;
-webkit-animation:run2 20s linear infinite;
-moz-animation:run2 20s linear infinite;
-o-animation:run2 20s linear infinite;
transform-origin:top center;
-webkit-transform-origin:top center;
-moz-transform-origin:top center;
-o-transform-origin:top center;
}
img:nth-child(5){
position:absolute;top:300px;left:0px;opacity:0.7;
animation:run2 20s linear infinite;
-webkit-animation:run2 20s linear infinite;
-moz-animation:run2 20s linear infinite;
-o-animation:run2 20s linear infinite;
transform-origin:top center;
-webkit-transform-origin:top center;
-moz-transform-origin:top center;
-o-transform-origin:top center;
}
@keyframes run
{
0%{transform:rotate(0deg)}
100%{transform:rotate(360deg)}
}
@-webkit-keyframes run
{
0%{-webkit-transform:rotate(0deg)}
100%{-webkit-transform:rotate(360deg)}
}
@-moz-keyframes run
{
0%{-moz-transform:rotate(0deg)}
100%{-moz-transform:rotate(360deg)}
}
@-o-keyframes run
{
0%{-o-transform:rotate(0deg)}
100%{-o-transform:rotate(360deg)}
}
@keyframes run2
{
0%{transform:rotate(0deg)}
100%{transform:rotate(-360deg)}
}
@-webkit-keyframes run2
{
0%{-webkit-transform:rotate(0deg)}
100%{-webkit-transform:rotate(-360deg)}
}
@-moz-keyframes run2
{
0%{-moz-transform:rotate(0deg)}
100%{-moz-transform:rotate(-360deg)}
}
@-o-keyframes run2
{
0%{-o-transform:rotate(0deg)}
100%{-o-transform:rotate(-360deg)}
}
</style>
</head>
<body>
<p class="p1">
<img src="1.png" class="image1">
<img src="1.jpg" class="image">
<img src="2.jpg" class="image">
<img src="3.jpg" class="image">
<img src="4.jpg" class="image">
</p>
</body>
</html></span>摩天輪原圖：
註解：transform -origin 屬性允許您改變被轉換元素的位置。
這個屬性主要的作用就是選擇一個位置，然後繞著這個位置旋轉。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是2D模擬實現摩天輪旋轉動畫特效的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
CSS動畫：如何實現元素的閃光效果
Nov 21, 2023 am 10:56 AM
CSS動畫：如何實現元素的閃光效果，需要具體程式碼範例在網頁設計中，動畫效果有時可以為頁面帶來很好的使用者體驗。而閃光效果是一種常見的動畫效果，它可以使元素更加引人注目。以下將介紹如何使用CSS實現元素的閃光效果。一、閃光的基本實作首先，我們需要使用CSS的animation屬性來實現閃光效果。 animation屬性的值需要指定動畫名稱、動畫執行時間、動畫延遲時
![動畫不工作在PowerPoint中[修復]](https://img.php.cn/upload/article/000/887/227/170831232982910.jpg?x-oss-process=image/resize,m_fill,h_207,w_330)
動畫不工作在PowerPoint中[修復]
Feb 19, 2024 am 11:12 AM
您是否正在嘗試製作演示文稿，但無法添加動畫？如果動畫在你的WindowsPC上的PowerPoint中不起作用，那麼這篇文章將會幫助你。這是一個常見的問題，許多人都在抱怨。例如，在Microsoft團隊中演示或在螢幕錄製期間，動畫可能會停止運作。在本指南中，我們將探索各種故障排除技術，以協助您修復在Windows上的PowerPoint中無法運作的動畫。為什麼我的PowerPoint動畫不起作用？我們注意到Windows上PowerPoint中的動畫可能無法運作問題的一些可能原因如下：由於個
如何使用Vue實現打字機動畫特效
Sep 19, 2023 am 09:33 AM
如何使用Vue實現打字機動畫特效打字機動畫是一種常見且引人注目的特效，常用於網站的標題、標語等文字展示上。在Vue中，我們可以透過使用Vue自訂指令來實現打字機動畫效果。本文將詳細介紹如何使用Vue來實現此特效，並提供具體的程式碼範例。步驟1：建立Vue專案首先，我們需要建立一個Vue專案。可以使用VueCLI來快速建立一個新的Vue項目，或手動在HT
ppt動畫如何設定先進入再退出
Mar 20, 2024 am 09:30 AM
我們在日常的辦公中常常會使用到ppt，那麼你是否對ppt裡邊的每個操作功能都很了解呢？例如：ppt中怎麼設定動畫效果、怎麼設定切換效果、每個動畫的效果長度是多少？每個投影片能不能自動播放、ppt動畫先進入再退出等等，那麼今天這期我就先跟大家分享ppt動畫先進入再退出的具體操作步驟，就在下方，小伙伴們快來看一看吧！ 1.首先，我們在電腦中開啟ppt，點選文字方塊外側選取文字框，（如下圖紅色圈出部分所示）。 2.然後，點選選單列中的【動畫】，選取【擦除】的效果，（如圖紅色圈出部分所示）。 3.接下來，點擊【
跳票 2 年，國產 3D 動畫電影《二郎神之深海蛟龍》定檔 7 月 13 日
Jan 26, 2024 am 09:42 AM
本站1月26日消息，國產3D動畫電影《二郎神之深海蛟龍》發布一組最新劇照，正式宣布將於7月13日上映。據了解，《二郎神之深海蛟龍》是由迷狐星（北京）動漫有限公司、霍爾果斯眾合千澄影業有限公司、浙江橫店影業有限公司、浙江共贏影業有限公司、成都天火科技有限公司、華文映像（北京）影業有限公司出品，王君執導的動畫電影，原定2022年7月22日在中國大陸上映。本站劇情簡介：封神之戰後，姜子牙攜「封神榜」分封諸神，而後封神榜被天庭封印於九州祕境深海之下。事實上，除了分封神位，封神榜中還封緘著眾多強大的妖邪元
Netflix 黏土動畫電影《小雞快跑 2》終極預告公佈，12 月 15 日上線
Nov 20, 2023 pm 01:21 PM
Netflix的黏土動畫電影《小雞快跑2》的最終預告片已經公佈，該影片預計將於12月15日上線本站注意到，《小雞快跑2》預告片展示了小雞洛基和金傑為了尋找女兒莫莉開展行動。莫莉被FunLand農場的一輛卡車帶走，洛基和金傑冒著危險找回女兒。該片由山姆・菲爾執導，並由桑迪韋・牛頓、扎克瑞・萊維、貝拉・拉姆齊、伊梅爾達・斯湯頓和大衛・布拉德利主演。據了解，《小雞快跑2》是繼《小雞快跑》之後時隔20多年推出的續集。第一部作品於2001年1月2日在中國上映，講述了一群小雞們在養雞廠面臨被做成雞肉餡餅的命運
宮崎駿動畫電影《紅豬》延長上映至明年 1 月 16 日，豆瓣 8.6 分
Dec 18, 2023 am 08:07 AM
本站消息，宮崎駿動畫電影《紅豬》宣布將上映時間延長至2024年1月16日本站先前報道，《紅豬》已於11月17日登陸全國藝聯專線影院，累計票房超2000萬，豆瓣評分8.6分，4、5星好評佔85.8%。 《紅豬》由吉卜力工作室製作，宮崎駿執導，森山週一郎、加藤登紀子、大塚明夫、岡村明美等參與配音，最初於1992年在日本上映。該片改編自宮崎駿漫畫作品《飛行艇時代》，講述了義大利空軍的王牌飛行員波魯克・羅森被施了魔法變成了一頭豬。之後，他成為了一位賞金獵人，打擊空中劫匪，保護身邊人。劇情簡介：羅森是一戰中
主線動畫《明日方舟：冬隱歸路》定檔 PV 公佈，10 月 7 日上線
Sep 23, 2023 am 11:37 AM
本站需要重新寫作的內容是：9需要重新寫作的內容是：月需要重新寫作的內容是：23需要重新寫作的內容是：日消息，動畫影集《明日方舟》的第二季主線劇《明日方舟：冬隱歸路》公佈定檔需要重新寫作的內容是：PV，將於需要重新寫作的內容是：10需要重新寫作的內容是：月需要重新寫作的內容是：7需要重新寫作的內容是：日需要重新寫作的內容是：00:23需要重新寫作的內容是：正式上線，點此進入主題官網。需要重新寫作的內容是：本站注意到，《明日方舟：冬隱歸路》是《明日方舟：黎明前奏》的續作，劇情簡介如下：為阻止感染者群組
