分享几个水滴效果的按钮

于 2023-07-25 19:19:44 发布
阅读量224 收藏 2
点赞数 1
分类专栏： CSS 文章标签： css javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35241329/article/details/131924619
版权

先看效果：
在这里插入图片描述
再看代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水滴效果的按钮</title>
    <link rel="stylesheet" href="https://codepen.io/nicolasjesenberger/pen/GRYvOWy/d5176f9552830811da3e2bde0120cc26.css">
    <script src="https://codepen.io/nicolasjesenberger/pen/VwEzMrY/81eb6139c2c9b7dbc46e43d898e7d29b.js"></script>
    <style>
        body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 1em;
            min-height: 100vh;
            font-size: 2em;
        }

        .toggle-container {
            position: relative;
            border-radius: 3.125em;
            width: 3.25em;
            height: 1.875em;
        }

        .toggle-checkbox {
            -webkit-appearance: none;
            appearance: none;
            position: absolute;
            z-index: 1;
            border-radius: inherit;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
        }

        .toggle-track {
            display: flex;
            align-items: center;
            position: relative;
            border-radius: inherit;
            padding: 0.25em;
            width: 100%;
            height: 100%;
            background-color: #aeaeae;
            box-shadow: inset 0 0.0625em 0.125em rgba(0, 0, 0, 0.2);
            transition: background-color 0.4s linear;
        }
        .toggle-container.green > .toggle-checkbox:checked + .toggle-track {
            background-color: #4ccf59;
        }
        .toggle-container.blue > .toggle-checkbox:checked + .toggle-track {
            background-color: #3384fb;
        }
        .toggle-container.boo > .toggle-checkbox:checked + .toggle-track {
            background-color: #ff3372;
        }

        .toggle-thumb {
            position: relative;
            border-radius: 0.6875em;
            transform-origin: left;
            width: 1.375em;
            height: 1.375em;
            background-color: #fff;
            box-shadow: 0 0.25em 0.25em rgba(0, 0, 0, 0.2), inset 0 -0.125em 0.25em rgba(0, 0, 0, 0.2);
        }
        .toggle-checkbox.toggled-once + .toggle-track > .toggle-thumb {
            animation-name: grow-out, bounce-out;
            animation-duration: 0.2s;
            animation-timing-function: cubic-bezier(0.75, 0, 1, 1), cubic-bezier(0, 0, 0.3, 1.5);
            animation-delay: 0s, 0.2s;
            animation-fill-mode: forwards;
        }
        .toggle-checkbox.toggled-once:checked + .toggle-track > .toggle-thumb {
            animation-name: grow-in, bounce-in;
        }
        .toggle-container.boo .toggle-thumb::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            border-radius: inherit;
            width: 100%;
            height: 100%;
            background-image: url("https://assets.codepen.io/4175254/boo-face.png");
            background-size: 63.6363636364% 54.5454545455%;
            background-position: center;
            background-repeat: no-repeat;
            box-shadow: inset 0 -0.125em 0.25em rgba(0, 0, 0, 0.2);
            image-rendering: pixelated;
            opacity: 0;
            transition: opacity 0.2s linear;
        }
        .toggle-container.boo > .toggle-checkbox:checked + .toggle-track > .toggle-thumb::after {
            opacity: 1;
        }

        @media (hover: hover) {
            .toggle-container.boo > .toggle-checkbox:hover + .toggle-track > .toggle-thumb::after {
                opacity: 1;
            }
        }

        @keyframes grow-in {
            0% {
                border-radius: 0.6875em;
                transform: translateX(0) scale(1);
            }
            100% {
                border-radius: 0.4448529412em / 0.9453125em;
                transform: translateX(0.5em) scale(1.5454545455, 0.7272727273);
            }
        }
        @keyframes bounce-in {
            0% {
                border-radius: 0.4448529412em / 0.9453125em;
                transform: translateX(0.5em) scale(1.5454545455, 0.7272727273);
            }
            100% {
                border-radius: 0.6875em;
                transform: translateX(100%) scale(1);
            }
        }
        @keyframes grow-out {
            0% {
                border-radius: 0.6875em;
                transform: translateX(100%) scale(1);
            }
            100% {
                border-radius: 0.4448529412em / 0.9453125em;
                transform: translateX(0.125em) scale(1.5454545455, 0.7272727273);
            }
        }
        @keyframes bounce-out {
            0% {
                border-radius: 0.4448529412em / 0.9453125em;
                transform: translateX(0.125em) scale(1.5454545455, 0.7272727273);
            }
            100% {
                border-radius: 0.6875em;
                transform: translateX(0) scale(1);
            }
        }
    </style>
