首页
/
每日頭條
/
科技
/
html伸縮特效
html伸縮特效
更新时间:2025-02-19 03:05:53

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
推荐阅读
手機看到滿信号為什麼網速很慢呢
手機看到滿信号為什麼網速很慢呢
不知道小夥伴們有沒有遇到這樣的情況,手機信号欄上的字母經常會變,有時是4G,有時是E。每當字母變成E時,基本打不開網頁,這究竟是怎麼回事呢?今天,蝸牛君就和大家聊聊信号欄上的字母都是什麼意思?除了E、4G,經常出現在手機信号欄上的還有:G、...
2025-02-19
蘋果手機自動調節亮度怎麼關閉
蘋果手機自動調節亮度怎麼關閉
蘋果手機自動調節亮度怎麼關閉?在蘋果手機桌面找到并打開“設置”,然後在設置裡找到并打開“顯示與亮度”,點擊進入後找到“自動亮度調節”,将自動調節亮度關閉即可,下面我們就來說一說關于蘋果手機自動調節亮度怎麼關閉?我們一起去了解并探讨一下這個問...
2025-02-19
聯想最高端的台式電腦
聯想最高端的台式電腦
昨日市場研究機構IDC發布了2022年Q4第四季度(10-12月)和2022年1-12月整個全年的全球PC市場報告。首先是2022Q4第四季度(10-12月)全球PC市場TOP5依次是:①聯想②惠普③戴爾④蘋果⑤華碩。而2022年1-12月...
2025-02-19
怎麼把cad轉成pdf格式
怎麼把cad轉成pdf格式
剛剛接觸CAD文件,對于文件的格式還不是很會操作,PDF格式我們平時用的多,使用起來更加方便,随時随地都能打開查看,那麼我們如何将CAD文件轉換為PDF格式?今天和大家分享一種簡單的操作方法,并且是免費試用的,有需要的小夥伴可以試試。1,首...
2025-02-19
穿越火線手遊體驗服7月9号
穿越火線手遊體驗服7月9号
12月22日,《穿越火線》手遊迎來了重大更新,“荒島特訓”版本震撼來襲,小編作為CFM迷,當然也迫不及待地加入戰鬥,如今,完了也快有半個月,有了很多的感觸,不禁想為此寫一篇測評文章與大家分享。《穿越火線》手遊“荒島特訓”版本也是一類“吃雞”...
2025-02-19
Copyright 2023-2025 - www.tftnews.com All Rights Reserved