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实现 ❤️酷炫的时光隧道旅行动特效❤️相关推荐

HTML+CSS+JS实现 ❤️酷炫3D瀑布流动画特效❤️
HTML+CSS+JS实现 ❤️酷炫彩虹旋转隧道特效❤️
效果演示: 代码目录: 主要代码实现: 部分CSS样式: #c {position: absolute;top: calc(50vh - 200px);left: calc(50vw - 200px) ...
HTML+CSS+JS实现 ❤️酷炫情人节爱心动画特效❤️
HTML+CSS+JS实现 ❤️酷炫HUD科幻数据屏幕动画界面❤️
HTML+CSS+JS实现 ❤️酷炫的canvas全屏背景动画特效❤️
php 3d animation,基于three.js的酷炫Canvas 3D线条动画特效
[温馨提示]源码包解压密码:www.youhutong.com 效果图: 描述说明: html5-canvas-animation是一款基于three.js的HTML5 canvas 3D线条动画特效 ...
用HTML、CSS写一个酷炫的动态搜索框
用HTML.CSS写一个酷炫的动态搜索框可伸展的动态搜索框! 复制粘贴即可用! HTML部分: <!DOCTYPE html> <html lang="en"& ...
情人节程序员用HTML网页表白【彩色酷炫的空间背景动画特效】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
Vue.js 打造酷炫的可视化数据大屏
可视化技术与 Vue 介绍实验介绍在本节实验中,将对可视化技术的应用场景.发展历程进行介绍,让大家对可视化技术有一个基础的概念.随后将介绍如今流行的可视化框架与其之间的优缺点对比.最后介绍 Vue ...

HTML+CSS+JS实现 ❤️酷炫的时光隧道旅行动特效❤️

效果演示：

代码目录：

主要代码实现：

css样式：

html代码 :

源码获取

HTML5大作业实战100套

HTML+CSS+JS实现 ❤️酷炫的时光隧道旅行动特效❤️相关推荐

最新文章

热门文章