Question

我有一个动画https://adsler.co.uk/contact-us/，该动画在移动设备上正确显示，但在桌面上错误显示。它在桌面上太宽（应该与联系表格的宽度相同），并且此CSS无法纠正。

@media (max-width: 5000px) and (min-width: 768px) 
{.contact::before.contact::after {content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%; 
}}

为什么不呢？尽管在一个查询下有多个div，但是我的CSS检查器不会挑战它，因此从理论上讲它应该可以工作。

如果我在集合级联中将width: 100%;更改为width: 50%，它确实可以工作，但是这当然意味着要更改整个内容，这会使width: 50%对于移动设备来说太小了。 / p>

html是：

<div class="contact" data
text="CONTACT">CONTACT</div>

动画CSS

page-id-1239 { background: #000; display: flex;
align- 
items: center;
height: 100vh;
justify-content: center; }
.contact {
font-family: arial;
position: relative;
color: #fff;

text-align: center;
font-size: 7rem;
max-width: 1200px;
margin: 0 auto;
}

.contact::before
.contact::after {
content: attr(data-text);
position: 
absolute; top: 0;
left: 0;
width: 100%; height: 100%;
}

.contact::before {
left: 2px;
clip: rect(79px, 1200px, 86px, 0);
text-shadow: -1px 0 red;
background: #000;
animation: brasil-anim-2 1s infinite linear alternate- 
reverse;
}

.contact:after {
left: -2px;
clip: rect(79px, 1200px, 86px, 0);
text-shadow: -1px 0 blue
000; animation: brasil-anim-1 1s infinite linear alternate- 
reverse;
Animation-delay: -1s;
}
@keyframes brasil-anim-1 {
0% {
Clip: rect(20px, 1200px, 76px, 0);
}
20% {
Clip: rect(19px, 1200px, 16px, 0);
}
40% {
Clip: rect(16px, 1200px, 3px, 0);
}
60% {
Clip: rect(62px, 1200px, 78px, 0);
}
80% {
Clip: rect(25px, 1200px, 13px, 0);
}
100% {
Clip: rect(53px, 1200px, 86px, 0);
}
}
@keyframes brasil-anim-2 {
0% {
Clip: rect(79px, 1200px, 86px, 0);
}

20% {
Clip: rect(20px, 1200px, 30px, 0)
}
40% {
Clip: rect(25px, 1200px, 5px, 0)
}
60% {
Clip: rect(65px, 1200px, 85px}

80% {
Clip: rect(120px, 1200px, 145px, 0)
}
100% {
clip: rect(95px, 1200px, 75px, 0)
}}

Answer 1

.contact::before.contact::after是无效的选择器，如果要同时寻址:: before和:: after，则需要这样写：进一步说明：原始选择器本身不是无效的，只是不会求值任何可以存在的元素。这意味着选择一个类别为“ contact”的after元素，该元素为:: before contact元素。而且由于之前和之后都没有类，所以所提到的选择器永远无法解析任何网页上的任何内容。要选择两个单独的元素，您需要使用,将它们分开：

.contact::before, .contact::after {
  /*here is your css*/
 }

如何使用@media

1 个答案: