效果图
代码分析
-
整体功能：这是一个 HTML 页面，创建了一个带有跳动爱心动画、表白文字和自动播放音乐的浪漫页面。
-
HTML 部分：设置了文档类型和字符编码，页面标题为 “小骆跳动的爱”。在body中包含标题h1、用于构建爱心的div元素、一段表白文字b和一个自动播放音乐的audio元素（音乐链接需有效）。
-
CSS 部分：
-
全局设置：清除所有元素的内边距和外边距。
-
body：背景色为粉色，隐藏溢出内容。
-
#frame：相对定位，设置宽高和外边距实现居中。
-
.left、.right、.bottom类（用于爱心）：设置位置、宽高、圆形边框和z - index，bottom类还有旋转效果。
-
.heart类：绝对定位，添加阴影和动画效果，通过linear - gradient设置背景颜色渐变。@keyframes beat定义了爱心跳动的动画，包括缩放和阴影变化。
-
h1和b：设置文本的位置、对齐方式、字体、字号、颜色等。
代码
<html lang="en"><head><meta charset="UTF-8"><title>小骆跳动的爱</title><style>* {padding: 0;margin: 0;}body {background-color: pink;overflow: hidden;}#frame {position: relative;width: 400px;height: 300px;margin: 250px auto;}.left,.right {top: 0;width: 200px;height: 200px;border-radius: 50%;}.left {left: 35px;}.right {right: 35px;z-index: -1;}.bottom {bottom: 36px;left: 100px;width: 200px;height: 200px;transform: rotate(45deg);z-index: -1;}.heart {position: absolute;box-shadow: 0 0 40px #d5093c;animation: beat .4s ease infinite normal;background: linear-gradient(-90deg, #F50A45 0%, #d5093c 40%);}@keyframes beat {0% {transform: scale(1) rotate(225deg);box-shadow: 0 0 40px #d5093c;}50% {transform: scale(1.1) rotate(225deg);box-shadow: 0 0 70px #d5093c;}100% {transform: scale(1) rotate(225deg);box-shadow: 0 0 40px #d5093c;;}}h1 {position: absolute;width: 100%;top: 2%;text-align: center;font-family: 'Love Ya Like A Sister', cursive;font-size: 40px;color: #c70012;padding: 0 20px;}</style></head><body><h1 id="h1"></h1><div id="frame"><div class="heart left"></div><div class="heart right"></div><div class="heart bottom"></div></div><b style=" position:absolute;width: 50%;top:80%;left:25%;text-align: center;transform:translateY(-50%);font-family: 'Love Ya Like A Sister', cursive;font-size: 40px;color: #c70012;padding: 0 20px;">每次遇见你都心跳加速</b><audio autoplay="autopaly" loop="loop" id="audios" preload="auto" ><source src="http://music.163.com/song/media/outer/url?id=526464145.mp3" /></audio><script>function toggleSound() {var music = document.querySelector("audio");//获取IDif (music.paused) { //判读是否播放music.paused=false;music.play(); //没有就播放}}window.onload = function starttime() {setInterval("toggleSound()",1);setInterval(function () {time();}, 1000);}// function musicAutio(){// var music = document.querySelector("audio");// console.log(music);// console.log(music.paused);// if(music.paused){// music.paused=false;// music.play();// }// }// setInterval(musicAutio(),1);</script></body></html>
点个赞吧！