1. 首页
  2. Language
  3. 笔记 04 CSS 8种让人眼前一亮的hover效果 圆形效果

笔记 04 CSS 8种让人眼前一亮的hover效果 圆形效果

参考原文

圆形效果

css hover 触发 animation + transition

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>圆形效果</title>
</head>
<style>
  #circle-btn {
    display: flex;
    /* align-self属性设置项目在其包含块中在交叉轴方向上的对齐方式。 */
    align-items: center;
    /* 定义了浏览器之间，如何分配顺着弹性容器主轴(或者网格行轴)的元素之间及其周围的空间。 */
    justify-content: center;
    height: 100vh;
  }

  .btn-container {
    position: relative;
  }

  button {
    border: 0;
    border-radius: 50px;
    color: white;
    background: #5f55af;
    padding: 16px 20px 16px 60px;
    text-transform: uppercase;
    background: linear-gradient(to right, #f72585 50%, #5f55af 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    /*
      transition CSS 属性是
      transition-property，
      transition-duration，
      transition-timing-function 和 transition-delay 的一个简写属性。
      过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。
    */
    transition: all 2s ease;
    font-size: 14px;
    line-height: 16px;
  }

  svg {
    background: #f72585;
    padding: 8px;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0%;
  }

  button:hover {
    background-position: left bottom;
  }
</style>
<body>
  <div id="circle-btn">
    <div class="btn-container">
      <svg t="1599487956842" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1860" width="32" height="32" xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs><style type="text/css"></style></defs>
        <path d="M6.71115421 489.90890885l662.73273745-1e-8L669.44389165 551.27305136 6.71115421 551.27305136l2e-8-61.36414251z" fill="#ffffff" p-id="1861"></path>
        <path d="M665.71307852 306.28092891L1022.56779958 515.86227332l-356.85472106 215.24570478 0-424.82704919z" fill="#ffffff" p-id="1862"></path>
      </svg>
      <button>Hover me</button>
    </div>
  </div>
</body>
</html>