08 一个使用CSS动画和过渡效果的案例

学前端的坤坤bond

于 2024-07-23 09:42:39 发布

阅读量476

点赞数 7

文章标签： css 前端 javascript 开发语言 ecmascript vue.js java

本文链接：https://blog.youkuaiyun.com/m0_64904350/article/details/140626898

版权

一个使用CSS动画和过渡效果的案例：一个动态加载的图片画廊。这个画廊将展示一系列图片，并使用CSS动画来实现图片的淡入效果和切换动画。

HTML结构 (`gallery.html`)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态图片画廊</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="gallery">
        <div class="gallery-item" style="background-image: url(image1.jpg);"></div>
        <div class="gallery-item" style="background-image: url(image2.jpg);"></div>
        <div class="gallery-item" style="background-image: url(image3.jpg);"></div>
        <!-- 更多图片 -->
    </div>
</body>
</html>

CSS样式 (`styles.css`)

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}

.gallery {
    display: flex;
    overflow-x: hidden;
    width: 100%;
    height: 100%;
    position: relative;
}

.gallery-item {
    flex: 0 0 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease, opacity 0.5s ease;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0; /* 图片初始状态为不可见 */
}

/* 初始状态为第一个图片可见 */
.gallery .gallery-item:first-child {
    opacity: 1;
}

/* 当鼠标悬停在图片上时触发动画 */
.gallery:hover .gallery-item {
    opacity: 1;
    animation: fade 0.5s ease forwards;
}

/* 动画定义 */
@keyframes fade {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

/* 鼠标悬停后，除了当前图片外，其他图片向左移动 */
.gallery:hover .gallery-item:not(:first-child) {
    transform: translateX(-100%);
}

/* 鼠标离开画廊后，图片逐渐淡出并移回原位 */
.gallery:not(:hover) .gallery-item {
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s ease;
}