有关第三屏呼吸灯的问题
来源：5-6 作业题
Aurora_Meteor
2020-03-23 15:25:27
老师，我是在每个语言模块添加了:before和:after伪类来创建了一个元素，然后设置动画来实现的效果，但是不像任务中的那样只是一个边框在缩放，我的是添加的一整个元素都在缩放，而且占据了整个背面。
我的代码如下：
.lesson1::before,
.lesson2::before,
.lesson3::before,
.lesson4::before,
.lesson5::before,
.lesson1::after,
.lesson2::after,
.lesson3::after,
.lesson4::after,
.lesson5::after {
content: ' ';
display: block;
width: 70px;
height: 70px;
position: absolute;
top: -5px;
left: -5px;
-webkit-animation: bounce 1s infinite 3s;
animation: bounce 1s infinite 3s;
border-radius: 50%;
z-index: -1;
}
.lesson1::before,
.lesson2::before,
.lesson3::before,
.lesson4::before,
.lesson5::before {
-webkit-animation: bounce 1s infinite 4s;
animation: bounce 1s infinite 4s;
}
.lesson1::before,
.lesson1::after {
background-color: #1f5975;
}//一个写了五个来控制它们每一个的颜色
@-webkit-keyframes bounce {
0%,
100% {
transform: scale(0);
}
50% {
transform: scale(1);
}
}
@keyframes bounce {
0%,
100% {
transform: scale(0);
}
50% {
transform: scale(1);
}
}
我的效果是整个圆在缩放而不是只有一个边框缩放，我试了把设置背景色改为设置边框颜色，然后背景色透明，效果变成了整个边框在变大变小了。
批改老师的建议是：
我想问一下这个是直接给这几个语言模块设置animation还是给它们的哪个伪元素设置animation呢？还有这里是必须要用scale3d才可以吗？
直接给这几个语言模块加上这个动画以后的效果变成了整个元素在缩放了哎。
2回答
-
同学你好，是指效果图中吗？效果图中的就是整个元素缩放的。
若是不想要整体元素缩放，老师这里有个思路，同学可以尝试下。分两个元素，一个存放文字内容。一个设置边框，然后给设置边框的这个设置动画。也可以使用伪类。
不过效果图是直接整个元素设置缩放的。
祝学习愉快！
0h020-03-23 -
好帮手慕糖
2020-03-23
同学你好，不需要使用伪类，可以将这里的伪类去掉，也不需要背景颜色。直接设置给当前的元素。
不一定要scale3d的，直接scale也可以，不过同学的这个值设置的改变太大了，且不能缩放到0，稍微缩放一点就可以了。可以参考如下：
如果我的回答帮助了你，欢迎采纳，祝学习愉快~
0h020-03-23
