首页 > 编程语言 >【JavaScript】王者荣耀英雄卡牌动画切换效果

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

时间:2024-07-20 20:26:47浏览次数:19  
标签:动画 picture container flex JavaScript 卡牌 background active 面板

动画呈现 

 

代码详解

<!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>

 感谢点赞、收藏加关注~

 

标签:动画,picture,container,flex,JavaScript,卡牌,background,active,面板
From: https://blog.csdn.net/weixin_57467129/article/details/140575897

相关文章

  • 程序式动画
    Introduction 介绍什么是程序动画?程序动画是一种计算机动画,用于实时自动生成动画,以允许比使用预定义动画创建的更多样化的一系列动作—维基百科上的数据举个例子,GTA5的人物,站在台阶边缘,一只脚在台阶上,另一只脚则自然得下落到地面上,如果是普通的动画系统,一只脚站在台阶上,另一......
  • JavaScript - jSignature移动端手写签名
    <html><head><scriptsrc="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script><scriptsrc="https://cdn.bootcdn.net/ajax/libs/jSignature/2.1.3/jSignature.min.js"></script>......
  • javascript条件判断语句。
    if语句条件满足就执行,不满足就不执行if(条件){语句}ifelse语句条件满足,执行语句1,条件不满足,执行语句2if(条件){语句1}else{语句2}ifelseifelseif… if(条件1){ 语句1 }else{ 语句2 }if(条件2){ 语句2 }el......
  • JavaScript 基本语法
    JavaScript基本语法1、简介1.1、概念1.2、JavaScript的组成部分1.3、前端三大件2、编写及运行3、关键字(具有特殊作用的字)4、变量4.1、声明变量的关键字:var4.2、命名规范4.3、经典的变量命名法5、运算符5.1、赋值运算符5.2、加性运算符5.3、乘性运算5.4、一元运算符5.5......
  • JavaScript Program to print pyramid pattern (打印金字塔图案的程序)
     编写程序打印由星星组成的金字塔图案 例子: 输入:n=6输出:    *    **    ***    ****    *****    ******     *****    ****    ***    **    ......
  • Javascript 在我的本地服务器上运行,但在 WordPress 上不起作用
    大家好,我有一个问题。我有一个在本地服务器中完美运行的模板/主题,但是当我将其移动到Wordpress时,根据我的研究,我得到了“jQuery不兼容”的信息。 我附上了代码的图像。你能帮我一下吗,一切看起来都很完美,在我看来一切都很完美,但在Wordpress中却不然。提前谢谢你!......
  • 动画与变形技术深度解析
    动画与变形技术深度解析在微信小程序的开发中,动画和变形技术是提升用户体验的关键它们不仅能够吸引用户的注意力还能增强交互的趣味性本文将详细介绍如何利用CSS动画和变形技术,为你的小程序打造动态且吸引人的界面。01.CSS动画:让元素动起来动画是通过改变元......
  • JavaScript与DOM的奇妙探险:从入门到精通的实战笔记
    文章目录JavaScript基本说明特点两种使用方式在script中写使用script标签引入JS文件数据类型介绍特殊值运算符算数运算符赋值运算符逻辑运算符:![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/bbf5c150699845af837d3c45c926e941.png)条件运算符数组的定义基......
  • javaScript常用对象
    1. Array对象JavaScriptArray对象用于定义数组1.1定义格式数组的定义格式有两种:方式1var变量名=newArray(元素列表);例如:vararr=newArray(1,2,3);//1,2,3是存储在数组中的数据(元素)方式2var变量名=[元素列表];例如:vararr=[1,2,3];//1,2,3是......
  • JavaScript 异步编程:提升现代Web应用的性能与体验
    异步概念解析在编程领域,异步(Asynchronous)是一种允许程序继续执行而不等待某个操作完成的机制,与之相反的是同步(Synchronous),其中程序会暂停并等待每个操作完成才继续下一步。异步编程的核心优势在于提高了应用程序的响应性和资源利用率。想象一下,你正在厨房准备晚餐,同步操作......