jquery+svg实现按钮点击圆圈放大过渡效果代码-html代码-BFW代码库

jquery+svg实现按钮点击圆圈放大过渡效果代码

代码语言：html

所属分类：动画

代码描述：jquery+svg实现按钮点击圆圈放大过渡效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        *,
        *::before,
        *::after {
          margin: 0;
          box-sizing: border-box;
        }
        
        body {
          --transition: all 0.85s cubic-bezier(0.68, -0.55, 0.265, 1.55);
          --yellow-bg: transparent linear-gradient(114deg, #fdc100 0%, #dd7d00 100%) 0%
            0% no-repeat padding-box;
          background: url(//repo.bfw.wiki/bfwrepo/image/62c13aec6ad35.png) no-repeat center center fixed;
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
          color: white;
          margin: 0;
          display: grid;
          place-items: center;
          padding: 0 40px;
          height: 100vh;
        }
        body .btn {
          border-radius: 23px;
          letter-spacing: 0.8px;
          font-size: 14px;
          font-weight: 300;
          border: 0;
          color: white;
          white-space: nowrap;
          margin: 20px auto;
          width: 166px;
          height: 45px;
          border: none;
          cursor: pointer;
          position: relative;
          border: 1px solid #dd7d00;
          background: transparent;
        }
        body .btn::before {
          transition: var(--transition);
          content: "";
          width: 50%;
          height: 100%;
          background: black;
          position: absolute;
          top: 0;
          right: 0;
        }
        body .btn:hover::before {
          width: 100%;
        }
        body .btn.btn-hover {
          border-radius: 50px;
        }
        body .btn.btn-hover .btn-text {
          color: white;
          transition: var(--transition);
          mix-blend-mode: lighten;
        }
        body .btn.btn-hover::before {
          border-radius: 50px;
          width: 100%;
          background: var(--yellow-bg);
        }
        body .btn.btn-hover:hover .btn-text {
          margin-right: 30px;
        }
        body .btn.btn-hover:hover::before {
          background: url("//repo.bfw.wiki/bfwrepo/svg/Icon_ionic-ios-arrow-back_rakyvb.svg") no-repeat, var(--yellow-bg);
          background-position: center;
          border-radius: 23px;
          width: 25%;
        }
        
        .color {
          display: block;
       .........完整代码请登录后点击上方下载按钮下载查看