CSS视差旋转动效实战
目录
第一章 前言
第二章 效果
第三章 源代码
第一章 前言
视差旋转一直是网页「高级感」的代名词，小编今天就给大家带来一个用css的自带的动画样式实现这么一个视差旋转的动效，让大家在写页面时不在只是纯静态页面的展示。
第二章 效果
第三章 源代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.container {width: 300px;height: 300px;margin: 0 auto;margin-top: 100px;/* 网格布局 */display: grid;/* 3行3列 */grid-template-rows: repeat(3, 1fr);grid-template-columns: repeat(3, 1fr);/* 网格模板 */grid-template:'A A B''C D B''C E E';gap: 10px;}.item:nth-child(1) {/* 对应模板区域 */grid-area: A;}.item:nth-child(2) {/* 对应模板区域 */grid-area: B;}.item:nth-child(3) {/* 对应模板区域 */grid-area: D;}.item:nth-child(4) {/* 对应模板区域 */grid-area: C;}.item:nth-child(5) {/* 对应模板区域 */grid-area: E;}.item {overflow: hidden;border: 1px solid #eee;display: flex;justify-content: center;align-items: center;}.item img {/* 图片样式调整 */width: 250%;height: 250%;object-fit: cover;}@keyframes rotation {to {/* 360度旋转动画 */transform: rotate(360deg);}}.container {animation: rotation 8s linear infinite;}.item img {animation: rotation 8s linear infinite reverse;}</style>
</head><body><div class="container"><div class="item"><img src="./img/1.jpg" alt=""></div><div class="item"><img src="./img/2.jpg" alt=""></div><div class="item"><img src="./img/3.jpg" alt=""></div><div class="item"><img src="./img/4.jpg" alt=""></div><div class="item"><img src="./img/5.jpg" alt=""></div></div>
</body></html>