目录
目的
代码
技术细节
1. HTML结构
基本结构
具体内容
内容布局
2. CSS样式
3. JavaScript功能
小结
目的
为了在用户浏览网页时制造更好的视觉效果和交互体验
代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 引入Google Fonts中的Noto Serif SC字体 --><link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&display=swap" rel="stylesheet">
<style>
*{box-sizing: border-box;margin: 0;padding: 0;font-family: 'Noto Serif SC', serif; /* 应用行书字体 */
}.wrapper{width: 100%;height: 100vh;display: flex;align-items: center;justify-content: center;
}
.container{height: 400px;display: flex;flex-wrap: nowrap;justify-content: start;
}
.card{width: 80px;border-radius: .75rem;background-size: cover;cursor: pointer;overflow: hidden;border-radius: 2rem;margin: 0 10px;display: flex;align-items: flex-end;transition: .6s cubic-bezier(.28,-0.03,0,.99);box-shadow: 0px 10px 30px -5px rgba(0,0,0,0.8);
}.card > .row{color: white;display: flex;flex-wrap: nowrap;
}
.card > .row >.icon{background: #223;color: white;border-radius: 50%;width: 50px;display: flex;justify-content: center;align-items: center;margin: 15px;
}
.card > .row > .description{display: flex;justify-content: center;flex-direction: column;overflow: hidden;height: 80px;width: 500px;opacity: 0;transform: translateY(30px);transition-delay: .3s;transition: all .3s ease;
}
.description p{color: #b0b0ba;padding-top: 5px;
}
.description h4{text-transform: uppercase;
}
input{display: none;
}
input:checked + label {width: 500px;
}
input:checked + label .description{opacity: 1 !important;transform: translateY(0) !important;
}
.card[for ="c1"]{background-image: url(./img/5.jpg);
}
.card[for ="c2"]{background-image: url(./img/1.jpg);
}
.card[for ="c3"]{background-image: url(./img/6.jpg);
}
.card[for ="c4"]{background-image: url(./img/4.jpg);
}
</style>
</head><body>
<div></div>
<hr width="2000px"><div class="cs3"></div><div class="wrapper"><div class="container"><input type="radio" name="slide" id="c1" checked><label for="c1" class="card"><div class="row"><div class="icon">1</div><div class="description"><h4>将进酒</h4><p>君不见黄河之水天上来，奔流到海不复回。</p></div></div></label><input type="radio" name="slide" id="c2" ><label for="c2" class="card"><div class="row"><div class="icon">2</div><div class="description"><h4>关山月</h4><p>明月出天山，苍茫云海间</p></div></div></label><input type="radio" name="slide" id="c3" ><label for="c3" class="card"><div class="row"><div class="icon">3</div><div class="description"><h4>月下独酌</h4><p>花间一壶酒，独酌无相亲</p></div></div></label><input type="radio" name="slide" id="c4" ><label for="c4" class="card"><div class="row"><div class="icon">4</div><div class="description"><h4>江上吟</h4><p>木兰之枻沙棠舟，玉箫金管坐两头</p></div></div></label></div></div><script>// 获取所有的radio按钮const radios = document.querySelectorAll('input[name="slide"]');let current = 0;// 设置自动轮播setInterval(() => {radios[current].checked = false;current = (current + 1) % radios.length;radios[current].checked = true;}, 3000); // 3秒切换一次
</script>
</body>
</html>配图的url需要是自己的路径，如果您需要可以联系我
技术细节
1. HTML结构
基本结构
<!DOCTYPE html>: 声明文档类型为HTML5。<html lang="en">: 根元素，语言设置为英语。<head>: 包含文档的元数据，如字符集、视口设置、标题和样式表链接。<body>: 包含网页的主要内容。
具体内容
<meta charset="UTF-8">: 设置字符编码为UTF-8。<meta name="viewport" content="width=device-width, initial-scale=1.0">: 设置视口，使页面适应不同设备的屏幕宽度。<title>Document</title>: 设置网页标题。<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&display=swap" rel="stylesheet">: 引入Google Fonts中的“Noto Serif SC”字体。
内容布局
<div class="wrapper">: 包裹整个内容区域，使用Flexbox布局使其居中对齐。<div class="container">: 包含卡片的容器，使用Flexbox布局使其水平排列。<input type="radio" name="slide" id="c1" checked>: 单选按钮，用于控制卡片的显示。<label for="c1" class="card">: 卡片的标签，包含图标和描述。
2. CSS样式
基本样式
*: 通配选择器，设置所有元素的盒模型为border-box，去除默认的margin和padding，设置默认字体。.wrapper: 设置宽度为100%，高度为视口高度，使用Flexbox布局使其居中对齐。.container: 设置高度为400px，使用Flexbox布局使其水平排列。.card: 设置卡片的样式，包括宽度、边框半径、背景大小、鼠标指针样式、过渡效果和阴影。.card > .row: 设置行的样式，包括颜色和Flexbox布局。.card > .row > .icon: 设置图标的样式，包括背景颜色、文字颜色、边框半径、宽度、Flexbox布局和居中对齐。.card > .row > .description: 设置描述的样式，包括Flexbox布局、溢出隐藏、高度、宽度、透明度、变换和过渡效果。.description p: 设置段落的样式，包括颜色和内边距。.description h4: 设置标题的样式，包括文本转换为大写。input: 隐藏单选按钮。input:checked + label: 当单选按钮被选中时，设置标签的宽度。input:checked + label .description: 当单选按钮被选中时，设置描述的透明度和变换。.card[for="c1"]: 设置特定卡片的背景图片。.card[for="c2"]: 设置特定卡片的背景图片。.card[for="c3"]: 设置特定卡片的背景图片。.card[for="c4"]: 设置特定卡片的背景图片。
3. JavaScript功能
自动轮播
- 获取所有单选按钮: 使用
document.querySelectorAll('input[name="slide"]')获取所有具有相同name属性的单选按钮。- 设置当前索引: 初始化当前索引为0。
- 设置定时器: 使用
setInterval函数每隔3秒切换一次选中的单选按钮，实现自动轮播效果。
小结
本次分享是实现了一个带有自动轮播功能的卡片展示页面。通过使用HTML结构、CSS样式和JavaScript脚本，实现了卡片的切换和自动播放效果。具体功能包括：
- HTML: 定义了页面的基本结构和内容。
- CSS: 定义了页面的样式，包括布局、字体、颜色、过渡效果等。
- JavaScript: 实现了自动轮播功能，通过定时器控制单选按钮的切换。
最后感谢阅览，感谢您顺手三连
