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


Posted in HTML / CSS onMarch 30, 2021

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


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

 8.1 图片预览

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

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

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

 
HTML / CSS 相关文章推荐
纯CSS3实现表单验证效果(非常不错)
Jan 18 HTML / CSS
CSS3 please 跨浏览器的CSS3产生器
Mar 14 HTML / CSS
CSS3媒体查询(Media Queries)介绍
Sep 12 HTML / CSS
css3让div随鼠标移动而抖动起来
Feb 10 HTML / CSS
IE浏览器单独写CSS样式的几种方法
Oct 14 HTML / CSS
详解如何在css中引入自定义字体(font-face)
May 17 HTML / CSS
HTML5 语义化结构化规范化
Oct 17 HTML / CSS
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
Jun 09 HTML / CSS
html5实现多文件的上传示例代码
Feb 13 HTML / CSS
利用HTML5的新特点实现图片文件异步上传
May 29 HTML / CSS
html5移动端自适应布局的实现
Apr 15 HTML / CSS
CSS filter 有什么神奇用途
May 25 HTML / CSS
完美实现CSS垂直居中的11种方法
CSS代码检查工具stylelint的使用方法详解
5个HTML5的常用本地存储方式详解与介绍
CSS实现fullpage.js全屏滚动效果的示例代码
css animation配合SVG制作能量流动效果
如何通过 CSS 写出火焰效果
Html5移动端div固定到底部实现底部导航条的几种方式
Mar 09 #HTML / CSS
You might like
php框架Phpbean说明
2008/01/10 PHP
PHP用mysql数据库存储session的代码
2010/03/05 PHP
PHP用身份证号获取星座和生肖的方法
2013/11/07 PHP
strpos() 函数判断字符串中是否包含某字符串的方法
2019/01/16 PHP
jQuery 源码分析笔记(5) jQuery.support
2011/06/19 Javascript
js+数组实现网页上显示时间/星期几的实用方法
2013/01/18 Javascript
jquery插件jTimer(jquery定时器)使用方法
2013/12/23 Javascript
JSF中confirm弹出框的用法示例介绍
2014/01/07 Javascript
js函数定时器实现定时读取系统实时连接数
2014/04/30 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
2014/11/13 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
2015/11/18 Javascript
jQuery事件用法详解
2016/10/06 Javascript
Vue.js路由vue-router使用方法详解
2017/03/20 Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
2017/11/07 Javascript
详解weex默认webpack.config.js改造
2018/01/08 Javascript
JS随机数产生代码分享
2018/02/24 Javascript
使用webpack搭建pixi.js开发环境
2020/02/12 Javascript
vue在响应头response中获取自定义headers操作
2020/07/24 Javascript
[02:58]献给西雅图的情书_高清
2014/05/29 DOTA
python下函数参数的传递(参数带星号的说明)
2010/09/19 Python
离线安装Pyecharts的步骤以及依赖包流程
2020/04/23 Python
python里使用正则表达式的组嵌套实例详解
2017/10/24 Python
DataFrame中的object转换成float的方法
2018/04/10 Python
基于Python的微信机器人开发 微信登录和获取好友列表实现解析
2019/08/21 Python
详解用Python为直方图绘制拟合曲线的两种方法
2019/08/21 Python
Python中函数的返回值示例浅析
2019/08/28 Python
pyinstaller打包程序exe踩过的坑
2019/11/19 Python
详解python itertools功能
2020/02/07 Python
在keras中实现查看其训练loss值
2020/06/16 Python
Python实现弹球小游戏
2020/08/01 Python
雅诗兰黛美国官网:Estee Lauder美国
2016/07/21 全球购物
自主招生自荐信格式
2013/12/03 职场文书
小班重阳节活动方案
2014/02/08 职场文书
珍惜资源保护环境的建议书
2014/05/14 职场文书
英文升职感谢信
2015/01/23 职场文书
七一慰问简报
2015/07/20 职场文书