div+css+js实现室内墙壁上挂上一幅穿越时空动画的壁画效果代码
代码语言:html
所属分类:动画
代码描述:div+css+js实现室内墙壁上挂上一幅穿越时空动画的壁画效果代码,鼠标放上去试试有星际穿越动画出现。
代码标签: div css js 室内 墙壁 挂上 穿越 时空 动画 壁画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url(//fonts.googleapis.com/css?family=Open+Sans); *, *::before, *::after { margin: 0; padding: 0; border: 0; box-sizing: border-box; } body { overflow: hidden; height: 100vh; font-family: 'Open Sans', sans-serif; font-size: 0.75rem; } a { text-decoration: none; color: #000000; } .gallery { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; } .gallery .ceiling-top { width: 100%; min-height: 1024px; background-image: url("//repo.bfw.wiki/bfwrepo/images/wall/CeilingTop.png"); background-repeat: repeat; background-position: left top; } .gallery .ceiling { width: 100%; min-height: 512px; background-image: url("//repo.bfw.wiki/bfwrepo/images/wall/Ceiling.png"); background-repeat: repeat; background-position: left bottom; } .gallery .wall { width: 100%; display: flex; align-items: center; justify-content: center; background-image: url("//repo.bfw.wiki/bfwrepo/images/wall/Wall.png"); background-repeat: repeat; background-position: left top; } @media only screen and (max-height: 740px) { .gallery .wall { margin-top: -50px; } } .gallery .wall .canvas-wrapper { width: 40%; height: 60%; min-width: 512px; min-height: 512px; margin-top: 5px; margin-bottom: 75px; position: relative; cursor: pointer; } @media only screen and (max-height: 930px) { .gallery .wall .canvas-wrapper { width: 40%; height: 50%; min-width: 312px; min-height: 312px; margin-top: 0px; margin-bottom: 25px; } } .gallery .wall .canvas-wrapper .passage { position: absolute; width: 512px; height: calc(100% + 80px); background-repeat: repeat; background-position: left top; margin-top: -5px; } @media only screen and (max-height: 930px) { .gallery .wall .canvas-wrapper .passage { height: calc(100% + 25px); margin-top: 0px; } } .gallery .wall .canvas-wrapper .passage.left { background-image: url("//repo.bfw.wiki/bfwrepo/images/wall/PassageCenter.png"); left: -768px; } .gallery .wall .canvas-wrapper .passage.right { background-image: url("//repo.bfw.wiki/bfwrepo/images/wall/PassageCenterRight.png"); right: -768px; } .gallery .wall .canvas-wrapper .passage .passage-wrapper { position: relative; height: 100%; } .gallery .wall .canvas-wrapper .passage .passage-wrapper .passage-top { position: absolute; width: 512px; height: 512px; background-repeat: repeat; background-position: left top; top: -512px; } .gallery .wall .canvas-wrapper .passage.left .passage-wrapper .passage-top { background-image: url("//repo.bfw.wiki/bfwrepo/images/wall/PassageTop.png"); } .gallery .wall .canvas-wrapper .passage.right .passage-wrapper .passage-top { background-image: url("//repo.bfw.wiki/bfwrepo/images/wall/PassageTopRight.png"); } .gallery .wall .canvas-wrapper .passage .passage-wrapper .passage-bottom { position: absolute; width: 512px; height: 512px; background-repeat: repeat; background-position: left top; bottom: -512px; } .gallery .wall .canvas-wrapper .passage.left .passage-wrapper .passage-bottom { background-image: url("//repo.bfw.wiki/bfwrepo/images/wall/PassageBottom.png"); } .gallery .wall .canvas-wrapper .passage.right .passage-wrapper .passage-bottom { background-image: url("//repo.bfw.wiki/bfwrepo/images/wall/PassageBottomRight.png"); } @media only screen and (max-height: 740px) { .gallery .wall .canvas-wrapper .passage .passage-wrapper .passage-top { top: -462px; } .gallery .wall .canvas-wrapper .passage .passage-wrapper .passage-bottom { bottom: -462px; } } .gallery .wall .canvas-wrapper .canvas { width: 100%; height: 100%; } .gallery .wall .canvas-wrapper .canvas.border-image { border: 37px solid transparent; -webkit-border-image: url(//repo.bfw.wiki/bfwrepo/images/wall/ImageFrame_bright.png) 37 round; -o-border-image: url(//repo.bfw.wiki/bfwrepo/images/wall/ImageFrame_bright.png) 37 round; border-image: url(//repo.bfw.wiki/bfwrepo/images/wall/ImageFrame_bright.png) 37 round; box-shadow: 0px 10px 20px 0px grey; } .gallery .wall .canvas-wrapper .canvas canvas { display: block; } .gallery .wall .canvas-wrapper .info { position: absolute; right: 0; bottom: -50px; background-color: #FFFFFF; padding: 30px 30px; transform-origin: bottom right; transform: scale(0.15); transition: transform 250ms ease-out; box-shadow: 0px 2px 5px 0px grey; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .gallery .wall .canvas-wrapper .info:hover { transform: scale(1.0); } .gallery .wall .canvas-wrapper .info .button-fullscreen, .gallery .wall .canvas-wrapper .info .button-pictureframe { cursor: pointer; } .gallery .floor { width: 100%; min-height: 512px; background-image: url("//repo.bfw.wiki/bfwrepo/images/wall/Floor.png"); background-repeat: repeat; background-position: left top; } @media only screen and (max-height: 740px) { .gallery .floor { margin-top: -50px; } } .gallery .floor-bottom { width: 100%; min-height: 1024px; background-image: url("//repo.bfw.wiki/bfwrepo/images/wall/FloorBottom.png"); background-repeat: repeat; background-position: left top; } </style> </head> <body > <div class="gallery"> <div class="ceiling-top"></div> <div class="ceiling"></div> <div class="wall"> <div class="canvas-wrapper"> <div class="passage left"> <div class="passage-wrapper"> <div class="passage-top"></div> <div class="passage-bottom"></div> </div> </div> <div class="passage right"> <div class="passage-wrapper"> <div class="passage-top"></div> <div class="passage-bottom"></div> </div> </div> <div class="canvas border-image"> <canvas></canvas> </div> <div class="info"> <h3>Starfield/Warpdrive Particles</h3> <br> Artist: <a href="" target="_blank">Niklas Knaack</a> <br> <br> Move the mouse over the canvas to interact with the application. <br> By keeping the mouse button pressed, you also create a rotation. <br> <br> Fullscreen: <span class="button-fullscreen"><strong>Off</strong></span> <br> Picture frame: <span class="button-pictureframe"><strong>On</strong></span> </div> </div> </div> <div class="floor"></div> <div class="floor-bottom"></div> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/isMobile.min.js"></script> <script > //--- 'use strict'; //--- let mobile = false; //--- let canvasWidth = 0; let canvasHeight = 0; //--- let canvas = null; let ctx = null; let imageData = null; let pix = null; //--- let animationFrame = null; //--- let fullscreenMode = false; let pictureFrameMode = true; //--- const MATHPI180 = Math.PI / 180; //--- let center = null; let mouseActive = false; let mouseDown = false; let mousePos = null; //--- let rotationSpeed = 0.5; let fov = 300; const fovMin = 210; const fovMax = fov; const starHolderCount = 6666; let starHolder = []; let starBgHolder = []; let starSpeed = 20; const starSpeedMin = starSpeed; const starSpeedMax = 200; const starDistance = 8000; let starRotation = 0; const backgroundColor = { r: 0, g: 0, b: 0, a: 255 }; //--- function init() { if (isMobile.phone === true || isMobile.tablet === true) { mobile = true; } //--- document.querySelector('.button-fullscreen').addEventListener('click', clickFullscreenHandler, false); document.querySelector('.button-pictureframe').addEventListener('click', clickPictureFrameHandler, false); //--- canvas = document.querySelector('canvas'); canvas.oncontextmenu = event => { event.preventDefault(); }; if (mobile === false) { canvas.addEventListener('mousemove', mouseMoveHandler); canvas.addEventListener('mousedown', mouseDownHandler); canvas.addEventListener('mouseup', mouseUpHandler); canvas.addEventListener('mouseenter', mouseEnterHandler); canvas.addEventListener('mouseleave', mouseLeaveHandler); } else { canvas.addEventListener('touchstart', touchStartHandler, false); canvas.addEventListener('touchend', touchEndHandler, false); canvas.addEventListener('touchmove', touchMoveHandler, false); canvas.addEventListener('touchcancel', touchCancelHandler, false); } ctx = canvas.getContext('2d'); //--- window.addEventListener('resize', onResize, false); restart(); } function onResize(event) { restart(); } function restart() { if (fullscreenMode === true) { canvasWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; canvasHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; canvas.style.position = 'fixed'; canvas.style.left = '0'; canvas.style.top = '0'; } else { const canvasWrapper = document.querySelector('.canvas'); canvasWidth = Math.floor(canvasWrapper.clientWidth); canvasHeight = Math.floor(canvasWra.........完整代码请登录后点击上方下载按钮下载查看
网友评论0