手机动画提示左右滑屏的特效
手机动画提示左右滑屏的特效效果图：
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
<title>demo</title>
<style type="text/css">
@keyframes fade-lr{
0% {
transform: translateX(-10px);
}
25%{
transform: translateX(10px);
}
50%{
transform: translateX(-10px);
}
75%{
transform: translateX(10px);
}
100% {
transform: translateX(-10px);
}
}
.mask-scroll {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0,0,0,.66);
cursor: pointer;
}
.mask-scroll-icon {
max-width: 80px;
position: absolute;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
animation-name: fade-lr;
animation-duration: 3s;
animation-iteration-count: infinite;
}
.img-fluid{
width: 100%;
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="mask-scroll">
<div class="mask-scroll-icon">
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 490.7 490.7" viewBox="0 0 490.7 490.7" class="img-fluid" onclick="isclick(this)">
<g fill="#fff">
<path d="m309.3 64h102.2l-24.5 24.5c-4.2 4.2-4.2 10.9 0 15.1 2.1 2.1 4.8 3.1 7.6 3.1 2.7 0 5.5-1 7.6-3.1l42.7-42.7c2.6-2.6 3.6-6.3 2.9-9.7 0-.1 0-.1-.1-.2-.1-.3-.1-.5-.2-.8 0-.1-.1-.2-.1-.3-.1-.2-.2-.5-.3-.7 0-.1-.1-.2-.1-.3-.1-.2-.2-.5-.3-.7 0-.1-.1-.2-.1-.2-.1-.2-.2-.4-.4-.6-.1-.1-.1-.2-.2-.3-.1-.2-.3-.4-.4-.6-.2-.2-.3-.4-.5-.6-.1-.1-.1-.1-.2-.2l-42.7-42.6c-4.2-4.2-10.9-4.2-15.1 0s-4.2 10.9 0 15.1l24.4 24.4h-102.2c-5.9 0-10.7 4.8-10.7 10.7s4.8 10.7 10.7 10.7z"/>
<path d="m82.2 103.5c4.2-4.2 4.2-10.9 0-15.1l-24.5-24.4h102.3c5.9 0 10.7-4.8 10.7-10.7s-4.8-10.7-10.7-10.7h-102.3l24.4-24.4c4.2-4.2 4.2-10.9 0-15.1-4.1-4.1-10.8-4.1-15 0l-42.7 42.7c-.1.1-.1.1-.2.2-.2.2-.4.4-.5.6s-.3.4-.4.5-.1.2-.2.3c-.1.2-.3.4-.4.6 0 .1-.1.2-.1.3-.1.2-.2.4-.3.7 0 .1-.1.2-.1.3-.1.2-.2.5-.3.7 0 .1-.1.2-.1.3-.1.3-.1.5-.2.8 0 .1 0 .2-.1.2-.7 3.4.3 7 2.9 9.7l42.7 42.7c2.1 2.1 4.8 3.1 7.6 3.1 2.7-.1 5.4-1.2 7.5-3.3z"/>
<path d="m426.7 213.3c-8.8 0-16.9 2.7-23.7 7.2-5.8-16.6-21.7-28.5-40.3-28.5-8.8 0-16.9 2.7-23.7 7.2-5.8-16.6-21.7-28.5-40.3-28.5-7.8 0-15.1 2.1-21.3 5.7v-69.7c0-23.5-19.1-42.7-42.7-42.7s-42.7 19.1-42.7 42.7v181.3l-37.1-27.8c-22-16.5-53.2-14.3-72.7 5.2-12.5 12.5-12.5 32.8 0 45.2l151.9 151.9c18.1 18.1 42.3 28.1 67.9 28.1h50c64.7 0 117.3-52.6 117.3-117.3v-117.3c0-23.5-19.1-42.7-42.6-42.7zm21.3 160c0 52.9-43.1 96-96 96h-50c-20 0-38.7-7.8-52.8-21.9l-151.9-151.9c-4.2-4.2-4.2-10.9 0-15.1 6.6-6.6 15.4-10 24.3-10 7.2 0 14.5 2.2 20.5 6.8l54.1 40.6c3.2 2.4 7.6 2.8 11.2 1s5.9-5.5 5.9-9.5v-202.6c0-11.8 9.6-21.3 21.3-21.3s21.3 9.6 21.3 21.3v160c0 5.9 4.8 10.7 10.7 10.7s10.7-4.8 10.7-10.7v-53.3c0-11.8 9.6-21.3 21.3-21.3s21.3 9.6 21.3 21.3v53.3c0 5.9 4.8 10.7 10.7 10.7s10.7-4.8 10.7-10.7v-32c0-11.8 9.6-21.3 21.3-21.3s21.3 9.6 21.3 21.3v32c0 5.9 4.8 10.7 10.7 10.7s10.7-4.8 10.7-10.7v-10.7c0-11.8 9.6-21.3 21.3-21.3s21.4 9.5 21.4 21.3z"/>
</g>
</svg>
</div>
</div>
<script>
function isclick(e) {
e.style.display = "none";
}
</script>
</body>
</html>
页:
[1]