题目

微信图片_20210513140659.png

答案

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title></title>
  5.     <meta charset="utf-8">
  6.     <style>
  7.         * {margin: 0;padding: 0;}
  8.         .container { width: 200px;margin: 200px auto;}
  9.         .button { cursor: pointer;width: 100%;height: 50px;background: #ccc;position: relative; }
  10.         .button::before {content: '';position: absolute;width: 40px;height: 40px; left: 5px; top: 5px;background: #fff;}
  11.         .button:hover {animation: btn-hover-bg linear .3s forwards;}
  12.         .button:hover::before {animation: btn-hover linear .3s forwards;}
  13.         @keyframes btn-hover {
  14.             0% {
  15.                 /*transform: translateX(0);*/
  16.                 left: 5px;
  17.             }
  18.             100% {
  19.                 left: calc(100% - 45px);
  20.                 /*transform: translateX(50px);*/
  21.             }
  22.         }
  23.         @keyframes btn-hover-bg {
  24.             0% {
  25.                 background: #ccc;
  26.             }
  27.             100% {
  28.                 background: green;
  29.             }
  30.         }
  31.     </style>
  32. </head>
  33. <body>
  34.     <div class="container">
  35.         <div class="button"></div>
  36.     </div>
  37. </body>
  38. </html>

效果

image.png

hover效果

image.png