做了一个网页版的心形音乐盒,喜欢的可以做着玩,不足之处求大神指导,小白作品。
作品效果:由于不能传视频,所以只能拿截图展示效果,喜欢的伙伴可以自己运行代码。
注:图片和背景音乐可以自己更改。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>3D爱心</title>
<style type = "text/css">
/*初始化margin和padding值*/
*{
margin:0;
padding:0;
}
body{
background:black; /*背景颜色*/
}
.heart3d{
position:absolute; /*以浏览器定位*/
left:0;
top:0;
right:0;
bottom:0;
margin:auto; /*自适应居中*/
width:200px;
height:320px;
transform-style:preserve-3d; /*设置3d环境*/
animation:rot 12s linear infinite; /*设置旋转帧数*/
}
@keyframes rot{
to{
transform:rotateX(360deg) rotateY(360deg);
}
}
/*心形线的基本属性*/
.heart{
position:absolute;
width:200px;
height:320px;
border:2px solid red;
border-left:0;
border-bottom:0;
border-radius:50% 50% 0/40% 50% 0;
}
/*立方体*/
.cube{
position:relative;
width:100px;
height:100px;
transform-style:preserve-3d;
transform:translateX(50px) translateY(220px) translateZ(45PX);
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>3D爱心</title>
<style type = "text/css">
/*初始化margin和padding值*/
*{
margin:0;
padding:0;
}
body{
background:black; /*背景颜色*/
}
.heart3d{
position:absolute; /*以浏览器定位*/
left:0;
top:0;
right:0;
bottom:0;
margin:auto; /*自适应居中*/
width:200px;
height:320px;
transform-style:preserve-3d; /*设置3d环境*/
animation:rot 12s linear infinite; /*设置旋转帧数*/
}
@keyframes rot{
to{
transform:rotateX(360deg) rotateY(360deg);
}
}
/*心形线的基本属性*/
.heart{
position:absolute;
width:200px;
height:320px;
border:2px solid red;
border-left:0;
border-bottom:0;
border-radius:50% 50% 0/40% 50% 0;
}
/*立方体*/
.cube{
position:relative;
width:100px;
height:100px;
transform-style:preserve-3d;
transform:translateX(50px) translateY(220px) translateZ(45PX);
}
.cube div{
position:absolute; /*相对浏览器定位*/
width:100px;
height:100px;
}
.cube div:nth-child(1){
left:0;
top:-100px;
transform-origin:bottom;
transform:rotateX(90deg);
}
.cube div:nth-child(2){
left:0;
top:100px;
transform-origin:top;
transform:rotateX(-90deg);
}
.cube div:nth-child(3){
left:-100px;
top:0;
transform-origin:right;
transform:rotateY(-90deg);
}
.cube div:nth-child(4){
left:100px;
top:0;
transform-origin:left;
transform:rotateY(90deg);
}
.cube div:nth-child(5){
left:0;
top:0;
}
.cube div:nth-child(6){
left:0;
top:0;
transform:translateZ(-100px);
}
.cube div img{
width:100px;
height:100px;
}
.cube div{
position:absolute; /*相对浏览器定位*/
width:100px;
height:100px;
}
.cube div:nth-child(1){
left:0;
top:-100px;
transform-origin:bottom;
transform:rotateX(90deg);
}
.cube div:nth-child(2){
left:0;
top:100px;
transform-origin:top;
transform:rotateX(-90deg);
}
.cube div:nth-child(3){
left:-100px;
top:0;
transform-origin:right;
transform:rotateY(-90deg);
}
.cube div:nth-child(4){
left:100px;
top:0;
transform-origin:left;
transform:rotateY(90deg);
}
.cube div:nth-child(5){
left:0;
top:0;
}
.cube div:nth-child(6){
left:0;
top:0;
transform:translateZ(-100px);
}
.cube div img{
width:100px;
height:100px;
}
</style>
</head>
<body>
<div class = "heart3d">
<div class="cube">
<div><img src = "images/1.jpg"></div> /*照片替换,要替换的照片放入新建的images文件夹中,与代码文件名相同,保存即可*/
<div><img src = "images/2.jpg"></div>
<div><img src = "images/3.jpg"></div>
<div><img src = "images/4.jpg"></div>
<div><img src = "images/5.jpg"></div>
<div><img src = "images/6.jpg"></div>
<audio src = "src/童话镇.mp3" id="mymusic"></audio> /*替换music:将音乐放入新建的src文件夹中*/
</div>
</div>
<script type = "text/javascript">
var oHeart3d = document.getElementsByClassName("heart3d")[0];
var mymusic = document.getElementById("mymusic");
oHeart3d.onclick = function(){
mymusic.play();
}
</script>
<script type = "text/javascript">
/*36条边框线组成心形*/
var oHeart = document.getElementsByClassName("heart3d")[0];
for(var i = 0;i < 45;i++){
var oDiv = document.createElement("div");
oDiv.className= "heart";
/*控制线条数目和之间的间隔度数i*8deg */
oDiv.style.transform = "rotateY(" + i*8+"deg)rotateZ(45deg) translateX(60px)";
oHeart.appendChild(oDiv);
}
</script>点击打开链接
</body>
</html>
</head>
<body>
<div class = "heart3d">
<div class="cube">
<div><img src = "images/1.jpg"></div> /*照片替换,要替换的照片放入新建的images文件夹中,与代码文件名相同,保存即可*/
<div><img src = "images/2.jpg"></div>
<div><img src = "images/3.jpg"></div>
<div><img src = "images/4.jpg"></div>
<div><img src = "images/5.jpg"></div>
<div><img src = "images/6.jpg"></div>
<audio src = "src/童话镇.mp3" id="mymusic"></audio> /*替换music:将音乐放入新建的src文件夹中*/
</div>
</div>
<script type = "text/javascript">
var oHeart3d = document.getElementsByClassName("heart3d")[0];
var mymusic = document.getElementById("mymusic");
oHeart3d.onclick = function(){
mymusic.play();
}
</script>
<script type = "text/javascript">
/*36条边框线组成心形*/
var oHeart = document.getElementsByClassName("heart3d")[0];
for(var i = 0;i < 45;i++){
var oDiv = document.createElement("div");
oDiv.className= "heart";
/*控制线条数目和之间的间隔度数i*8deg */
oDiv.style.transform = "rotateY(" + i*8+"deg)rotateZ(45deg) translateX(60px)";
oHeart.appendChild(oDiv);
}
</script>点击打开链接
</body>
</html>
由于未上传代码中的图片文件和音乐,需要直接演示效果的小伙伴可以下载:链接:http://pan.baidu.com/s/1kVOgPxX 密码:zo99