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,.........完整代码请登录后点击上方下载按钮下载查看