圣诞节到了 看见朋友圈都是送各种礼物的 作为一个程序员 肯定是要给女朋友准备一份不一样的礼物啦。看见在网上看见各种旋转圣诞树的，就想到了这个旋转木马 赶紧学起来发给女朋友看看！
效果图
**使用技术 html css3 jq **
使用旋转实现
基本样式
<body><div id="header"><p class="enclosed"></p><button id="startButton">点击 查收<span style='color: red'>❤</span></button></div><div id="Obscuration"><ul><li><img src="./image/01.jpg" alt=""></li><li><img src="./image/02.jpeg" alt=""></li><li><img src="./image/03.jpeg" alt=""></li><li><img src="./image/04.jpg" alt=""></li><li><img src="./image/05.jpg" alt=""></li><li><img src="./image/06.jpg" alt=""></li></ul></div><audio src="./christmas.mp3" controls id="music"></audio></body>
css样式
<style>.enclosed {padding: 5px 30px;text-align: center;}#music{display: none;}#Obscuration {position: absolute;width: 100%;height: 100%;display: none;perspective: 1000px;z-index: 99;/* background-color: #fff; */background: url(./image/chbja1.jpg) no-repeat;background-size: 100% 100%;}#header{background: url(./image/chbja.jpg) no-repeat;background-size: 100% 100%;}ul {position: relative;margin: 300px auto;width: 150px;height: 150px;/* border: 4px solid #1a1; */animation: xuanzhuan 10s linear infinite;transform-style: preserve-3d;}li {list-style: none;position: absolute;}img{width: 250px;height: 300px;}li:nth-child(1) {transform: translateZ(300px);}li:nth-child(2) {transform: rotateY(60deg) translateZ(300px);}li:nth-child(3) {transform: rotateY(120deg) translateZ(300px);}li:nth-child(4) {transform: rotateY(180deg) translateZ(300px);}li:nth-child(5) {transform: rotateY(240deg) translateZ(300px);}li:nth-child(6) {transform: rotateY(300deg) translateZ(300px);}@keyframes xuanzhuan {to {transform: rotateY(360deg);}}ul:hover {animation-play-state: paused;}</style>
引入插件
<script src="./jquery-2.1.4.min.js"></script> <script src="./typeit.js"></script> <script src="./index.js"></script>
js逻辑
首先定义好数据
const startButton = document.getElementById('startButton')
const Obscuration = document.getElementById('Obscuration')
const music = document.getElementById('music')
startButton.addEventListener('click', start)
封装调用逻辑
function play() {if(music.paused) {music.paused = falsemusic.play()}}function initRenderer() {width = window.innerWidthheight = window.innerHeightrenderer = new THREE.WebGLRenderer({antialias: true})// 如果设置开启，允许在场景中使用阴影贴图// renderer.shadowMap.enabled = true// 定义阴影贴图类型 (未过滤, 关闭部分过滤, 关闭部分双线性过滤)// renderer.shadowMap.type = THREE.BasicShadowMaprenderer.setSize(width, height)document.body.appendChild(renderer.domElement)renderer.setClearColor(0x000089, 1.0)}function initScene() {scene = new THREE.Scene()}function initCamera() {camera = new THREE.PerspectiveCamera(45, width/height, 1, 1000)camera.position.set(6, 2, -12)}
用户点击查收触发
function start() {startButton.innerHTML = '加载中...'Obscuration.style.display = 'block'play()initRenderer()initScene()initCamera()setTimeout(()=>{// Obscuration.style.display = 'none'startButton.style.display = 'none'},3000)}
到这里就可以实现啦
实现的地址
tschristmas.haihaina.cn
完整代码我都已经放在码云上面了
海海/christmas
感兴趣的可以自己克隆
有什么不明白的可以提问哦
本文转载自: https://blog.csdn.net/m0_56344602/article/details/122139675
版权归原作者 海海呐 所有， 如有侵权，请联系我们删除。
版权归原作者 海海呐 所有， 如有侵权，请联系我们删除。