前端的一个简单的小项目

(本文章主要内容包括 点击事件，hover，transition效果 如有Bug或者写错字体的话请指出来 谢谢 未经过本人允许禁止转载！ 禁止转载! 禁止转载!)

css部分

<style>
        * {
            margin: 0;
            padding: 0;
        }

        .wrap {/* 用于包裹的大盒子 */
            width: 100%;
            height: 100vh;
            display: flex;
            padding-top: 100px;
            padding-left: 100px;
        }

        .card {/* 卡片盒子 */
            width: 440px;
            
            height: 250px;
            position: relative;
        }

        .rolebg {/* 卡片背景盒子 */
            width: 440px;
            height: 250px;
             /* 设置一个圆角边框 */
            border-radius: 20px;
            /* 超出的部分先隐藏 */
            overflow: hidden;
            /* 设定一个缓动的时间为2秒 */
            transition: 2s; 
           
        }

        .rolebg img {
            width: 100%;
            height: 100%;
            /* 把角色背景图片等比例裁剪 */
            object-fit: cover;
            
        }

        .content {/* 文字内容盒子 */
            width: 440px;
            padding: 10px;
            color: #080808;
            position: absolute;
            bottom: -10px;
            /* 设置一个不透明度 */
            opacity: 1;
            /* 设置文字内容向下移动的时间为1秒 */
            transition: 1s;
        }

        .content h1 {
            font-size: 20px;
        }

        .content p {
            font-size: 14px;
            font-weight: 200;
            padding-top: 10px;
        }

        .card:hover .rolebg {
            /* 放大1.2倍 */
            transform: scale(1.2);
            
        }

        .card:hover .content {
            opacity: 1;
            /* 设置根据Y轴移动的距离 */
            transform: translateY(120px);
            
        }
    </style>

js部分

<script>
        //点击事件，点击按钮后弹出警示框
        const btn = document.querySelector("#ming")
        btn.addEventListener('click',function () {
            alert("命运2·拼接者:2017年6月,在知名游戏娱乐媒体IGN评选的E3各项最佳上,《命运2》获得最佳射击游戏奖提名.2019年12月,《命运2》获得TGA 2019颁奖典礼最佳社区支持奖.2022年12月,获得IGN2022游戏大奖最佳持续运营提名奖。 ")
        })
    </script>

<button id="ming">命运2·拼接者</button>
    <div class="wrap">
        <div class="card">
            <div class="rolebg">
                <img src="./OIP-C.jpg" alt="">
            </div>
            <div class="content">
                <h1>Destiny 2:Season of the Splice</h1>
                <p>PlayStation 5 - Xbox Series X/S - PlayStation 4 - Xbox </p>
            </div>
        </div>
    </div>

这是一个简简单单的小项目，包含一些简单的样式，比如图片放大，文字向下移动，缓动效果、时间，点击事件，鼠标悬停在图片上图片放大同时文字向下移动。

谢谢观看，如果有哪些错别字或者是有bug和错误的地方，请评论出来，我好及时改正，不喜勿喷，谢谢！！！