HTML+CSS+JS实现 ❤️酷炫的时光隧道旅行动特效❤️
生活随笔
收集整理的這篇文章主要介紹了
HTML+CSS+JS实现 ❤️酷炫的时光隧道旅行动特效❤️
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
??效果演示：
?
???代碼目錄：
主要代碼實現：
css樣式：
html, body {width: 100%;height: 100%;overflow: hidden; }body {background: #000;text-align: center; }body::before {content: "";display: inline-block;height: 100%;vertical-align: middle; }.scene {position: relative;display: inline-block;vertical-align: middle;perspective: 15px;perspective-origin: 50% 50%; }.wrap {position: absolute;width: 1000px;height: 1000px;left: -500px;top: -500px;transform-style: preserve-3d;animation: move 12s infinite linear;animation-fill-mode: forwards; }.wrap:nth-child(2) {animation: move 12s infinite linear;animation-delay: 6s; }.wall {width: 100%;height: 100%;position: absolute;background: url(../img/sg.jpg);background-size: cover;opacity: 0;animation: fade 12s infinite linear; }.wrap:nth-child(2) .wall {animation-delay: 6s; }.wall-right {transform: rotateY(90deg) translateZ(500px); }.wall-left {transform: rotateY(-90deg) translateZ(500px); }.wall-top {transform: rotateX(90deg) translateZ(500px); }.wall-bottom {transform: rotateX(-90deg) translateZ(500px); }.wall-back {transform: rotateX(180deg) translateZ(500px); }@keyframes fade {0% {opacity: 0;}25% {opacity: 1;}75% {opacity: 1;}100% {opacity: 0;} }@keyframes move {0% {transform: translateZ(-500px) rotate(0deg);}100% {transform: translateZ(500px) rotate(0deg);} }html代碼 :
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Tunnel travel using CSS perspective</title><link rel="stylesheet" href="css/style.css"></head><body><div class="scene"><div class="wrap"><div class="wall wall-right"></div><div class="wall wall-left"></div><div class="wall wall-top"></div><div class="wall wall-bottom"></div><div class="wall wall-back"></div></div><div class="wrap"><div class="wall wall-right"></div><div class="wall wall-left"></div><div class="wall wall-top"></div><div class="wall wall-bottom"></div><div class="wall wall-back"></div></div></div></body></html>圖片也可以替換成自己喜歡的樣子。
源碼獲取
精彩推薦更新中：
HTML5大作業實戰100套
??打卡 文章 更新? 36??/? 100天
大家可以點贊、收藏、關注、評論我啦 、需要完整文件隨時聯系我或交流喲~！
總結
以上是生活随笔為你收集整理的HTML+CSS+JS实现 ❤️酷炫的时光隧道旅行动特效❤️的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 《零基础》MySQL 超级入门教程
- 下一篇： HTML+CSS+JS实现 ❤️酷炫情人