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天

大家可以点赞、收藏、关注、评论我啦 、需要完整文件随时联系我或交流哟~!

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/562113.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

word文档保存到服务器,读取SQL表数据保存到Word并将Word文档保存到服务器代码

代码如下&#xff1a;引用 Microsoft Word 11.0 Object Librarypublic bool ExportWord( DataTable Table ){object Missing System.Reflection.Missing.Value;int NumRows, NumColumns, rowIndex, colIndex;object FileName Word文件名; //如&#xff1a;c:\tets.docWord.Ap…

HTML+CSS+JS实现 ❤️夜晚云层动画特效❤️

效果演示&#xff1a; 基于css3 keyframes 属性制作乌云密布云层动画&#xff0c;夜晚云层飘过动画特效。可用于网页动态云层背景特效。利用animation 和png云图片制作完成。 代码目录&#xff1a; 主要代码实现&#xff1a; css样式&#xff1a; html, body {width: 100%;he…

微机原理换行代码_微机原理课程设计——汇编输出杨辉三角

目录第一章绪论...................................................................................................................................1第二章分析与设计..............................................................................................…

微软ODBC服务器驱动,Windows ODBC 驱动程序中的连接弹性

Windows ODBC 驱动程序中的连接弹性09/01/2020本文内容为了确保应用程序能与 Azure SQL 数据库 保持连接&#xff0c;Windows 上的 ODBC 驱动程序可以还原空闲连接。重要Microsoft Azure SQL 数据库和 SQL Server 2014(及更高版本)服务器版本支持连接复原能力功能。若要详细了解…

HTML+CSS+JS实现 ❤️3D悬浮粒子翻转动效❤️

效果演示&#xff1a; three基于canvas制作全屏的3D方块粒子悬停&#xff0c;跟随鼠标移动3D翻转动画特效。支持360度无死角翻转效果。 代码目录&#xff1a; 主要代码实现&#xff1a; html代码 : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu…

3 配置ftp文件服务器,03-FTP和TFTP配置

