IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> CSS 3.0实现水滴单选框 -> 正文阅读

[JavaScript知识库]CSS 3.0实现水滴单选框

给大家分享一个用CSS 3.0实现水滴单选框动画,效果如下:

以下是代码实现,欢迎大家复制、粘贴和收藏。

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>CSS 3.0实现水滴单选框</title>
        <style>
            @import url(https://fonts.googleapis.com/css?family=Raleway:400);
            @keyframes checkIn {
                0% {
                    top: -1%;
                    height: 10px;
                    width: 24px;
                    margin-left: -12px;
                }

                7% {
                    top: -4%;
                    height: 12.5px;
                    width: 22px;
                    margin-left: -11px;
                }

                17% {
                    top: -2%;
                    height: 15px;
                    width: 12px;
                    margin-left: -6px;
                }

                25% {
                    top: 20%;
                    height: 15px;
                    width: 10px;
                    margin-left: -5px;
                }

                30% {
                    top: 102%;
                    height: 10px;
                    width: 28px;
                    margin-left: -14px;
                }

                45% {
                    top: 50%;
                    height: 15px;
                    width: 6px;
                    margin-left: -3px;
                    margin-top: -10px;
                }

                60% {
                    top: 50%;
                    height: 20px;
                    width: 10px;
                    margin-left: -5px;
                }

                70% {
                    top: 50%;
                    height: 40px;
                    width: 40px;
                    margin-left: -20px;
                    margin-top: -20px;
                }

                80% {
                    top: 50%;
                    height: 32px;
                    width: 32px;
                    margin-left: -16px;
                    margin-top: -16px;
                }

                90% {
                    top: 50%;
                    height: 24px;
                    width: 24px;
                    margin-left: -12px;
                    margin-top: -12px;
                }

                100% {
                    top: 50%;
                    height: 24px;
                    width: 24px;
                    margin-left: -12px;
                    margin-top: -12px;
                }
            }

            @keyframes checkOut {
                0% {
                    overflow: visible;
                    top: 50%;
                    width: 30px;
                    height: 30px;
                    margin-top: -17px;
                    margin-left: -17px;
                    border: 2px solid #009fd6;
                    opacity: 1;
                }

                100% {
                    width: 46px;
                    top: 50%;
                    height: 46px;
                    margin-top: -25px;
                    margin-left: -25px;
                    border: 2px solid #009fd6;
                    opacity: 0;
                }
            }

            html,
            body {
                background: #000;
                height: 100%;
                width: 100%;
                padding: 0;
                margin: 0;
            }

            #container {
                position: relative;
                left: 50%;
                top: 50%;
                display: inline-block;
                transform: translateX(-50%) translateY(-50%);
            }

            input#circle-input {
                display: none;
            }

            input#circle-input:checked+label#circle-cont {
                overflow: hidden;
            }

            input#circle-input:checked+label#circle-cont #circle {
                background: #009fd6;
                animation: checkIn 1s forwards linear 0s 1;
            }

            label#circle-cont {
                border-radius: 50%;
                width: 30px;
                height: 30px;
                border: 1px solid #FFF;
                display: block;
                position: relative;
                float: left;
                overflow: visible;
            }

            label#circle-cont #circle {
                background: rgba(0, 0, 0, 0);
                position: absolute;
                left: 50%;
                border-radius: 50%;
                top: -100%;
                animation: checkOut 0.25s forwards linear 0s 1;
            }

            label#label-name {
                color: #FFF;
                font-family: "Raleway", sans-serif;
                position: relative;
                float: left;
                font-size: 1.25em;
                margin: 4px 12px;
            }
        </style>
    </head>

    <body>
        <div id="container">
            <input type="checkbox" id="circle-input" />
            <label for="circle-input" id="circle-cont">
                <div id="circle"></div>
            </label>
            <label for="circle-input" id="label-name">Radio Button</label>
        </div>
    </body>

</html>
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-05-10 11:48:02  更:2022-05-10 11:48:11 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 5:34:29-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码