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

发布时间：2023-08-02 14:55:44 所属栏目：语言来源：

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

1 index.html代码

<!DO

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

1 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;

}

}

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!