省流:
在普通的CSS中,应该使用/* */
来注释代码。不过,如果你确实在一个可以处理SCSS的环境中,那么这个使用了//
来注释掉一行代码,(这是Sass/SCSS的注释语法。)就是正确的。
css问题代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>The Caterpillar and Alice looked at each other for some time in silence: at last the Caterpillar took the
hookah out of its mouth, and addressed her in a languid, sleepy voice.</p>
</body>
<style type="text/css">
p {
animation-duration: 8s;
animation-name: slidein;
animation-iteration-count: infinite; //重复动画
animation-direction: alternate; //来回运动
}
@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
75% {
font-size: 300%;
margin-left: 25%;
width: 150%;
}
to {
margin-left: 0%;
width: 100%;
}
}
</style>
</html>
演示效果: 发现代码的来回运动效果并没有生效
百度显示查询了解edge到,是支持CSS animation-direction 属性, 不用添加前缀
经检查发现是css代码注释的位置导致部分代码没有生效
删除注释代码 " //重复动画 " , 返回发现来回运动效果生效,
小结: 看来我得改变css代码注释习惯了,可能是css代码被压缩去掉空格换行导致css代码问题
这样css注释暂不影响css代码效果,
或者不用双斜杠注释//
2024/3/6 更新个人注释理解
注释问题:使用了//
来注释掉一行代码,这是Sass/SCSS的注释语法。在普通的CSS中,应该使用/* */
来注释代码。不过,如果你确实在一个可以处理SCSS的环境中,那么这个注释方式就是正确的。
资料来源:文心一言