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

男娘i 2022-11-14 10:21 165阅读 0赞

### 文章目录 ###

*  八、CSS3点击按钮圆形进度打钩效果
 *   *  8.1 图片预览
     *  8.2 index.html代码
     *  8.3 style.css代码

--------------------

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

## 8.1 图片预览 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70_pic_center 1]

## 8.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>

## 8.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;
    	}
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/32ce392ebffb4363b01f1e3ba6922de7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221022/ab3275a64a9b466c9f0fd60b1a07d898.png