用css3怎样做点击圆形按钮显示正确图片的效果？

发布时间：2022-01-12 11:05 所属栏目：13 来源：互联网

导读：本文给大家分享用css3怎样做点击圆形按钮显示正确图片的效果，也就是点击按钮之前显示打钩的图标效果，这样的效果使用在一些答题互动的场景都是不错的，那么下面我们就继续往下看吧。 CSS3点击按钮圆形进度打钩效果 1 图片预览 2 index.html代码 !DOCTYPE ht

本文给大家分享用css3怎样做点击圆形按钮显示正确图片的效果，也就是点击按钮之前显示打钩的图标效果，这样的效果使用在一些答题互动的场景都是不错的，那么下面我们就继续往下看吧。
　　CSS3点击按钮圆形进度打钩效果
　　1 图片预览

　　2 index.html代码
　　<!DOCTYPE html>
　　<html lang="en">
　　 <head>
　　 <meta charset="UTF-8">
　　 <title>CSS3点击按钮圆形进度打钩效果</title>
　　 
　　 <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css'>
　　 
　　 <link rel="stylesheet" href="css/style.css">
　　 </head>
　　 <body>
　　 <div class="background">
　　 <input type="checkbox" id="button">
　　 <label for="button" class="button"> 点击按钮<i class="fas fa-check"></i></label>
　　 <svg class="circle">
　　 <circle cx="32" cy="32" r="31">
　　 </svg>
　　 </div>
　　 </body>
　　</html>
　　3 style.css代码
　　body {
　　 margin: 0;
　　 height: 100vh;
　　 width: 100vw;
　　 display: flex;
　　 align-items: center;
　　 justify-content: center;
　　 font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
　　 font-size: 14px;
　　}

　　.background {
　　 position: relative;
　　 background: linear-gradient(to top, #49b26e 0%, #57d895 100%);
　　 border-radius: 5px;
　　 display: flex;
　　 align-items: center;
　　 justify-content: center;
　　 flex-direction: column;
　　 box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.25);
　　 width: 400px;
　　 height: 400px;
　　 color: white;
　　}

　　.background input {
　　 display: none;
　　}

　　.background .button {
　　 display: flex;
　　 justify-content: center;
　　 align-items: center;
　　 width: 260px;
　　 height: 60px;
　　 border: 2px solid white;
　　 border-radius: 30px;
　　 text-align: center;
　　 font-size: 20px;
　　 text-transform: uppercase;
　　 font-weight: bold;
　　 letter-spacing: 2px;
　　 transition: all 0.3s ease-in-out;
　　 cursor: pointer;
　　}

　　.background .button:hover {
　　 background-color: #37be77;
　　}

　　.background .button .fas {
　　 position: absolute;
　　 color: #4caf50;
　　 z-index: 2;
　　 opacity: 0;
　　}

　　.background .circle {
　　 position: absolute;
　　 width: 65px;
　　 height: 65px;
　　 fill: none;
　　 stroke: white;
　　 stroke-width: 2px;
　　 stroke-linecap: round;
　　 stroke-dasharray: 183 183;
　　 stroke-dashoffset: 183;
　　 opacity: 0;
　　 left: 0;
　　 bottom: 0;
　　 right: 0;
　　 top: 0;
　　 margin: auto;
　　 pointer-events: none;
　　 transform: rotate(-90deg);
　　}

　　.background input:checked~.button {
　　 animation: button 0.5s ease both, fill 0.5s ease-out 1.5s forwards;
　　}

　　.background input:checked~.button .fas {
　　 animation: check 0.5s ease-out 1.5s both;
　　}

　　.background input:checked~.circle {
　　 animation: circle 2s ease-out 0.5s both;
　　}

　　@keyframes button {
　　 0% {
　　 width: 260px;
　　 left: 70px;
　　 border-color: white;
　　 color: white;
　　 }

　　 50% {
　　 color: transparent;
　　 }

　　 100% {
　　 width: 60px;
　　 left: 170px;
　　 border-color: #45b078;
　　 background: transparent;
　　 color: transparent;
　　 }
　　}

　　@keyframes circle {
　　 0% {
　　 stroke-dashoffset: 183;
　　 }

　　 50% {
　　 stroke-dashoffset: 0;
　　 stroke-dasharray: 183;
　　 transform: rotate(-90deg) scale(1);
　　 opacity: 1;
　　 }

　　 90%,
　　 100% {
　　 stroke-dasharray: 500 500;
　　 transform: rotate(-90deg) scale(2);
　　 opacity: 0;
　　 }
　　}

　　@keyframes fill {
　　 0% {
　　 background: transparent;
　　 border-color: white;
　　 }

　　 100% {
　　 background: white;
　　 }
　　}

　　@keyframes check {
　　 0% {
　　 opacity: 0;
　　 }

　　 100% {
　　 opacity: 1;
　　 }
　　}

（编辑：ASP站长网）