热门推荐

    [CSS3] CSS3点击按钮圆形进度打钩效果的实现代码

    百宝网 Lv.7 显示全部楼层 发表于 2021-8-19 19:48:46
    目录八、CSS3点击按钮圆形进度打钩效果
    • 8.1 图片预览
    • 8.2 index.html代码
    • 8.3 style.css代码文章目录


    八、CSS3点击按钮圆形进度打钩效果


    8.1 图片预览



    2021033015023274.png

    2021033015023274.png



    2021033015023375.png

    2021033015023375.png


    8.2 index.html代码

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.         <head>
    4.                 <meta charset="UTF-8">
    5.                 <title>CSS3点击按钮圆形进度打钩效果</title>
    6.                 <!--图标库-->
    7.                 <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css'>
    8.                 <!--核心样式-->
    9.                 <link rel="stylesheet" href="css/style.css">
    10.         </head>
    11.         <body>
    12.                 <div class="background">
    13.                         <input type="checkbox" id="button">
    14.                         <label for="button" class="button"> 点击按钮<i class="fas fa-check"></i></label>
    15.                         <svg class="circle">
    16.                                 <circle cx="32" cy="32" r="31">
    17.                         </svg>
    18.                 </div>
    19.         </body>
    20. </html>
    复制代码


    8.3 style.css代码


    1. body {
    2.         margin: 0;
    3.         height: 100vh;
    4.         width: 100vw;
    5.         display: flex;
    6.         align-items: center;
    7.         justify-content: center;
    8.         font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    9.         font-size: 14px;
    10. }
    11. .background {
    12.         position: relative;
    13.         background: linear-gradient(to top, #49b26e 0%, #57d895 100%);
    14.         border-radius: 5px;
    15.         display: flex;
    16.         align-items: center;
    17.         justify-content: center;
    18.         flex-direction: column;
    19.         box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.25);
    20.         width: 400px;
    21.         height: 400px;
    22.         color: white;
    23. }
    24. .background input {
    25.         display: none;
    26. }
    27. .background .button {
    28.         display: flex;
    29.         justify-content: center;
    30.         align-items: center;
    31.         width: 260px;
    32.         height: 60px;
    33.         border: 2px solid white;
    34.         border-radius: 30px;
    35.         text-align: center;
    36.         font-size: 20px;
    37.         text-transform: uppercase;
    38.         font-weight: bold;
    39.         letter-spacing: 2px;
    40.         transition: all 0.3s ease-in-out;
    41.         cursor: pointer;
    42. }
    43. .background .button:hover {
    44.         background-color: #37be77;
    45. }
    46. .background .button .fas {
    47.         position: absolute;
    48.         color: #4caf50;
    49.         z-index: 2;
    50.         opacity: 0;
    51. }
    52. .background .circle {
    53.         position: absolute;
    54.         width: 65px;
    55.         height: 65px;
    56.         fill: none;
    57.         stroke: white;
    58.         stroke-width: 2px;
    59.         stroke-linecap: round;
    60.         stroke-dasharray: 183 183;
    61.         stroke-dashoffset: 183;
    62.         opacity: 0;
    63.         left: 0;
    64.         bottom: 0;
    65.         right: 0;
    66.         top: 0;
    67.         margin: auto;
    68.         pointer-events: none;
    69.         transform: rotate(-90deg);
    70. }
    71. .background input:checked~.button {
    72.         animation: button 0.5s ease both, fill 0.5s ease-out 1.5s forwards;
    73. }
    74. .background input:checked~.button .fas {
    75.         animation: check 0.5s ease-out 1.5s both;
    76. }
    77. .background input:checked~.circle {
    78.         animation: circle 2s ease-out 0.5s both;
    79. }
    80. @keyframes button {
    81.         0% {
    82.                 width: 260px;
    83.                 left: 70px;
    84.                 border-color: white;
    85.                 color: white;
    86.         }
    87.         50% {
    88.                 color: transparent;
    89.         }
    90.         100% {
    91.                 width: 60px;
    92.                 left: 170px;
    93.                 border-color: #45b078;
    94.                 background: transparent;
    95.                 color: transparent;
    96.         }
    97. }
    98. @keyframes circle {
    99.         0% {
    100.                 stroke-dashoffset: 183;
    101.         }
    102.         50% {
    103.                 stroke-dashoffset: 0;
    104.                 stroke-dasharray: 183;
    105.                 transform: rotate(-90deg) scale(1);
    106.                 opacity: 1;
    107.         }
    108.         90%,
    109.         100% {
    110.                 stroke-dasharray: 500 500;
    111.                 transform: rotate(-90deg) scale(2);
    112.                 opacity: 0;
    113.         }
    114. }
    115. @keyframes fill {
    116.         0% {
    117.                 background: transparent;
    118.                 border-color: white;
    119.         }
    120.         100% {
    121.                 background: white;
    122.         }
    123. }
    124. @keyframes check {
    125.         0% {
    126.                 opacity: 0;
    127.         }
    128.         100% {
    129.                 opacity: 1;
    130.         }
    131. }
    复制代码

    到此这篇关于CSS3点击按钮圆形进度打钩效果的文章就介绍到这了,更多相关css3圆形进度按钮内容请搜索百宝网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持百宝网!
    回复

    使用道具 举报

    发表回复

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

    本版积分规则

  • 返回顶部

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