是时候展示真正的技术了滑动条效果

最新推荐文章于 2024-04-29 10:41:41 发布

基本模型与排列组合

最新推荐文章于 2024-04-29 10:41:41 发布

阅读量86

点赞数

分类专栏：前端培训文章标签： css html html5

本文链接：https://blog.csdn.net/qq_50832904/article/details/120104445

版权

前端培训专栏收录该内容

27 篇文章 0 订阅

订阅专栏

input[type="checkbox"]{
    width:  0px;
    height: 0px;
    visibility: hidden;
}
label{
    display: block;
    width:  500px;
    height: 150px;
    background-color:red;
    /* 
    border-radius：该属性允许您为元素添加圆角边框！ 
    属性是一个简写属性，用于设置四个 border-*-radius 属性。
    *:-top-left/-top-right/-bottom-right/-bottom-left 
    */
    border-radius: 100px;
    position: relative;
    /* 光标呈现为指示链接的指针（一只手） */
    cursor: pointer;
    /* 
    transition-property	规定设置过渡效果的 CSS 属性的名称。
    transition-duration	规定完成过渡效果需要多少秒或毫秒。
    transition-timing-function	规定速度效果的速度曲线。
    transition-delay	定义过渡效果何时开始 
    */
    transition: 0.5s;
    /* box-shadow 属性向框添加一个或多个阴影。 */
    box-shadow: 0 0 20px #477a8550;
}


/* 创建切换球 */
label::after{
    content:"";
    width:120px;
    height: 120px;
    background-color: yellow;
    position: absolute;
    border-radius: 70px;
    top:15px;
    left:15px;
    transition:0.5s;
}
/* 添加动画 */
input:checked+label::after{
left: calc(100% - 10px);
transform: translateX(-100%);
}

input:checked+label{
    background-color: green;
}
/*更加平滑的磁性效果*/
label:active::after{
    width:160px;
}



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
    <input type="checkbox" name="checkbox" id="checkbox">
    <label for="checkbox"></label>
</body>
</html>

https://mp.weixin.qq.com/s?fontRatio=1&__biz=MzAwNjI1MzI3OQ==&mid=2648997093&idx=2&sn=8a99ccd81fdcf9439b34d63586e4979e&scene=94&subscene=315&passparam=searchid%3D13900334395372895564&clicktime=1630742460&enterid=1630742460&ascene=64&devicetype=android-30&version=28000b3b&nettype=WIFI&lang=en&exportkey=A%2Fbk9DZU8i2D1QHMa9Ik4jQ%3D&pass_ticket=dbHg%2FdrZt%2FAU7bRXnqHnWSr2107aFhsjPjT%2BAKM0ER1MZ%2BVkL4a4pt0hhfl1YLp%2F&wx_header=1

基本模型与排列组合

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
是时候展示真正的技术了滑动条效果

input[type="checkbox"]{ width: 0; height: 0px; visibility: hidden;}label{ display: block; width: 500px; height: 150px; background-color:red; /* border-radius：该属性允许您为元素添加圆角边框！属性是一个简写属性，用于设置四个 border-*-radius 属.
复制链接

扫一扫