skong
/
html_css_demo
mirror of https://gitee.com/wyanhui02/html_css_demo.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

新增第232个小实例：旋转中的视差效果

This commit is contained in:
DESKTOP-BM6RJU5\wyanh 2023-11-17 17:55:29 +08:00
parent 9d63b10fff
commit da62c0bdca
3 changed files with 88 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -239,6 +239,7 @@
229. HTML5+CSS3+JS小实例：创意罗盘时钟
230. HTML5+CSS3+JS小实例：原生JS实现全屏滚动
231. HTML5+CSS3小实例：文字边框视觉错位
232. HTML5+CSS3小实例：旋转中的视差效果
#### 赞赏作者
![image](https://gitee.com/wyanhui02/html_css_demo/raw/master/images/%E8%B5%9E%E8%B5%8F%E4%BD%9C%E8%80%85/%E8%B5%9E%E8%B5%8F%E7%A0%81.jpg)

69
code/232/232.css Normal file
View File

@ -0,0 +1,69 @@
*{
margin: 0;
padding: 0;
}
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(135deg,#f5f7fa,#c3cfe2);
}
.container{
width: 400px;
height: 400px;
/* 网格布局 */
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 10s linear infinite;
}
.item{
overflow: hidden;
/* 加个边框 */
border: 1px solid #000;
/* 设置居中 */
display: flex;
justify-content: center;
align-items: center;
}
/* 分别为每个item指定对应网格分区 */
.item:nth-child(1){
grid-area: A;
}
.item:nth-child(2){
grid-area: B;
}
.item:nth-child(3){
grid-area: C;
}
.item:nth-child(4){
grid-area: D;
}
.item:nth-child(5){
grid-area: E;
}
.item img{
width: 250%;
height: 250%;
object-fit: cover;
/* 给图片加上反向的动画 */
/* 绑定动画：动画名 时长 线性 无限播放 反向播放 */
animation: rotate 10s linear infinite reverse;
}
/* 定义旋转动画 */
@keyframes rotate{
to{
transform: rotate(360deg);
}
}

18
code/232/232.html Normal file
View File

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>旋转中的视差效果</title>
<link rel="stylesheet" href="232.css">
</head>
<body>
<div class="container">
<div class="item"><img src="/images/op1/1.jpg" alt=""></div>
<div class="item"><img src="/images/op1/2.jpg" alt=""></div>
<div class="item"><img src="/images/op1/3.jpg" alt=""></div>
<div class="item"><img src="/images/op1/4.jpg" alt=""></div>
<div class="item"><img src="/images/op1/5.jpg" alt=""></div>
</div>
</body>
</html>