PHPIN.NET

 找回密码
 立即注册
查看: 7668|回复: 0

[HTML5/CSS3] 手机动画提示左右滑屏的特效

[复制链接]

469

主题

31

回帖

5569

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5569
发表于 2021-5-27 08:29:51 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有账号?立即注册

x
手机动画提示左右滑屏的特效

效果图: 效果图.png
  1. <!doctype html>
  2. <html lang="zh-cn">
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
  6. <title>demo</title>
  7. <style type="text/css">
  8. @keyframes fade-lr{
  9.         0% {
  10.                 transform: translateX(-10px);
  11.         }
  12.         25%{
  13.                 transform: translateX(10px);
  14.         }
  15.         50%{
  16.                 transform: translateX(-10px);
  17.         }
  18.         75%{
  19.                 transform: translateX(10px);
  20.         }
  21.         100% {
  22.                 transform: translateX(-10px);
  23.         }
  24. }
  25. .mask-scroll {
  26.         position: absolute;
  27.         width: 100%;
  28.         height: 100%;
  29.         top: 0;
  30.         left: 0;
  31.         background-color: rgba(0,0,0,.66);
  32.         cursor: pointer;
  33. }
  34. .mask-scroll-icon {
  35.         max-width: 80px;
  36.         position: absolute;
  37.         width: 100%;
  38.         height: 100%;
  39.         top: 0;
  40.         bottom: 0;
  41.         left: 0;
  42.         right: 0;
  43.         margin: auto;
  44.         display: flex;
  45.         justify-content: center;
  46.         align-items: center;
  47.         animation-name: fade-lr;
  48.         animation-duration: 3s;
  49.         animation-iteration-count: infinite;
  50. }
  51. .img-fluid{
  52.         width: 100%;
  53.         max-width: 100%;
  54.         height: auto;
  55. }
  56. </style>
  57. </head>
  58. <body>
  59.         <div class="mask-scroll">
  60.                                 <div class="mask-scroll-icon">
  61.                                         <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)">
  62.                                         <g fill="#fff">
  63.                                                 <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"/>
  64.                                                 <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"/>
  65.                                                 <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"/>
  66.                                                 </g>
  67.                                         </svg>
  68.                                 </div>
  69.                         </div>
  70. <script>
  71. function isclick(e) {
  72.         e.style.display = "none";
  73. }
  74. </script>
  75. </body>
  76. </html>
复制代码

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|PHPIN.NET ( 冀ICP备12000898号-14 )|网站地图

GMT+8, 2024-12-5 15:27

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表