圣诞节用女神照片做了一个旋转木马
Posted 海海呐
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了圣诞节用女神照片做了一个旋转木马相关的知识，希望对你有一定的参考价值。
圣诞节到了 看见朋友圈都是送各种礼物的 作为一个程序员 肯定是要给女朋友准备一份不一样的礼物啦。看见在网上看见各种旋转圣诞树的，就想到了这个旋转木马 赶紧学起来发给女朋友看看！
效果图
使用技术 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)
到这里就可以实现啦
实现的地址
完整代码我都已经放在码云上面了
感兴趣的可以自己克隆
有什么不明白的可以提问哦
以上是关于圣诞节用女神照片做了一个旋转木马的主要内容，如果未能解决你的问题，请参考以下文章