您现在的位置是：网站首页> 编程资料编程资料

CSS3点击按钮圆形进度打钩效果的实现代码CSS3.0实现霓虹灯按钮动画特效的示例代码

2021-09-02 970人已围观

简介这篇文章主要介绍了CSS3点击按钮圆形进度打钩效果的实现代码,代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

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

8.1 图片预览

在这里插入图片描述

8.2 index.html代码

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

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圆形进度按钮内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

上一篇：CSS实现漂亮的时钟动画效果的实例代码css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果CSS 奇思妙想边框动画效果的实现CSS 动态高度过渡动画效果的实现使用CSS3制作版头动画效果CSS3分享图标按钮动画特效代码CSS3通过var()和calc()函数实现动画特效

下一篇：css3 filter属性的使用简介CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码css中filter属性和backdrop-filter的应用与区别详解详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用使用css的filter写鼠标滑过效果的实现示例CSS filter 有什么神奇用途