|
|
|
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有账号？立即注册
x
手机动画提示左右滑屏的特效
效果图：
- <!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>
|
|
发表于 2021-5-27 08:29:51
