跟着音乐学习CSS放松一下眼睛吧
【摘要】
你好呀，好久没写文章了，最近还在学习Javascript，然后晚上写个东西复习一下CSS，这里是小森，IT人一定要保护好眼睛哦，这次带来了我最喜欢的宫崎骏的纯音，听着纯音来学习一下这个特效的实现逻辑吧！ ...
你好呀，好久没写文章了，最近还在学习Javascript，然后晚上写个东西复习一下CSS，这里是小森，IT人一定要保护好眼睛哦，这次带来了我最喜欢的宫崎骏的纯音，听着纯音来学习一下这个特效的实现逻辑吧！
HTML
首先是HTML部分，写了一个爸爸和他的30个女儿，女儿越多实现效果就越密集
<body>
<div class="div">
<div class="box" style="--a:1"></div>
<div class="box" style="--a:2"></div>
<div class="box" style="--a:3"></div>
<div class="box" style="--a:4"></div>
<div class="box" style="--a:5"></div>
<div class="box" style="--a:6"></div>
<div class="box" style="--a:7"></div>
<div class="box" style="--a:8"></div>
<div class="box" style="--a:9"></div>
<div class="box" style="--a:10"></div>
<div class="box" style="--a:11"></div>
<div class="box" style="--a:12"></div>
<div class="box" style="--a:13"></div>
<div class="box" style="--a:14"></div>
<div class="box" style="--a:15"></div>
<div class="box" style="--a:16"></div>
<div class="box" style="--a:17"></div>
<div class="box" style="--a:18"></div>
<div class="box" style="--a:19"></div>
<div class="box" style="--a:20"></div>
<div class="box" style="--a:21"></div>
<div class="box" style="--a:22"></div>
<div class="box" style="--a:23"></div>
<div class="box" style="--a:25"></div>
<div class="box" style="--a:26"></div>
<div class="box" style="--a:27"></div>
<div class="box" style="--a:28"></div>
<div class="box" style="--a:29"></div>
<div class="box" style="--a:30"></div>
</div>
</body>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
CSS
首先常规操作🤣
*{
margin: 0;
padding: 0;
}
- 1
- 2
- 3
- 4
设置背景颜色，这里overflow: hidden;是为了适配不同屏幕，overflow属性，用来指定如果内容溢出元素的框，将怎么处理，一共有四个值，hidden表示内容会被修剪，多余部分是不可见的，这就完成了适配
body{
background: rgb(126, 147, 190);
/*适配*/
overflow: hidden;
}
- 1
- 2
- 3
- 4
- 5
设置爸爸，子绝父相，宽高分别沾满屏幕，视觉效果拉满，justify-content: center; 用于设置或检索弹性盒子元素在横轴的对齐方式，center表示位于容器中心，display: flex; 即弹性布局，用来为盒子模型提供最大的灵活性， perspective: 100px; 设置100px的3D元素
.div{
width: 100%;
height: 100%;
position: relative;
justify-content: center;
display: flex;
align-items: center;
top: 300px;
perspective: 100px;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
这里对30个女儿初始化并处理，特别注意标注灵魂的位置，慢慢领悟，你就会理解渐变的效果其实很简单，慢慢积累加油
.box{
width: 1100px;
height: 500px;
position: absolute;
/*圆角*/
border-radius: 50px;
border: 35px white solid;
/*阴影，默认在外,inset内*/
box-shadow: 0px 0px 80px rgb(91, 134, 155),
inset 0px 0px 90px rgb(2, 184, 250);
animation:zhi 15s ease-in-out infinite both;
/*灵魂*/
animation-delay: calc(var(--a)*0.45s);
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
最后就是关键帧了
@keyframes zhi{
0%{
opacity: 1;
transform:translateZ(-700px) scale(0.2);
}
100%{
/* 透明度 */
opacity: 1;
/* translateZ(200px)表示大 */
/* scale(1)缩放 */
transform:translateZ(200px) scale(1);
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
OK，收工，你学肥了吗？快来点赞👍，评论吧
文章来源: blog.csdn.net，作者：周棋洛ყ ᥱ ᥉，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/m0_53321320/article/details/119429173
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）