html+css——做一个简单的音乐卡片

发布于：2023-02-15 ⋅ 阅读:(632) ⋅ 点赞:(0)

小项目由html和css实现，也可以选择加js

项目设计

效果图

展示下小项目的效果图：

 效果一  html+css

 效果二  html+css+js

  两个效果图，不同的展示效果。但是实现的功能都是一样的。看完效果图你有自己的思路了嘛？可以自己先动手试试，完成之后欢迎私信我或者在评论区说出你的新奇想法哦！

设计

html部分

  首先还是使用一个div标签将卡片整体包裹在一起，方便后续对于卡片样式和位置的设定。同时可以添加一个出场动画之类的，此处我添加了一个中心弹出的动画，所以id命名为：scale-up-ccenter。对于此动画设置，可以根据个人爱好和所学进度而定。

<!-- 用于设计卡片整体 和后续卡片部分样式的设置  -->
<div class="scale-up-center"></div>

  对于效果一图的分析，卡片内部含有大致三部分内容；照片、文字和音频播放插件。逐一分析，照片我们可以使用<img>标签添加，也可以通过背景图片添加。这二者可以任选其一，但我们选择后者，因为后者是不占用内容空间。

  （1）使用一个类名为img的标签用于设置背景图片。

  <!-- 用于插入背景图  -->
  <div class="img"></div>

  （2）对于文字部分，使用标题标签和段落标签。同时可以选择用div标签包裹起来，方便对文字部分整体内容的设置。

    <!-- 用于对文字部分的样式设计 -->
    <div class="text">
        <h4>反方向的钟</h4>
        <h5>周杰伦</h5>
        <p>穿梭时间画面的钟</p>
        <p>从反方向开始移动</p>
        <p>回到当初爱你的时空</p>
        <p>停格内容不忠</p>
    </div>

（3）对于第三部分音频播放插件，我们首先需要准备好一个你喜欢的源文件片段和标签<audio>来设置。

    <!-- 音频插件以及对于是否可见(controls)属性值的设置 -->
    <audio id="audio" src="./反方向的钟.mp3" controls></audio>

  对于各部分的设置完成后我们结合并查看一下效果；

    <div class="scale-up-center">
    <div class="img"></div>
    <div class="text">
        <h4>反方向的钟</h4>
        <h5>周杰伦</h5>
        <p>穿梭时间画面的钟</p>
        <p>从反方向开始移动</p>
        <p>回到当初爱你的时空</p>
        <p>停格内容不忠</p>
    </div>
    <audio id="audio" src="./反方向的钟.mp3" controls></audio>
    </div>

效果图：

  我们基本对于html部分内容显示的部分基本完成。

css部分

  由以上html完成的部分可以看出，我们还需要对背景和卡片样式的设计、背景图片、以及文字部分的样式设计。

  （1）背景部分和卡片样式部分

/*通用选择器 设置内外边距为0 */     
      * {
            margin: 0;
            padding: 0;
        }
/*设置背景颜色*/
        body {
            background-color: #3a71a4;
        }
/*对卡片样式的设置*/
/*设置阴影的属性box-shadow*/
/*设置卡片的外边距和居中显示的效果*/
        .scale-up-center {
            width: 620px;
            height: 420px;
            border-radius: 49px;
            background: linear-gradient(145deg, #366999, #2d5881);
            box-shadow: 41px 41px 0px #2b537a,
                -41px -41px 0px #10adeb;
            margin: 10% auto;
        }

  效果图如下：

ps：对者如果想添加下动画可以试一下在类.scale-up-center中添加动画效果以及对关键帧的描述部分；

 .scale-up-center {
            -webkit-animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
            animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
            overflow: hidden;
        }

/*关键帧*/
        @-webkit-keyframes scale-up-center {
            0% {
                -webkit-transform: scale(0.5);
                transform: scale(0.5);
            }

            100% {
                -webkit-transform: scale(1);
                transform: scale(1);
            }
        }

        @keyframes scale-up-center {
            0% {
                -webkit-transform: scale(0.5);
                transform: scale(0.5);
            }

            100% {
                -webkit-transform: scale(1);
                transform: scale(1);
            }
        }

   （2）设置背景图片部分

/*设置背景图片大小 路径 以及位置的设计*/
        .img {
            width: 200px;
            height: 200px;
            background: url(./image/jay.jpg) no-repeat center center;
            background-size: cover;
            border-radius: 5px;
            display: inline-block;
            margin-left: 50px;
            margin-top: 50px;
        }

  效果图：

   由此可见，两个div标签都是块级元素。产生了布局上的小问题。解决这个的办法有很多，我是用了一个新的div标签将背景和文字部分的布局设置为了flex。

html部分：

        <div class="display">
            <div class="img"></div>
            <div class="text">
                <h4>反方向的钟</h4>
                <h5>周杰伦</h5>
                <p>穿梭时间画面的钟</p>
                <p>从反方向开始移动</p>
                <p>回到当初爱你的时空</p>
                <p>停格内容不忠</p>
            </div>
        </div>

css部分：

.display { display: flex;}

效果图：

   （3）设置文字样式和audio插件布局

/*设置文本内容的布局和文字的样式、大小和行间距*/
      .text {
            display: inline-block;
            width: 200px;
            height: 200px;
            text-align: center;
            margin: 60px;
            line-height: 30px;
            font-family: "楷体";
        }
        h4 {
            font-size: 25px; 
        }
        h5 {
            font-size: 15px;
            font-weight: 600;    
        }
        p {
            font-size: 18px;
        }

/*设置audio插件的位置样式*/
        #audio{
            margin-left: 40%;
        }

效果图：

 至此，就完成基本上对于效果图一的所有内容的设置了。以下使用一点简单的js知识来通过按钮绑定是否播放的事件完成对audio插件的优化。有兴趣可以了解一下哦。

js部分

  对于js的设计思路大概就是通过两个按钮添加事件监听器(addEventListener)来控制播放和暂停。从而隐藏audio插件。对于这部分html部分和css部分我会在源代码中给出，此处不再进行多余的叙述。

js

            var audioEla = document.getElementById("audio");
            function mouseClick() {
                audioEla.play();
            }
            function stopClick() {
                audioEla.pause();
            }
            window.onload = function () {
                var a = document.getElementById("select")
                var b = document.getElementById("stop")
                a.addEventListener("click", mouseClick(), false)
                b.addEventListener("click", stopClick(), false)
            }

效果图：

源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>my card</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #3a71a4;
        }

        .scale-up-center {
            width: 620px;
            height: 420px;
            border-radius: 49px;
            background: linear-gradient(145deg, #366999, #2d5881);
            box-shadow: 41px 41px 0px #2b537a,
                -41px -41px 0px #10adeb;
            margin: 10% auto;
            -webkit-animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
            animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
            overflow: hidden;
        }

        @-webkit-keyframes scale-up-center {
            0% {
                -webkit-transform: scale(0.5);
                transform: scale(0.5);
            }

            100% {
                -webkit-transform: scale(1);
                transform: scale(1);
            }
        }

        @keyframes scale-up-center {
            0% {
                -webkit-transform: scale(0.5);
                transform: scale(0.5);
            }

            100% {
                -webkit-transform: scale(1);
                transform: scale(1);
            }
        }

        .img {
            width: 200px;
            height: 200px;
            background: url(./image/jay.jpg) no-repeat center center;
            background-size: cover;
            border-radius: 5px;
            display: inline-block;
            margin-left: 50px;
            margin-top: 50px;
        }
        .text {
            display: inline-block;
            width: 200px;
            height: 200px;
            text-align: center;
            margin: 60px;
            line-height: 30px;
            font-family: "楷体";
        }
        h4 {
            font-size: 25px; 
        }
        h5 {
            font-size: 15px;
            font-weight: 600;    
        }
        p {
            font-size: 18px;
        }
        .display {
            display: flex;
        }
        input {
            width: 50px;
            height: 30px;
            font-size: 16px;
            color: #366999;
            border: 1px solid #366999;
            border-radius: 5px;
            
            margin-bottom: 5%;
        }
        #select{
            margin-left: 40%;
        }
        #stop{
            margin-right: 40%;
        }
        /* #audio{
            margin-left: 40%;
        } */
    </style>
</head>
<body>
    <div class="scale-up-center">
        <div class="display">
            <div class="img"></div>
            <div class="text">
                <h4>反方向的钟</h4>
                <h5>周杰伦</h5>
                <p>穿梭时间画面的钟</p>
                <p>从反方向开始移动</p>
                <p>回到当初爱你的时空</p>
                <p>停格内容不忠</p>
            </div>
        </div>
        <input type="button" value="播放" id="select" onclick="mouseClick()">
        <input type="button" value="暂停" id="stop" onclick="stopClick()">
        <audio id="audio" src="./反方向的钟.mp3"></audio>
        <script>
            var audioEla = document.getElementById("audio");
            function mouseClick() {
                audioEla.play();
            }
            function stopClick() {
                audioEla.pause();
            }
            window.onload = function () {
                var a = document.getElementById("select")
                var b = document.getElementById("stop")
                a.addEventListener("click", mouseClick(), false)
                b.addEventListener("click", stopClick(), false)
            }   
        </script>
    </div>
</body>
</html>

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布