css网页版的心形音乐盒，小白作品、

最新推荐文章于 2022-08-16 11:13:27 发布

a_lince

最新推荐文章于 2022-08-16 11:13:27 发布

阅读量1.3k

点赞数 1

分类专栏：趣玩文章标签：音乐盒爱心 html css 表白

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/a_lince/article/details/78019306

版权

趣玩专栏收录该内容

1 篇文章 0 订阅

订阅专栏

做了一个网页版的心形音乐盒，喜欢的可以做着玩，不足之处求大神指导，小白作品。

作品效果：由于不能传视频，所以只能拿截图展示效果，喜欢的伙伴可以自己运行代码。

注：图片和背景音乐可以自己更改。

<!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);

}
.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>