【发布时间】：2021-02-21 17:37:29
【问题描述】：
有没有一种使用媒体查询的方法，您可以删除移动设备的动画，但保留其他设备（如台式机或笔记本电脑）的动画？如果您想为移动设备添加动画，但又不想在笔记本电脑或计算机等任何其他设备上使用，这同样适用。你可以为此使用媒体查询吗？
例如：
我只想在移动设备上添加这个动画
function show() {
setTimeout(
function() {
document.getElementById('discord-shoutout').classList.add('online');
},
200
);
}
function reset() {
hide();
setTimeout(show, 1500);
}
function hide() {
document.getElementById('discord-shoutout').classList.remove('online');
}
show();html,
body {
background: #e9e9e9;
width: 100%;
height: 100%;
text-align: center;
line-height: 1.1;
}
.reset-button {
font: 400 11px "Open Sans";
line-height: 1;
background: transparent;
border-radius: 10px;
border: 2px solid #7289da;
color: #7289da;
font-size: 1em;
padding: 0.5em 0.8em;
cursor: pointer;
}
.reset-button:hover {
background: #7289da;
color: #fff;
}
.discord-shoutout * {
font-family: "Open Sans", sans-serif;
box-sizing: border-box;
}
.discord-shoutout {
position: fixed;
bottom: 2em;
right: 1em;
width: 300px;
z-index: 100;
text-align: left;
transition: 1s ease;
visibility: hidden;
opacity: 0;
transform: translate(1em, 50px);
filter: drop-shadow(10px 8px 0px rgba(0, 0, 0, 0.15));
}
.discord-shoutout:hover {
filter: drop-shadow(10px 8px 0px rgba(0, 0, 0, 0.25));
}
.discord-shoutout.online {
opacity: 1;
transform: translate(0, 0);
visibility: visible;
}
.discord-shoutout:after {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 0 50px 50px 0;
border-color: transparent #7289da transparent transparent;
position: absolute;
right: 0;
bottom: -25px;
}
.discord-shoutout .shoutout-inner {
color: #fff;
padding: 1em 1.5em 1.5em;
transition: box-shadow 0.3s ease;
background: transparent;
border-radius: 1em/1em;
overflow: hidden;
position: relative;
}
.discord-shoutout .shoutout-inner:after, .discord-shoutout .shoutout-inner:before {
content: "";
border-width: 0;
position: absolute;
box-sizing: border-box;
width: 100%;
background-color: #7289da;
z-index: -1;
}
.discord-shoutout .shoutout-inner:after {
height: 200%;
top: 0;
left: -46px;
transform: rotate(-18deg);
}
.discord-shoutout .shoutout-inner:before {
height: calc(100% - 25px);
right: 0;
top: 0;
}
.discord-shoutout .title {
display: block;
font-size: 1.2em;
margin: 0 0 1em 0;
}
.discord-shoutout p {
font-size: 0.9em;
font-weight: 300;
margin: 0 0 0.6em 0;
}
.discord-shoutout .discord-buttons {
margin-top: 1.4em;
}
.discord-shoutout .discord-button {
padding: 0.6em 1em;
color: white;
text-decoration: none;
background: transparent;
border: 0;
font-size: 0.9em;
cursor: pointer;
}
.discord-shoutout .discord-button.discord-primary {
border: 2px solid #fff;
border-radius: 6px;
}
.discord-shoutout .discord-button.discord-primary:hover {
background: #fff;
color: #7289da;
}
.discord-shoutout .discord-button.discord-secondary {
color: #fff;
}
.discord-shoutout .discord-button.discord-secondary:hover {
text-decoration: underline;
}
.discord-shoutout img {
position: absolute;
right: 1em;
top: 1em;
height: 1.4em;
}<button class="reset-button" onclick="reset()">reset</button>
<div id="discord-shoutout" class="discord-shoutout">
<div class="shoutout-inner">
<img src="https://discordapp.com/assets/93608abbd20d90c13004925014a9fd01.svg">
<span class="title">Hey there!</span>
<p>
Fancy having a chat?
</p>
<p>
We're currently online on Discord!
</p>
<div class="discord-buttons">
<a class="discord-button discord-primary" href="https://discord.gg/2nrFVCp" target="_blank">Join our server</a>
<button class="discord-button discord-secondary" onclick="hide()">Close</button>
</div>
</div>
</div>有没有办法只为移动设备添加上述动画？使用媒体查询或任何其他方法？
【问题讨论】：
-
这能回答你的问题吗？ Responsive css styles on mobile devices ONLY
标签： javascript html jquery css animation