CSS实现视频播放按钮键

帕巴啦

已于 2023-10-09 18:10:12 修改

阅读量644

点赞数

文章标签： css 前端 html 学习开发语言

于 2023-10-09 18:06:45 首次发布

本文链接：https://blog.csdn.net/azhao100/article/details/133710058

版权

这篇文章以电影《长安三万里》为例，用CSS实现一个简单的视频播放按钮。

1.准备材料

01.一张电影宣传图
02.一张播放按钮图
如图：将所需图片保存在代码文件夹中，或直接在网上复制图片链接均可，我直接保存在文件夹中了。
在这里插入图片描述

2.代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第三次练习-视频播放</title>
    <style>
        .play_name{   
            width: 332.064px;
            height: 540px;
            background-image: url(./Changan.jpg);   
                    /* 用background-image: url(图片路径) 属性导入背景图片 */
            background-size: cover;
                    /* 设置背景图的大小，例如，主要有以下几种：
                        auto：默认值，不改变长度和宽度
                        over：把图片扩展至足够大，以使背景图片完全覆盖背景区域
                        contain：把背景图片扩至至最大尺寸，以使其宽度和高度完全使用内容区域
                        1024px：图片显示的宽和高为1024像素
                        1024px 680px：图片显示的宽为1024像素，高为680像素
                        60%：图片显示的宽度是图片大小的60%
                        60% 80%：图片显示的宽度是图片大小的60%，高度是80%
                    */
            cursor: pointer;
                    /* cursor：CSS属性，设置光标的类型，在鼠标指针悬停在元素上时显示相应样式 */
            border: solid 1px #a1a499;
            border-radius: 2%;
                    /* 设置图片的外边框圆角，美化作用 */
        }

        .play_name:hover{
            border: solid 1px #dfaf6a;
                /* 设置鼠标效果 */
        } 

        .play_name:hover .ico_play{
            background-image: url(./ico_play.png);
                /* 插入鼠标效果的按钮键的图片 */
        }

        .ico_play {
            position: absolute;
            top: 250px;
            left: 140px;
            width: 60px;
            height: 60px;
            /* 设置按钮键的位置 */
        }

    </style>

</head>
<body>
    <div class="play_name">
        <a href="https://v.qq.com/x/cover/mzc00200887tz3a/j0047vc63o5.html" target="_blank">
            <!-- 插入电影链接 注意这两个标签的嵌套关系！-->
            <div class="ico_play"></div>
        </a>
    </div>
</body>
</html>