</head>
<body>
<div class="toggle-container green">
    <input class="toggle-checkbox" type="checkbox">
    <div class="toggle-track">
        <div class="toggle-thumb"></div>
    </div>
</div>

<div class="toggle-container blue">
    <input class="toggle-checkbox" type="checkbox">
    <div class="toggle-track">
        <div class="toggle-thumb"></div>
    </div>
</div>

<div class="toggle-container boo">
    <input class="toggle-checkbox" type="checkbox">
    <div class="toggle-track">
        <div class="toggle-thumb"></div>
    </div>
</div>
</body>
<script>
    const checkboxes = document.querySelectorAll('input[type="checkbox"]');

    const detectToggleOnce = (e) => {
        e.target.classList.add('toggled-once');
    };

    checkboxes.forEach(checkbox => {
        checkbox.addEventListener('click', detectToggleOnce, { once: true });
    });
</script>
</html>
timi先生
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
纯css实现Material Design中的水滴动画按钮
12-13
前言 大家平时应该经常见到这种特效，很炫酷不是吗 这是谷歌Material Design中最常见的特效了，市面上也有很多现成的js库，用来模拟这一特效。但是往往要引入一大堆js和css，其实在已有的项目中，可能只是想加一个这样的按钮，来增强用户体验，这些js库就显得有些过于庞大了，同时由于是js实现，很多时候还要注意加载问题。 那么，有没有办法用css来实现这一特效呢？ 思路 其实就是一个动画，一个正圆从小变大，用css3中的动画很容易实现 示例代码 @keyframes ripple{ from { transform: scale(0); opa
css-点击按钮实现水滴动画
WANG_CA的博客
10-23 3308
平常在使用APP的时候，当用户点击某个按钮的时候，按钮会出现水滴的效果，原生APP开发的时候，会提供相关的动画，如果在PC端或者H5的时候想实现这个效果，也可以找一些相关的库来进行开发，但是为了某一个小小的交互而引入外部的JS和CSS，始终感觉不划算，自己如果用css+js来进行开发，可能体验和开发会更加方便。 一、CSS &amp;lt;style&amp;gt; .btn { display: b...
html如何制作水滴效果图,CSS+HTML<水滴按钮效果>
weixin_36407172的博客
06-03 270
效果图：hover.gifTweenlite，是webgame开发人员比较常用的一个缓动库。官方网站：http://www.greensock.com/tweenlite/可以去https://www.tweenmax.com.cn/start/下载 TweenMax.min.js 并引入它的优点：1.高效，性能不会差。2.体积小，用到项目中，你的文件大小增加了3-4k。3.容易使用，常用的函数就...
水滴效果实现图片切换
wzq2011的博客
11-27 209
水滴效果实现图片切换 用户点击，从点击位置开始，类似湖水中波浪散开效果来切换下一张图片。 html代码如下: <div id="wrap"> <div id="bg"></div> <canvas></canvas> </div> 实现思路是 canvas中画出第一图片 在画布背后再用div#bg中放入第二张图片 用户点击后，画布慢慢透明，div中图片显示 画布透明完成后，立即在画布画出第二张图片，将下一张图片放入
CSS实现水滴动效
很高兴你能看到这里
07-29 9102
哈喽哈喽！CSS真的好好玩啊，哈哈，反正我是爱了，空闲写着玩。画画不好的我乐了，下面就是一个用CSS3动画完成的模仿水珠的动效，其中主要就是会使用CSS设置阴影效果以及@keyframes关键帧和一些选择器的技术，快来学习吧！ ...
wpf水珠分散按钮
10-10
WPF水珠分散按钮的设计通常涉及到以下几个技术点： 1. **自定义控件**：为了实现这种特殊效果，开发者需要创建一个自定义的按钮控件，继承自WPF的`Button`类，并覆写其模板和行为。这涉及到XAML语言的使用，用于...
Android控件实现水滴效果
08-26
3.画曲线的几个关键点：p1,p2,p3,p4这4个点分别对应两个圆的两边的点，即p1到p2就是圆的直径。p3和p4同理，那么就很容易确定这四个点的坐标了。然后，c1和c2是分别控制p1到p3、p2到p4的曲线，是贝塞尔曲线的控制点。...
Qt5带水纹的按钮带声音
05-27
我们主要关注以下几个知识点： 1. **Qt5基础**：Qt5是Qt库的一个版本，提供了一套全面的跨平台应用程序开发框架，支持Windows、Linux、MacOS等多种操作系统。它包含丰富的UI组件和工具，如QWidgets、QML等，用于...
002半透明效果
01-09
在实际应用中，需要注意几个关键问题： 1. **渲染顺序**：由于半透明物体的渲染需要考虑前后顺序，所以必须正确排序，通常是从远及近或从后往前渲染，以避免因混合顺序错误导致的视觉错误。 2. **深度缓冲**：为了...
RippleProgressButton:进度将随 Ripple 变化的按钮
06-07
实现RippleProgressButton主要涉及以下几个技术点： 1. **自定义View**：开发者需要创建一个新的View类，继承自Android的Button或者AppCompatButton，然后重写onDraw()方法，以实现自定义的绘制逻辑。这包括绘制...
WPF水珠效果按钮组的实现教程
10-18
下面小编就为大家分享一篇WPF水珠效果按钮组的实现教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
如何在html中加入动画效果,纯css如何实现按钮的水滴动画效果？
weixin_33216916的博客
05-31 397
纯css如何实现按钮的水滴动画效果？下面本篇文章就来给大家介绍一下使用纯css实现Material Design中按钮的水滴动画效果。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。前言大家平时应该经常见到这种特效，很炫酷不是吗这是谷歌Material Design中最常见的特效了，市面上也有很多现成的js库，用来模拟这一特效。但是往往要引入一大堆js和css，其实在已有的项目中，...
‘纯css实现Material Design中的水滴动画按钮’的js体验优化
weixin_34194702的博客
10-22 166
前言 在上一篇，我们已经实现了用纯css实现水滴扩散动画，但是有一些瑕疵，文章结尾处也提到过，一是页面加载进来就会看到按钮上的水滴动画运动一次，二是点击的时候不能根据鼠标的位置来扩散，今天我们来解决这个问题。 以下所有基础代码均来自上一篇 css中只能做到固定的点扩散 无法避免的js 虽然我很想通过css来实现想要的效果，毕竟属于UI交...
CSS 3.0实现水滴单选框
越陌度阡
05-09 455
给大家分享一个用CSS 3.0实现水滴单选框动画，效果如下： 以下是代码实现，欢迎大家复制、粘贴和收藏。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS 3.0实现水滴单选框</title> <style> @import url(ht
css动态水滴效果
qq_62403061的博客
02-26 1175
纯css动画完成动态水滴效果
CSS - radio 简单又好看的CSS单选按钮样式
最新发布
qq_37131747的博客
06-13 2077
【代码】CSS - radio 简单又好看的CSS单选按钮样式。
使用css实现水珠/水滴效果
公众号 @ 桃小瑞
12-07 1668
使用 css 实现水珠/水滴效果
WPF 实现水纹效果
weixin_33963189的博客
09-25 447
原文:WPF 实现水纹效果 鼠标滑过产生水纹，效果图如下：     XMAL就放置了一个img标签   后台主要代码 窗体加载： private void Window_Loaded(object sender, RoutedEventArgs e) { ...
嵌入式实战：PWM控制LED亮度与水滴效果实现
"本文主要介绍了如何实现高级流水灯效果，特别是水滴效果和渐变带拖尾效果。文章首先强调了传统的流水灯控制只能实现LED的亮灭，无法调节亮度，然后引出了PWM（脉冲宽度调制）技术作为解决亮度控制的方法。PWM是一种...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

timi先生

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值