<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>书籍推荐与Instagram轮播图</title>
<!-- Google Fonts (Quicksand for body, Roboto for general text) -->
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<!-- Font Awesome for ratings (kept for star icons) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
/****************************************
* 全局重置样式
*****************************************/
*,
*::after,
*::before {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/****************************************
* CSS变量定义（基于TENG YUAN）
*****************************************/
:root {
--max-width-post: 420px;
/* TENG YUAN 颜色 */
--accent: #799fb4;
--accentRGB: 121, 159, 180;
--support: #99ccff; /* 使用hex值保持视觉一致性，RGB不同 */
--supportRGB: 186, 132, 130; /* 来自之前项目的红棕色 */
--feature: #a6b0b4;
--featureRGB: 166, 176, 180;
--dark: #1c1a1a;
--darkRGB: 28, 26, 26;
--lighter: #e2e2e2;
--lighterRGB: 226, 226, 226;
--light: #d2d2d2;
--lightRGB: 210, 210, 210;
--lightest: #ffffff;
--lightestRGB: 225, 225, 225;
--darkest: #101010;
--darkestRGB: 16, 16, 16;
/* 此组件的映射变量 */
--primary-color: var(--accent);
--secondary-color: var(--support);
--text-color-dark: var(--dark);
--text-color-light: var(--lighter);
--card-bg: var(--lighter);
--border-light: 1px solid RGBA(var(--accentRGB), 0.2);
--shadow-subtle: 0px 0px 15px -5px RGBA(0, 0, 0, 0.1);
--shadow-hover: 0 15px 35px rgba(0, 0, 0, 0.4);
--heart-fill-color: #e76f51; /* 柔和的珊瑚色用于心形 */
--star-color: #ff9700; /* 橙色用于星星 */
/* 字体变量 */
--font-body: 'Quicksand', sans-serif;
--font-secondary: 'Roboto', sans-serif;
/* 字体大小 */
--font-size-sm: clamp(0.7rem, 0.91vw + 0.47rem, 1.2rem);
--font-size-base: clamp(0.88rem, 1.14vw + 0.59rem, 1.5rem);
--font-size-md: clamp(1.09rem, 1.42vw + 0.74rem, 1.88rem);
--font-size-lg: clamp(1.37rem, 1.78vw + 0.92rem, 2.34rem);
}
/****************************************
* 默认主体样式（来自TENG YUAN）
*****************************************/
body {
width: 100vw;
min-height: 100vh;
font-family: var(--font-body);
color: var(--text-color-dark);
background: linear-gradient(360deg, RGBA(var(--accentRGB), 0.35) 0%, RGBA(var(--lighterRGB), 1) 70%),
linear-gradient(135deg, RGBA(var(--supportRGB), 0.35) 10%, RGBA(var(--supportRGB), 0) 80%),
linear-gradient(225deg, RGBA(var(--featureRGB), 0.35) 10%, RGBA(var(--featureRGB), 0) 80%),
linear-gradient(315deg, RGBA(var(--supportRGB), 0.35) 100%, RGBA(var(--supportRGB), 0) 70%);
background-attachment: fixed;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
@supports (height: 100dvh) {
body {
height: 100dvh;
}
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
}
/****************************************
* 主要内容容器
*****************************************/
.main-container {
display: flex;
max-width: 1200px;
width: 100%;
gap: 30px;
background-color: var(--light); /* 内容区域的背景色 */
border-radius: 20px;
box-shadow: 0px 0px 50px -10px RGBA(000, 000, 000, 0.25);
padding: 30px;
}
/****************************************
* 书籍推荐区
*****************************************/
.books-section {
flex: 1;
max-height: 80vh;
overflow: hidden;
position: relative;
}
.book-cards {
display: flex;
flex-direction: column;
gap: 20px; /* 书籍卡片之间的间距 */
animation: scrollBooks 30s linear infinite;
}
.book-cards:hover {
animation-play-state: paused;
}
/* 书籍卡片样式 */
.book-card {
background-color: var(--card-bg);
height: 250px; /* 固定高度 */
box-shadow: var(--shadow-subtle);
border-radius: 15px; /* 圆角 */
display: flex;
flex-direction: column;
cursor: pointer;
padding: 0 0 20px 20px;
color: RGBA(var(--darkRGB), 0.75); /* 较浅的深色文本 */
transition: transform 0.3s ease, box-shadow 0.3s ease;
flex-shrink: 0; /* 防止卡片在flex容器中缩小 */
}
.book-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-hover);
}
.content-wrapper {
display: flex;
border-bottom: var(--border-light);
position: relative;
height: 100%;
}
.book-card-img {
width: 160px;
margin-top: -35px;
border-radius: 8px; /* 略微圆角的图片 */
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
border: 2px solid var(--accent); /* 强调色边框 */
object-fit: cover;
margin-bottom: 20px;
transition: transform 0.3s ease;
}
.book-card-img:hover {
transform: scale(1.04);
}
.card-content {
color: var(--text-color-dark);
padding: 30px;
overflow: hidden;
position: relative;
flex: 1;
}
.book-name {
font-weight: 600; /* 略粗 */
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
font-size: 1.2rem; /* 略大 */
}
.book-by {
font-size: 14px;
color: RGBA(var(--darkRGB), 0.6); /* 柔和的文本 */
margin-top: 4px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
/* 评分样式 */
.rate {
display: inline-block;
white-space: nowrap;
margin-top: 10px;
}
.rating {
border: none;
display: inline-block;
}
.rating > input {
display: none;
}
.rating > label {
color: RGBA(var(--featureRGB), 0.5); /* 未选中星星的浅灰色 */
float: right;
font-size: 1em; /* 略大的星星 */
margin-right: 5px;
}
.rating > label:before {
content: "\f005";
font-family: "Font Awesome 6 Free";
font-weight: 900;
}
.rating > input:checked ~ label,
.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
color: var(--star-color); /* 选中星星的橙色 */
}
.card-vote {
color: RGBA(var(--darkRGB), 0.6);
font-size: 13px;
margin-left: 7px;
}
.card-sum {
color: var(--text-color-dark);
font-size: 14px;
line-height: 1.6em;
margin-top: 15px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* 点赞区 */
.likes {
display: flex;
align-items: center;
padding: 10px 20px;
}
/* 移除 .like-profile 和 .like-name 的样式，因为它们将被移除 */
/****************************************
* Instagram区
*****************************************/
.instagram-section {
flex: 1;
max-width: var(--max-width-post);
display: flex;
justify-content: center;
align-items: center;
}
/* Instagram帖子样式 */
.instagram {
--pading-horizontal: 16px;
border: var(--border-light); /* 浅色边框 */
border-radius: 20px;
background-color: RGBA(var(--lighterRGB), 0.1); /* 半透明浅色背景 */
backdrop-filter: blur(10px);
z-index: 2;
overflow: hidden;
transition: all 0.3s ease;
width: 100%;
}
.instagram:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-hover);
}
.instagram__header {
padding-block: 12px;
border-bottom: var(--border-light);
display: flex;
align-items: center;
padding-inline: var(--pading-horizontal);
background-color: RGBA(var(--accentRGB), 0.2); /* 半透明强调色背景 */
color: var(--text-color-dark);
}
.instagram__header figure {
padding-block: 0;
margin: 0;
display: flex;
align-items: center;
}
.instagram__header img {
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--primary-color); /* 强调色边框 */
margin-inline-end: 8px;
width: 42px;
height: 42px;
}
.instagram__header figcaption h4 {
font-size: var(--font-size-base);
font-weight: 600;
color: var(--text-color-dark);
}
.instagram__media {
display: flex;
border-bottom: var(--border-light);
position: relative;
height: 61.2vh;
overflow: hidden;
}
.instagram__carousel {
position: relative;
width: 100%;
height: 100%;
display: flex;
transition: transform 0.5s ease;
}
.instagram__slide {
min-width: 100%;
height: 100%;
position: relative;
}
.instagram__slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.carousel-nav {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.carousel-dots {
position: absolute;
bottom: 15px;
left: 0;
right: 0;
display: flex;
justify-content: center;
gap: 8px;
z-index: 10;
}
.carousel-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: RGBA(var(--lighterRGB), 0.5); /* 较浅的半透明 */
cursor: pointer;
transition: all 0.3s ease;
pointer-events: all;
}
.carousel-dot.active {
background: var(--primary-color); /* 强调色用于活动点 */
transform: scale(1.2);
}
.instagram__buttons {
padding-block: 12px;
padding-inline: var(--pading-horizontal);
display: flex;
justify-content: space-between;
align-items: center;
color: var(--text-color-dark);
}
.instagram__buttons .left {
display: flex;
align-items: center;
}
.instagram__buttons .left svg:nth-of-type(2) {
margin-inline: 12px;
}
.instagram__icon {
cursor: pointer;
width: 1em;
height: 1em;
font-size: var(--font-size-md);
min-width: 24px;
min-height: 24px;
transition: transform 0.2s ease, opacity 0.2s ease;
}
.instagram__icon:hover {
opacity: 0.7;
transform: scale(1.1);
}
.instagram__icon path {
stroke: var(--primary-color); /* 强调色用于图标 */
stroke-linejoin: round;
transition: all 0.3s ease;
}
.instagram__icon--comment path {
stroke-width: 2;
}
.instagram__icon--message {
margin-block-start: 3px;
}
.instagram__icon--message path {
stroke-width: 2;
}
.instagram__icon--saved path {
stroke-width: 2;
}
/* 心形图标样式 */
.instagram__icon--heart {
position: relative;
}
.instagram__icon--heart.active path {
fill: var(--heart-fill-color);
stroke: var(--heart-fill-color);
animation: heartBeat 0.6s ease;
}
@keyframes heartBeat {
0% { transform: scale(1); }
25% { transform: scale(1.2); }
50% { transform: scale(0.9); }
75% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.heart-effect {
position: absolute;
pointer-events: none;
width: 24px;
height: 24px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e76f51'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
background-size: contain;
opacity: 0;
z-index: 10;
}
/* 书籍垂直滚动动画 */
@keyframes scrollBooks {
0% {
transform: translateY(0);
}
100% {
/* 滚动整个原始内容的高度，因为我们复制了一份，所以是总高度的50% */
transform: translateY(-50%);
}
}
/****************************************
* 响应式调整
*****************************************/
@media (max-width: 992px) {
.main-container {
flex-direction: column;
align-items: center;
padding: 20px; /* 调整小屏幕的内边距 */
}
.books-section {
max-height: 50vh;
width: 100%;
max-width: 600px;
}
.instagram-section {
width: 100%;
max-width: 600px;
}
@keyframes scrollBooks {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-50%); /* 调整为50% */
}
}
}
@media (max-width: 768px) {
.instagram {
max-width: 95%;
}
}
@media (max-width: 480px) {
.instagram__header {
padding-inline: 10px;
}
.instagram__buttons {
padding-inline: 10px;
}
.book-card {
height: auto;
padding-bottom: 15px;
}
.content-wrapper {
flex-direction: column;
align-items: center;
}
.book-card-img {
margin-top: 15px;
width: 120px;
}
.card-content {
padding: 15px;
}
}
</style>
</head>
<body>
<!-- 包含两个部分的主容器 -->
<div class="main-container">
<!-- 书籍推荐区 -->
<section class="books-section">
<div class="book-cards">
<!-- 书籍卡片 1 -->
<div class="book-card">
<div class="content-wrapper">
<img src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F6%2F2019%2F07%2Fchances-are-1-2000.jpg&q=85" alt="也许有机会" class="book-card-img">
<div class="card-content">
<div class="book-name">也许有机会</div>
<div class="book-by">作者：理查德·鲁索</div>
<div class="rate">
<fieldset class="rating book-rate">
<input type="checkbox" id="star-c1" name="rating" value="5">
<label class="full" for="star-c1"></label>
<input type="checkbox" id="star-c2" name="rating" value="4">
<label class="full" for="star-c2"></label>
<input type="checkbox" id="star-c3" name="rating" value="3">
<label class="full" for="star-c3"></label>
<input type="checkbox" id="star-c4" name="rating" value="2">
<label class="full" for="star-c4"></label>
<input type="checkbox" id="star-c5" name="rating" value="1">
<label class="full" for="star-c5"></label>
</fieldset>
<span class="book-voters card-vote">1,987 位投票者</span>
</div>
<div class="book-sum card-sum">多年来，伊丽莎白·吉尔伯特的书籍为各年龄段和各行各业的读者带来了灵感和力量。</div>
</div>
</div>
<div class="likes">
<!-- 朋友头像和喜欢信息已移除 -->
</div>
</div>
<!-- 书籍卡片 2 -->
<div class="book-card">
<div class="content-wrapper">
<img src="https://images-na.ssl-images-amazon.com/images/I/7167iiDUeAL.jpg" alt="多米尼加人" class="book-card-img">
<div class="card-content">
<div class="book-name">多米尼加人</div>
<div class="book-by">作者：安吉·克鲁兹</div>
<div class="rate">
<fieldset class="rating book-rate">
<input type="checkbox" id="star-c6" name="rating" value="5">
<label class="full" for="star-c6"></label>
<input type="checkbox" id="star-c7" name="rating" value="4">
<label class="full" for="star-c7"></label>
<input type="checkbox" id="star-c8" name="rating" value="3">
<label class="full" for="star-c8"></label>
<input type="checkbox" id="star-c9" name="rating" value="2">
<label class="full" for="star-c9"></label>
<input type="checkbox" id="star-c10" name="rating" value="1">
<label class="full" for="star-c10"></label>
</fieldset>
<span class="book-voters card-vote">1,987 位投票者</span>
</div>
<div class="book-sum card-sum">一部关于一位年轻多米尼加女性在1960年代包办婚姻并移民纽约的有力小说。</div>
</div>
</div>
<div class="likes">
<!-- 朋友头像和喜欢信息已移除 -->
</div>
</div>
<!-- 书籍卡片 3 -->
<div class="book-card">
<div class="content-wrapper">
<img src="https://assets.fontsinuse.com/static/use-media-items/95/94294/full-2000x3056/5d56c6b1/cg%201.jpeg?resolution=0" alt="旅行者" class="book-card-img">
<div class="card-content">
<div class="book-name">旅行者</div>
<div class="book-by">作者：雷吉娜·波特</div>
<div class="rate">
<fieldset class="rating book-rate">
<input type="checkbox" id="star-c11" name="rating" value="5">
<label class="full" for="star-c11"></label>
<input type="checkbox" id="star-c12" name="rating" value="4">
<label class="full" for="star-c12"></label>
<input type="checkbox" id="star-c13" name="rating" value="3">
<label class="full" for="star-c13"></label>
<input type="checkbox" id="star-c14" name="rating" value="2">
<label class="full" for="star-c14"></label>
<input type="checkbox" id="star-c15" name="rating" value="1">
<label class="full" for="star-c15"></label>
</fieldset>
<span class="book-voters card-vote">1,987 位投票者</span>
</div>
<div class="book-sum card-sum">一部关于两个美国家庭交织命运的令人眼花缭乱的原创小说。</div>
</div>
</div>
<div class="likes">
<!-- 朋友头像和喜欢信息已移除 -->
</div>
</div>
<!-- 书籍卡片 4 -->
<div class="book-card">
<div class="content-wrapper">
<img src="https://images-na.ssl-images-amazon.com/images/I/91M4E+SURUL.jpg" alt="牧神午后" class="book-card-img">
<div class="card-content">
<div class="book-name">牧神午后</div>
<div class="book-by">作者：詹姆斯·拉斯顿</div>
<div class="rate">
<fieldset class="rating book-rate">
<input type="checkbox" id="star-c16" name="rating" value="5">
<label class="full" for="star-c16"></label>
<input type="checkbox" id="star-c17" name="rating" value="4">
<label class="full" for="star-c17"></label>
<input type="checkbox" id="star-18" name="rating" value="3">
<label class="full" for="star-c18"></label>
<input type="checkbox" id="star-c19" name="rating" value="2">
<label class="full" for="star-c19"></label>
<input type="checkbox" id="star-c20" name="rating" value="1">
<label class="full" for="star-c20"></label>
</fieldset>
<span class="book-voters card-vote">1,987 位投票者</span>
</div>
<div class="book-sum card-sum">一部关于一名被指控性侵的男子以及一名必须决定是否相信他的女性的尖锐、令人不安的小说。</div>
</div>
</div>
<div class="likes">
<!-- 朋友头像和喜欢信息已移除 -->
</div>
</div>
<!-- 书籍卡片 5 -->
<div class="book-card">
<div class="content-wrapper">
<img src="https://images-na.ssl-images-amazon.com/images/I/61OTY2-4anL.jpg" alt="闪光日记" class="book-card-img">
<div class="card-content">
<div class="book-name">闪光日记</div>
<div class="book-by">作者：达西·斯坦克</div>
<div class="rate">
<fieldset class="rating book-rate">
<input type="checkbox" id="star-c21" name="rating" value="5">
<label class="full" for="star-c21"></label>
<input type="checkbox" id="star-c22" name="rating" value="4">
<label class="full" for="star-c22"></label>
<input type="checkbox" id="star-c23" name="rating" value="3">
<label class="full" for="star-c23"></label>
<input type="checkbox" id="star-c24" name="rating" value="2">
<label class="full" for="star-c24"></label>
<input type="checkbox" id="star-c25" name="rating" value="1">
<label class="full" for="star-c25"></label>
</fieldset>
<span class="book-voters card-vote">1,987 位投票者</span>
</div>
<div class="book-sum card-sum">一部大胆、精彩、激进的关于更年期的探讨，来自一个令人振奋的新女权主义声音。</div>
</div>
</div>
<div class="likes">
<!-- 朋友头像和喜欢信息已移除 -->
</div>
</div>
<!-- 书籍卡片 6 -->
<div class="book-card">
<div class="content-wrapper">
<img src="https://images-na.ssl-images-amazon.com/images/I/61Vc+xM23GL.jpg" alt="野餐，逗号，闪电" class="book-card-img">
<div class="card-content">
<div class="book-name">野餐，逗号，闪电</div>
<div class="book-by">作者：露西·帕克</div>
<div class="rate">
<fieldset class="rating book-rate">
<input type="checkbox" id="star-c26" name="rating" value="5">
<label class="full" for="star-c26"></label>
<input type="checkbox" id="star-c27" name="rating" value="4">
<label class="full" for="star-c27"></label>
<input type="checkbox" id="star-c28" name="rating" value="3">
<label class="full" for="star-c28"></label>
<input type="checkbox" id="star-c29" name="rating" value="2">
<label class="full" for="star-c29"></label>
<input type="checkbox" id="star-c30" name="rating" value="1">
<label class="full" for="star-c30"></label>
</fieldset>
<span class="book-voters card-vote">1,987 位投票者</span>
</div>
<div class="book-sum card-sum">一部关于悲伤、记忆和文学变革力量的回忆录。</div>
</div>
</div>
<div class="likes">
<!-- 朋友头像和喜欢信息已移除 -->
</div>
</div>
<!-- 书籍卡片 7 -->
<div class="book-card">
<div class="content-wrapper">
<img src="https://prodimage.images-bn.com/pimages/9780525655633_p0_v5_s1200x630.jpg" alt="非常好" class="book-card-img">
<div class="card-content">
<div class="book-name">非常好</div>
<div class="book-by">作者：露西·帕克</div>
<div class="rate">
<fieldset class="rating book-rate">
<input type="checkbox" id="star-c31" name="rating" value="5">
<label class="full" for="star-c31"></label>
<input type="checkbox" id="star-c32" name="rating" value="4">
<label class="full" for="star-c32"></label>
<input type="checkbox" id="star-c33" name="rating" value="3">
<label class="full" for="star-c33"></label>
<input type="checkbox" id="star-c34" name="rating" value="2">
<label class="full" for="star-c34"></label>
<input type="checkbox" id="star-c35" name="rating" value="1">
<label class="full" for="star-c35"></label>
</fieldset>
<span class="book-voters card-vote">1,987 位投票者</span>
</div>
<div class="book-sum card-sum">一部关于新英格兰海滨小镇一个夏天性、秘密和背叛的尖锐幽默小说。</div>
</div>
</div>
<div class="likes">
<!-- 朋友头像和喜欢信息已移除 -->
</div>
</div>
<!-- 书籍卡片 8 -->
<div class="book-card">
<div class="content-wrapper">
<img src="https://images-na.ssl-images-amazon.com/images/I/71PL7BiZ5NL.jpg" alt="留下并战斗" class="book-card-img">
<div class="card-content">
<div class="book-name">留下并战斗</div>
<div class="book-by">作者：露西·帕克</div>
<div class="rate">
<fieldset class="rating book-rate">
<input type="checkbox" id="star-c36" name="rating" value="5">
<label class="full" for="star-c36"></label>
<input type="checkbox" id="star-c37" name="rating" value="4">
<label class="full" for="star-c37"></label>
<input type="checkbox" id="star-c38" name="rating" value="3">
<label class="full" for="star-c38"></label>
<input type="checkbox" id="star-c39" name="rating" value="2">
<label class="full" for="star-c39"></label>
<input type="checkbox" id="star-c40" name="rating" value="1">
<label class="full" for="star-c40"></label>
</fieldset>
<span class="book-voters card-vote">1,987 位投票者</span>
</div>
<div class="book-sum card-sum">一部关于三位女性在俄亥俄州偏远地区组成一个意想不到的家庭的小说。</div>
</div>
</div>
<div class="likes">
<!-- 朋友头像和喜欢信息已移除 -->
</div>
</div>
</div>
</section>
<!-- Instagram 轮播图区 -->
<section class="instagram-section">
<article class="instagram">
<header class="instagram__header">
<figure>
<img src="https://assets.codepen.io/108082/jake-dog.png" alt="杰克狗" width="42" height="42">
<figcaption>
<h4>杰克狗</h4>
</figcaption>
</figure>
</header>
<section class="instagram__media">
<div class="instagram__carousel">
<div class="instagram__slide">
<img src="https://assets.codepen.io/108082/jake-and-fin-1.jpg" alt="杰克和芬恩的冒险">
</div>
<div class="instagram__slide">
<img src="https://assets.codepen.io/108082/jake-and-fin-2.jpg" alt="杰克和芬恩的冒险">
</div>
<div class="instagram__slide">
<img src="https://assets.codepen.io/108082/jake-and-fin-3.jpg" alt="杰克和芬恩的冒险">
</div>
<div class="instagram__slide">
<img src="https://assets.codepen.io/108082/jake-and-fin-4.jpg" alt="杰克和芬恩的冒险">
</div>
<div class="instagram__slide">
<img src="https://assets.codepen.io/108082/jake-and-fin-5.jpg" alt="杰克和芬恩的冒险">
</div>
<div class="instagram__slide">
<img src="https://assets.codepen.io/108082/jake-and-fin-6.jpg" alt="杰克和芬恩的冒险">
</div>
<div class="instagram__slide">
<img src="https://assets.codepen.io/108082/jake-and-fin-7.jpg" alt="杰克和芬恩的冒险">
</div>
</div>
<div class="carousel-nav">
<div class="carousel-dots"></div>
</div>
</section>
<footer class="instagram__buttons">
<div class="left">
<svg class="instagram__icon instagram__icon--heart" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M16.8196 3.40477L16.8196 3.40468L16.8105 3.40435C15.9939 3.37401 15.1837 3.55848 14.4607 3.93934C13.7415 4.31818 13.1337 4.87813 12.6974 5.56376C12.3799 6.0141 12.1595 6.38237 12.0011 6.66645C11.841 6.38254 11.6182 6.01451 11.2971 5.5646C10.8588 4.88294 10.252 4.32584 9.53521 3.94728C8.81455 3.56666 8.00746 3.37954 7.19284 3.40423L7.19283 3.40408L7.18038 3.40477C5.73422 3.48471 4.37827 4.133 3.40801 5.20836C2.44041 6.28078 1.93462 7.69124 1.99999 9.13385C2.00344 10.8131 2.73878 12.1587 3.76066 13.3486C4.54375 14.2605 5.52952 15.1172 6.516 15.9745C6.80035 16.2216 7.08476 16.4688 7.36439 16.7173C7.71256 17.0283 8.0484 17.3289 8.36875 17.6156C9.03981 18.2163 9.64287 18.7561 10.1488 19.2024C10.8808 19.8482 11.4505 20.3358 11.7281 20.5156L11.9996 20.6915L12.2713 20.516C12.5291 20.3494 13.0097 19.9415 13.7041 19.3303C14.2257 18.8712 14.8883 18.2789 15.7018 17.5517C15.9935 17.2909 16.3047 17.0128 16.6357 16.7172C16.9253 16.4597 17.2205 16.2037 17.5157 15.9477C18.4876 15.105 19.4601 14.2617 20.2346 13.3628C21.2586 12.1744 21.9965 10.8264 22 9.13385C22.0653 7.69123 21.5596 6.28078 20.592 5.20836C19.6217 4.133 18.2657 3.48471 16.8196 3.40477ZM11.6142 4.35506L11.9954 4.80294L12.3761 4.35467C12.9155 3.71951 13.5913 3.21422 14.3531 2.87644C15.1144 2.53889 15.9419 2.37731 16.7742 2.40369C18.4866 2.47112 20.1027 3.21362 21.2694 4.46897C22.4364 5.72476 23.0588 7.39158 23.0003 9.10494L23 9.11347V9.122C23 12.4787 20.5608 14.6294 18.1924 16.6842C17.8966 16.94 17.598 17.2003 17.3031 17.462L17.3018 17.4632L16.3798 18.2872L16.3736 18.2927L16.3676 18.2985C15.2327 19.3827 14.0415 20.4065 12.7991 21.3656C12.5599 21.5162 12.2829 21.5962 12 21.5962C11.7171 21.5962 11.4402 21.5162 11.2010 21.3657C9.9972 20.4352 8.84189 19.4436 7.73965 18.3948L7.73401 18.3894L7.72820 18.3842L6.7012 17.4662L6.70057 17.4657C6.43759 17.2314 6.17305 17.0015 5.91337 16.7758C5.88988 16.7554 5.86643 16.735 5.84303 16.7147C3.34442 14.5424 0.999982 12.4694 0.999982 9.122V9.11347L0.999691 9.10494C0.941196 7.39158 1.56352 5.72476 2.73058 4.46897C3.89709 3.21378 5.51295 2.47131 7.22510 2.40372C8.0557 2.37962 8.88112 2.54227 9.64050 2.87968C10.4006 3.21742 11.0751 3.72163 11.6142 4.35506Z"></path>
</svg>
<svg class="instagram__icon instagram__icon--comment" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M20.656 17.008C21.8711 14.9061 22.2795 12.4337 21.8048 10.0527C21.3301 7.67172 20.0048 5.54497 18.0765 4.06978C16.1482 2.59458 13.7488 1.87186 11.3266 2.0366C8.9043 2.20135 6.62486 3.24231 4.91408 4.96501C3.20329 6.68772 2.17817 8.97432 2.03024 11.3977C1.8823 13.821 2.62166 16.2153 4.1102 18.1334C5.59874 20.0514 7.73463 21.3619 10.1189 21.82C12.5031 22.2782 14.9726 21.8527 17.066 20.623L22 22L20.656 17.008Z"></path>
</svg>
<svg class="instagram__icon instagram__icon--message" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M22 3 9.218 10.083M11.698 20.334 22 3.001H2L9.218 10.084 11.698 20.334Z"></path>
</svg>
</div>
<div class="right">
<svg class="instagram__icon instagram__icon--saved" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M20 21L12 13.44L4 21V3H20V21Z"></path>
</svg>
</div>
</footer>
</article>
</section>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// ******************************
// Instagram轮播图功能
// ******************************
// 获取Instagram轮播图的DOM元素
const carousel = document.querySelector('.instagram__carousel');
const slides = document.querySelectorAll('.instagram__slide');
const dotsContainer = document.querySelector('.carousel-dots');
const instagramPost = document.querySelector('.instagram');
let currentIndex = 0;
const slideCount = slides.length;
let autoScrollInterval;
const scrollDelay = 3000; // 3秒钟切换一张幻灯片
// 为轮播图创建导航点
slides.forEach((_, index) => {
const dot = document.createElement('div');
dot.classList.add('carousel-dot');
if (index === 0) dot.classList.add('active');
dot.addEventListener('click', () => goToSlide(index));
dotsContainer.appendChild(dot);
});
const dots = document.querySelectorAll('.carousel-dot');
// 根据当前索引更新轮播图位置
function updateCarousel() {
carousel.style.transform = `translateX(-${currentIndex * 100}%)`;
// 更新点状态
dots.forEach((dot, index) => {
dot.classList.toggle('active', index === currentIndex);
});
}
// 导航到特定幻灯片
function goToSlide(index) {
currentIndex = index;
if (currentIndex >= slideCount) currentIndex = 0;
if (currentIndex < 0) currentIndex = slideCount - 1;
updateCarousel();
}
// 前往下一张幻灯片
function nextSlide() {
goToSlide(currentIndex + 1);
}
// 开始自动滚动
function startAutoScroll() {
autoScrollInterval = setInterval(nextSlide, scrollDelay);
}
// 停止自动滚动
function stopAutoScroll() {
clearInterval(autoScrollInterval);
}
// 悬停时暂停
instagramPost.addEventListener('mouseenter', stopAutoScroll);
instagramPost.addEventListener('mouseleave', startAutoScroll);
// 初始化自动滚动
startAutoScroll();
// 触摸/滑动支持
let touchStartX = 0;
let touchEndX = 0;
carousel.addEventListener('touchstart', (e) => {
touchStartX = e.changedTouches[0].screenX;
stopAutoScroll();
}, {passive: true});
carousel.addEventListener('touchend', (e) => {
touchEndX = e.changedTouches[0].screenX;
handleSwipe();
startAutoScroll();
}, {passive: true});
// 处理滑动手势
function handleSwipe() {
const difference = touchStartX - touchEndX;
if (difference > 50) nextSlide(); // 向左滑动
if (difference < -50) prevSlide(); // 向右滑动
}
// 前往上一张幻灯片
function prevSlide() {
goToSlide(currentIndex - 1);
}
// 键盘导航
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowRight') nextSlide();
if (e.key === 'ArrowLeft') prevSlide();
});
// 点赞功能
const heartIcon = document.querySelector('.instagram__icon--heart');
let isLiked = false;
heartIcon.addEventListener('click', function(e) {
isLiked = !isLiked;
// 切换激活状态
this.classList.toggle('active', isLiked);
// 点赞时创建浮动心形效果
if (isLiked) {
createFloatingHearts(e);
}
});
// 创建浮动心形动画
function createFloatingHearts(e) {
const container = document.querySelector('.instagram__media');
const rect = heartIcon.getBoundingClientRect();
const x = rect.left + rect.width / 2;
const y = rect.top + rect.height / 2;
// 创建多个心形
for (let i = 0; i < 6; i++) {
const heart = document.createElement('div');
heart.className = 'heart-effect';
heart.style.left = `${x}px`;
heart.style.top = `${y}px`;
heart.style.transform = `translate(-50%, -50%) scale(0)`;
document.body.appendChild(heart);
// 动画每个心形
setTimeout(() => {
const angle = Math.random() * Math.PI * 2;
const distance = 50 + Math.random() * 50;
const size = 0.5 + Math.random() * 1.5;
heart.style.transition = 'all 1s ease-out';
heart.style.opacity = '1';
heart.style.transform = `translate(
${Math.cos(angle) * distance}px,
${Math.sin(angle) * distance - 50}px
) scale(${size})`;
// 动画结束后移除心形
setTimeout(() => {
heart.style.opacity = '0';
setTimeout(() => heart.remove(), 1000);
}, 500);
}, i * 100);
}
}
// 预加载所有轮播图图片以实现更流畅的过渡
const images = [
'https://assets.codepen.io/108082/jake-and-fin-1.jpg',
'https://assets.codepen.io/108082/jake-and-fin-2.jpg',
'https://assets.codepen.io/108082/jake-and-fin-3.jpg',
'https://assets.codepen.io/108082/jake-and-fin-4.jpg',
'https://assets.codepen.io/108082/jake-and-fin-5.jpg',
'https://assets.codepen.io/108082/jake-and-fin-6.jpg',
'https://assets.codepen.io/108082/jake-and-fin-7.jpg'
];
images.forEach(src => {
const img = new Image();
img.src = src;
});
// ******************************
// 书籍卡片功能
// ******************************
// 复制书籍卡片以实现无缝循环
const bookCardsContainer = document.querySelector('.book-cards');
const bookCards = document.querySelectorAll('.book-card');
// 克隆所有书籍卡片并追加到容器中以实现无限滚动
bookCards.forEach(card => {
const clone = card.cloneNode(true);
bookCardsContainer.appendChild(clone);
});
});
</script>
</body>
</html>
index.html