【JavaScript】王者荣耀英雄卡牌动画切换效果

小陈从不熬夜

于 2024-07-20 19:14:20 发布

阅读量272

点赞数 13

分类专栏： JavaScript从入门到实战文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_57467129/article/details/140575897

版权

JavaScript从入门到实战专栏收录该内容

2 篇文章 0 订阅

订阅专栏

动画呈现

代码详解

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>王者英雄卡牌动画切换</title>
    <style>
        * {
            box-sizing: border-box;
        }
        body {
            font-family: 'Muli', sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            overflow: hidden;
            margin: 0;
        }
		/* 设置容器样式 */
        .container {    
            display: flex;
            width: 90vw;
        }
		/* 设置图片面板样式 */
        .picture {
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            height: 80vh;
            border-radius: 50px;
            color: #fff;
            cursor: pointer;
            flex: 0.5;
            margin: 10px;
            position: relative;
            transition: all 700ms ease-in;
        }
		/* 设置图片中的标签 */
        .picture h3 {
            font-size: 24px;
            position: absolute;
            bottom: 20px;
            left: 20px;
            margin: 0;
            opacity: 0;
        }
		/* 设置图片点击激活状态时,flex属性将变为5，使其宽度增大。 */
        .picture.active {
            flex: 5;
        }
		/* 设置当图片激活时,内部的<h3>元素将变为不透明，并有一个0.3秒的渐变过渡效果，延迟0.4秒后开始。 */
        .picture.active h3 {
            opacity: 1;
            transition: opacity 0.3s ease-in 0.4s;
        }
		/* 媒体查询针对最大宽度为480px的屏幕，调整.container的宽度为100%，并隐藏第四个和第五个.picture元素。 */
        @media (max-width: 480px) {
            .container {
                width: 100vw;
            }

            .picture:nth-of-type(4),
            .picture:nth-of-type(5) {
                display: none;
            }
        }
    </style>
    <script>
		// 定义一个匿名函数用于处理面板点击事件
        window.onload = function(){		
            const pictures = document.querySelectorAll('.picture')     //获取所有类名为.picture的元素
                pictures.forEach(picture => {						//遍历所有面板元素，并为每个面板添加点击事件
                    picture.addEventListener('click', () => {
                        removeActiveClasses()
                        picture.classList.add('active')
                    })
                })
				// 移除所有面板的激活状态
            function removeActiveClasses() {
                pictures.forEach(picture => {
                    picture.classList.remove('active')
                })
            }    
        }
        
    </script>
</head>

<body>
    <div class="container">
        <div class="picture active"
            style="background-image: url('https://lcmimage.ecology.smoba.qq.com/public/dfafd41425edab7a96a36f19a977f217.jpg?sign=1721470172-M4NMJW-0-ea8a44845fde9f63d49a30d1b3e887e3&imageMogr2/strip/format/webp/quality/80!')">
            <h3>时之祈愿 瑶</h3>
        </div>
        <div class="picture"
            style="background-image: url('https://lcmimage.ecology.smoba.qq.com/public/6a20f810c7355227b6922aa885959fc6.jpg?sign=1721470464-xd7ir3-0-79e4fb6b348bc8bae786f87866b384d8&imageMogr2/strip/format/webp/quality/80!')">
            <h3>心动手记 多利亚</h3>
        </div>
        <div class="picture"
            style="background-image: url('https://lcmimage.ecology.smoba.qq.com/public/af10c57592f69fd5f3c87c10fcae1ad1.jpg?sign=1721470528-XvVdch-0-fbe0ab12f33d8776f7bc9e1dbf118086&imageMogr2/strip/format/webp/quality/80!')">
            <h3>至美·乘鲤谣 西施</h3>
        </div>
        <div class="picture"
            style="background-image: url('https://lcmimage.ecology.smoba.qq.com/public/12f356942878f5fc5706c9a308e1754e.jpg?sign=1721470592-WkmBC8-0-4d63acb1f01efabed6517bdded51c84c&imageMogr2/strip/format/webp/quality/80!')">
            <h3>乘龙·聚宝船 安琪拉</h3>
        </div>
        <div class="picture"
            style="background-image: url('https://lcmimage.ecology.smoba.qq.com/public/fa6c560ee4fdeab982f2504409a3a906.jpg?sign=1721470692-3dZjl2-0-5a663d548c28173b3206b4b7f521d0b7&imageMogr2/strip/format/webp/quality/80!')">
            <h3>时之魔女 小乔</h3>
        </div>
		<!-- 由于图片分辨率较高，且不是保存在本地，故图片刚渲染时卡顿时正常的情况，缓存一会就好了 -->
    </div>
</body>

</html>

感谢点赞、收藏加关注~