1.1 FTP简介FTP(File Transfer Protocol&#xff0c;文件传输协议)用于在远端服务器和本地主机之间传输文件&#xff0c;是IP网络上传输文件的通用协议。在万维网(WWW&#xff0c;World Wide Web)出现以前&#xff0c;用户使用命令行方式传输文件&#xff0c;最通用的应用程序…

HTML+CSS+JS实现 ❤️新型冠状病毒射击小游戏❤️

效果演示&#xff1a; 代码目录&#xff1a; 主要代码实现&#xff1a; 部分JS代码 : var stage {w: 1280,h: 720 }var _pexcanvas document.getElementById("canvas"); _pexcanvas.width stage.w; _pexcanvas.height stage.h; var ctx _pexcanvas.getContext(…

config设置源 使用pip_python pip源配置

pip源配置文件可以放置的位置&#xff1a;Linux/Unix:/etc/pip.conf~/.pip/pip.conf~/.config/pip/pip.confMac OSX:~/Library/Application Support/pip/pip.conf~/.pip/pip.conf/Library/Application Support/pip/pip.confWindows:%APPDATA%\pip\pip.ini%HOME%\pip\pip.iniC:\…

微信小程序可以加服务器上的字体,微信小程序中自定义字体

微信小程序支持自定义字体开放出来也有段时间&#xff0c;这边整理下使用自定义字体中&#xff0c;容易忽略的一些问题&#xff0c;和简便的全局自定义方式。如果是同时加载两种字体包&#xff0c;先下载下来的会被后下载下来的字体包给覆盖。官网接口文档因此字体包有却只能用…

HTML+CSS+JS实现 ❤️3D奥运五环图形特效❤️

效果演示&#xff1a; 代码目录&#xff1a; 主要代码实现&#xff1a; CSS样式&#xff1a; /*** debug in progress ***/:root {--metal: #ffffff45;--gold: repeating-conic-gradient(#edc800 0deg, #ffe800 15deg, #f3cf00 30deg, #e3b600 45deg, #edc800 60deg) 10% 10%;…

python 替换文本 通配符_使用通配符搜索和替换文本文件中的字符串

尝试在python中对文本文件的内容使用通配符进行搜索/替换&#xff1a;如果文本文件的内容看起来像&#xff1a;"all_bcar_v0038.ma";"all_bcar_v0002.ma";"all_bcar_v0011.ma";"all_bcar_v0011.ma";希望用v1000替换所有版本号以获得以…

【CSDN】-官方插件推荐懒人必备神器

前言&#xff1a; 插件(Plug-in,又称addin、add-in、addon或add-on,又译外挂)是一种遵循一定规范的应用程序接口编写出来的程序。其只能运行在程序规定的系统平台下&#xff08;可能同时支持多个平台&#xff09;&#xff0c;而不能脱离指定的平台单独运行。因为插件需要调用原…

notification源码分析_Ceilometer之notification agent代码分析

说完了polling agent&#xff0c;咱们接着说notification agent&#xff0c;打开setup.cfg文件&#xff0c;找到入口 ceilometer-agent-notification ceilometer.cmd.agent_notification:main&#xff0c;打开文件&#xff0c;发现启动了NotificationService服务&#xff0c;然…

HTML+CSS+JS实现 ❤️3D网状球体动画特效❤️

效果演示&#xff1a; 代码目录&#xff1a; 主要代码实现&#xff1a; CSS样式&#xff1a; property --color-position {syntax: <length-percentage>;inherits: false;initial-value: 30%; }body {margin: 0;overflow: hidden;--color-position: 30%;background: rad…

怎么读取can报文_【案例】东风天龙“仪表未收到EECU报文”

来呀&#xff01;来呀&#xff01;关注我吧&#xff01;&#xff01; 车辆信息车型东风天龙发动机ISD270 50ECU型号CM2150E尿素泵依米泰克故障现象卡车司机反馈车子跑起来没有力、爬坡无力、仪表上指示灯亮和仪表未收到EECU报文故障排除&#xff1a;检测仪无法进入系…

HTML+CSS+JS实现 ❤️悬挂摇摆的弹珠动画特效❤️

效果演示&#xff1a; 代码目录&#xff1a; 主要代码实现&#xff1a; 部分HTML代码 : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns"http:…

中如何对一个数取余_如何找到自己在一个城市中的定位?

更多资讯&#xff0c;关注微信公众号&#xff1a;好房U购四川。如何找到自己在一个城市中的定位&#xff1f;最近&#xff0c;各大企业都纷纷启动了校招工作。有条件的&#xff0c;全国都在跑&#xff1b;至少&#xff0c;川内都要跑一跑。而毕业生最迷茫的&#xff0c;不过这两…

HTML+CSS+JS实现 ❤️翻页倒计时ui特效❤️

效果演示&#xff1a; 代码目录&#xff1a; 主要代码实现&#xff1a; CSS样式&#xff1a; charset "utf-8"; body {background-color: #f2f1ed; }.wrap {position: absolute;bottom: 0;top: 0;left: 0;right: 0;margin: auto;height: 310px; }a {text-decoration…

kafka 重新分配节点_Kafka扩容节点和分区迁移

背景最近工作中碰到Kafka 节点的网卡成为了性能瓶颈&#xff0c;为了提高整个消息队列的输出吞吐量&#xff0c;需要将数据量大的Topic 迁移到新的Kafka节点上。操作步骤1. 新建Kafka 节点通过CDH 管理界面在新机器上安装Kafka 服务&#xff0c;并得到相应的Kafka broker id。(…

HTML+CSS+JS实现 ❤️CSS3图片遮罩高亮显示❤️

效果演示&#xff1a; GIF压缩太大、故显示图片查看吧 代码目录&#xff1a; 主要代码实现&#xff1a; CSS样式&#xff1a; charset "utf-8"; * {margin: 0;padding: 0;list-style: none; }body {background-color: #1B1B1B }img {border: 0;cursor: pointer; }a …