div+css实现旋转相册动画效果代码-html代码-BFW代码库

div+css实现旋转相册动画效果代码

代码语言：html

代码描述：div+css实现旋转相册动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    * {
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(to left bottom, #f46246, #fa557c, #e75eaf, #bc74d7, #9487eb, #6197f4, #00a3f3, #00afed, #00b9e0, #00c0cf, #2ac6bc);
    /* 指定背景图像的大小 */
    background-size: 200%;
    /* 执行动画：动画名 时长 线性的 无限次播放 */
    animation: bgAnimation 15s linear infinite;
}

/* 定义动画 */
@keyframes bgAnimation {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.container {
    width: 500px;
    height: 500px;
    /* 网格布局 */
    display: grid;
    /* 3*3 */
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    /* 网格分区 */
    grid-template:
        'A A B'
        'C D B'
        'C E E';
    /* 设置间距 */
    gap: 10px;
    /* 绑定动画：动画名 时长 线性 无限播放 */
    animation: rotate 15s linear infinite;
}

.item {
    overflow: hidden;
    /* 加个边框 */
    border: 1px solid #000;
    /* 设置居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
}

/* 分别为每个item指定对应网格分区 */
.item:nth-child(1) {
    grid-area: A;
}

.item:nth-child(2) {
    grid-area: B;
}

.item:nth-child(3) {
    grid-are.........完整代码请登录后点击上方下载按钮下载查看