首页
/
每日頭條
/
科技
/
html伸縮特效
html伸縮特效
更新时间:2025-02-19 06:58:33

html伸縮特效(HTML旋轉木馬0基礎1分鐘學會)1

旋轉木馬

前言

有些小夥伴0基礎小夥伴擔心,我沒有編程工具怎麼辦?

這個不需要編程工具的,隻需要找9張圖片改改名稱就行

步驟

(1) 新建一個文件夾

(2) 文件夾中新建img文件夾 以及一個txt文檔

html伸縮特效(HTML旋轉木馬0基礎1分鐘學會)2

(3) 把我放在下面的代碼粘貼到txt文檔中

html伸縮特效(HTML旋轉木馬0基礎1分鐘學會)3

(4)沒有txt後綴的這樣設置一下(這裡以win11為例,點擊查看-->顯示-->文件擴展名)

html伸縮特效(HTML旋轉木馬0基礎1分鐘學會)4

(5)把文本文檔名稱改為旋轉木馬.html

html伸縮特效(HTML旋轉木馬0基礎1分鐘學會)5

(6)把圖片放在img文件夾裡面,需要9張

html伸縮特效(HTML旋轉木馬0基礎1分鐘學會)6

(7)圖片重命名為 1.jpg 2.jpg 3.jpg 以此規律命名(200 x 300 像素的圖片)

html伸縮特效(HTML旋轉木馬0基礎1分鐘學會)7

(8)設置圖片像素(用win自帶照片軟件打開-->點擊... --> 重設大小-->自定義尺寸-->把寬度改成200、高度改成200-->保存)

html伸縮特效(HTML旋轉木馬0基礎1分鐘學會)8

html伸縮特效(HTML旋轉木馬0基礎1分鐘學會)9

html伸縮特效(HTML旋轉木馬0基礎1分鐘學會)10

html伸縮特效(HTML旋轉木馬0基礎1分鐘學會)11

代碼

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .box{ width: 200px; height: 300px; /* border: 1px solid black; */ margin: 50px auto; position: relative; /* 設置3D 效果 */ transform-style: preserve-3d; /* 添加3D視距 透視效果 */ /* perspective: 300px; */ transform: rotateX(-15deg); /* CSS animation動畫屬性 name 定義動畫名稱 duration 定義動畫執行時間 秒/單位 timing-function 定義動畫執行速度 linear 勻速 delay 定義動畫執行等待 秒/單位 iteration-count 定義動畫執行次數 默認為1 無限執行 infinite animation-play-state 動畫運行狀态控制 默認running運行 paused 暫停 */ /* animation: name duration timing-function delay iteration-count direction fill-mode; */ animation: move 10s linear infinite; } /* 定義關鍵幀動畫 執行我們定義的動畫 */ @keyframes move{ 0%{ /* 在CSS3 變幻屬性中 如果要給一個元素添加多個變幻屬性 需要将所有的變幻屬性都寫在transform */ transform:rotateX(-15deg) rotateY(0deg); } 100%{ transform:rotateX(-15deg) rotateY(360deg); } } /* :hover 僞類選擇器 設置用戶鼠标移入時的效果 */ .box:hover{ /* 當用戶鼠标移入時 動畫由默認的運行狀态變成暫停 */ animation-play-state: paused; } .box div{ position: absolute; left: 0; top: 0; width: 200px; height: 300px; margin-top: 50px; } /* :nth-child(1) */ .box div:nth-child(1){ /* 改變頁面第一張圖片 變幻屬性 transform 變幻屬性 rotate 旋轉 translate 位移 */ transform: rotateY(40deg) translateZ(275px); } .box div:nth-child(2){ transform: rotateY(80deg) translateZ(275px); } .box div:nth-child(3){ transform: rotateY(120deg) translateZ(275px); } .box div:nth-child(4){ transform: rotateY(160deg) translateZ(275px); } .box div:nth-child(5){ transform: rotateY(200deg) translateZ(275px); } .box div:nth-child(6){ transform: rotateY(240deg) translateZ(275px); } .box div:nth-child(7){ transform: rotateY(280deg) translateZ(275px); } .box div:nth-child(8){ transform: rotateY(320deg) translateZ(275px); } .box div:nth-child(9){ transform: rotateY(360deg) translateZ(275px); } </style> </head> <body> <div class="box"> <div> <img src="./img/1.jpg" alt=""> </div> <div> <img src="./img/2.jpg" alt=""> </div> <div> <img src="./img/3.jpg" alt=""> </div> <div> <img src="./img/4.jpg" alt=""> </div> <div> <img src="./img/5.jpg" alt=""> </div> <div> <img src="./img/6.jpg" alt=""> </div> <div> <img src="./img/7.jpg" alt=""> </div> <div> <img src="./img/8.jpg" alt=""> </div> <div> <img src="./img/9.jpg" alt=""> </div> </div> </body> </html>

上一篇:ABB機器人Sockets通訊

,
Comments
Welcome to tft每日頭條 comments! Please keep conversations courteous and on-topic. To fosterproductive and respectful conversations, you may see comments from our Community Managers.
Sign up to post
Sort by
Show More Comments
推荐阅读
3d遊戲建模可以自學嗎
3d遊戲建模可以自學嗎
遊戲3D建模師主要分為3D場景建模和3D角色建模。3D場景建模師的工作就是根據原畫設定及策劃要求制作符合要求的3D場景模型;而3D角色建模師的工作是根據遊戲人物或怪物(NPC)的原畫設計圖建造遊戲人物、怪物/NPC等角色的3D模型。3D遊戲...
2025-02-19
linux查看文件内容的命令有幾種
linux查看文件内容的命令有幾種
linux查看文件内容的命令有幾種?查命令絕對路徑:which用于查找并顯示給定命令的絕對路徑,環境變量中PATH參數也可以被查出來,接下來我們就來聊聊關于linux查看文件内容的命令有幾種?以下内容大家不妨參考一二希望能幫到您!linux...
2025-02-19
交流接觸器怎麼查常開點常閉點
交流接觸器怎麼查常開點常閉點
交流接觸器分為兩部分:線圈和銜鐵,它主要有三組主觸點,另外搭配一組或者兩組多組輔助觸點,輔助觸點又分為常開和常閉。當線圈通電的時候,線圈産生磁場,通過鐵芯把銜鐵吸下來。而銜鐵又帶動所有的觸點動作,主觸點閉合,常開觸點閉合,常閉觸點斷開。主觸...
2025-02-19
液壓系統主要由什麼組成
液壓系統主要由什麼組成
點擊上方頭條号“機械設計一點通”關注我們,每天學習一個機械設計相關知識點液壓系統是什麼原理,為何能産生那麼大的力?液壓系統是利用流體靜力學中的帕斯卡定律,使用油或者其他液體,把壓力在液體中傳遞,從而實現小壓力控制大壓力,有點類似杠杆原理。液...
2025-02-19
三系有esp車身穩定系統嗎
三系有esp車身穩定系統嗎
新捷達SUV驅動力強大更貼心驅動力層面,新捷達VS5配備編号EA211-DJS的1.4T四缸渦輪增壓器模塊驅動力,最大馬力150Ps/5000-6000rpm,峰值扭矩250Nm/1550-3000rpm。駕駛員開起來更舒适愉快,更能滿足用...
2025-02-19
Copyright 2023-2025 - www.tftnews.com All Rights Reserved