我必须用大括号修复一个错误。但是所有的左括号都有一对。 第212行有错误
Expected RBRACE at line 212, col 2. @-webkit-keyframes move {
但是当我在 212 之前和 212 之后分别测试代码时 - 没有看到错误。
@media all and (min-width: 1px){
.main-pointing-slider .box .dot-4{
bottom: -2px;
left: 128px;
top: auto;
right: auto;
bottom: -2px;
left: calc(50% - 3px);
position: absolute;
-webkit-animation-name: dotShow;
-webkit-animation-duration: 0.5s;
-webkit-animation-delay: 2s;
-webkit-animation-timing-function: linear;
-moz-animation-name: dotShow;
-moz-animation-duration: 0.5s;
-moz-animation-delay: 2s;
-moz-animation-timing-function: linear;
animation-name: dotShow;
animation-duration: 0.5s;
animation-delay: 2s;
animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
background: linear-gradient(to bottom, #dcd4cb 0%, #f3c886 100%)
}
.main-pointing-slider .box .svg-gradient{
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute
}
.main-pointing-slider .box .svg-gradient .svg-box{
width: 100%;
height: 100%
}
.main-pointing-slider .box .svg-gradient .svg-box rect{
visibility: visible
}
.main-pointing-slider .slide{
/*display: none;*/
width: 100%;
height: 100%;
top: 0;
/*position: absolute;*/
overflow: hidden
}
.main-pointing-slider .slide .point{
top: 1px;
right: 0;
bottom: 0;
left: 1px;
position: relative;
width: 248px;
height: 126px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 120px;
-moz-border-radius: 120px;
border-radius: 120px;
opacity: 0;
margin: 0
auto
}
.main-pointing-slider .slide .point .svg-gradient-point{
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
z-index: 2
}
.main-pointing-slider .slide .point .svg-gradient-point .svg-box{
width: 100%;
height: 100%
}
.main-pointing-slider .slide .point .svg-gradient-point .svg-box rect{
stroke-width: 2
}
.main-pointing-slider .slide .point .point-inner{
top: 0;
right: auto;
bottom: auto;
left: 0;
position: absolute;
width: 100%;
height: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 120px;
-moz-border-radius: 120px;
border-radius: 120px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
background: no-repeat 50%;
background-size: cover
}
.main-pointing-slider .slide .point-shadow{
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
width: 260px;
height: 130px;
width: calc(260px - 6px);
height: calc(130px - 6px);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 120px;
-moz-border-radius: 120px;
border-radius: 120px;
opacity: 0;
z-index: 3;
margin: 0
auto;
background: black
}
.main-pointing-slider .slide .upper-text{
top: auto;
right: -100%;
bottom: 72%;
left: auto;
position: absolute;
width: 62%;
text-transform: uppercase;
text-align: right;
font-size: 13px;
font-family: "Tahoma Bold",sans-serif;
font-weight: 600;
line-height: 1.12;
color: #e7c28b;
display: none
}
.main-pointing-slider .slide .lower-text{
top: 34%;
right: -100%;
bottom: auto;
left: auto;
position: absolute;
width: 53%;
font-size: 12px;
font-family: "Tahoma Regular",sans-serif;
line-height: 1.3;
text-align: right;
color: white;
display: none
}
.main-pointing-slider .slide.active{
display: block
}
.main-pointing-slider.startFirstFrame .line{
-webkit-animation-name: move;
-webkit-animation-duration: 0.9s;
-webkit-animation-delay: 0s;
-webkit-animation-timing-function: ease;
-moz-animation-name: move;
-moz-animation-duration: 0.9s;
-moz-animation-delay: 0s;
-moz-animation-timing-function: ease;
animation-name: move;
animation-duration: 0.9s;
animation-delay: 0s;
animation-timing-function: ease
}
.slide.animationIn .point{
-webkit-animation-name: point;
-webkit-animation-duration: 1s;
-webkit-animation-delay: 0s;
-webkit-animation-timing-function: ease-out;
-moz-animation-name: point;
-moz-animation-duration: 1s;
-moz-animation-delay: 0s;
-moz-animation-timing-function: ease-out;
animation-name: point;
animation-duration: 1s;
animation-delay: 0s;
animation-timing-function: ease-out;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards
}
.slide.animationIn .point-shadow{
-webkit-animation-name: point;
-webkit-animation-duration: 1s;
-webkit-animation-delay: 0s;
-webkit-animation-timing-function: ease-out;
-moz-animation-name: point;
-moz-animation-duration: 1s;
-moz-animation-delay: 0s;
-moz-animation-timing-function: ease-out;
animation-name: point;
animation-duration: 1s;
animation-delay: 0s;
animation-timing-function: ease-out;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards
}
.slide.animationIn .upper-text{
animation: slideLeft 0.5s 0.25s ease forwards, slideLeftFinish 0.25s 0.75s ease forwards;
}
.slide.animationIn .lower-text{
animation: slideLeft 0.5s 0.5s ease forwards, slideLeftFinish 0.25s 1s ease forwards;
}
@-webkit-keyframes move {
0% {
-webkit-transform: scaleX(0.1);
-moz-transform: scaleX(0.1);
-ms-transform: scaleX(0.1);
transform: scaleX(0.1);
opacity: 1
}
100% {
-webkit-transform: scaleX(1);
-moz-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
opacity: 1
}
}
由于这个错误，验证器无法在@media 中看到壁橱支架。
最佳答案
根据 W3C 规范:
At-rules inside @media are invalid in CSS2.1.
所以这行不通:
@media (max-width: 768px) {
@media (max-width: 450px) {
}
}
这也不会:
@media (max-width: 768px) {
@-webkit-keyframes animation {
}
}
关键帧动画应在任何媒体类型之外声明，然后在必要时在适用的或相关的媒体队列中应用。
关于css - 在@media 中嵌套@keyframe，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47629625/