动画呈现
代码详解
<!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>感谢点赞、收藏加关注~
