圣诞节到了 看见朋友圈都是送各种礼物的 作为一个程序员 肯定是要给女朋友准备一份不一样的礼物啦。看见在网上看见各种旋转圣诞树的，就想到了这个旋转木马 赶紧学起来发给女朋友看看！
效果图
使用技术 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 = false music.play() } } function initRenderer() { width = window.innerWidth height = window.innerHeight renderer = new THREE.WebGLRenderer({ antialias: true }) // 如果设置开启，允许在场景中使用阴影贴图 // renderer.shadowMap.enabled = true // 定义阴影贴图类型 (未过滤, 关闭部分过滤, 关闭部分双线性过滤) // renderer.shadowMap.type = THREE.BasicShadowMap renderer.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) }
到这里就可以实现啦
