码迷,mamicode.com
首页 > Web开发 > 详细

css3_transition: 体验好的过渡效果。附 好看的按钮

时间:2018-08-07 15:08:50      阅读:437      评论:0      收藏:0      [点我收藏+]

标签:classlist   doc   soft   display   .com   func   一个   com   top   

技术分享图片

 

利用css的transition属性详解,上图就是利用transition效果做的一个按钮。

transition属性://举例子:transition:all 1s ease;transition:全部 1秒 缓和

    

transition: property duration timing-function delay;

property —— 指定CSS属性的name,transition效果 //举例:all width...那种属性 或者全部属性  注意:一定要改变他的长宽高其他的属性值才会触发transition 效果

duration —— transition效果需要指定多少秒或毫秒才能完成 //举例:1s(1秒) 持续时间

timing-function —— 指定transition效果的转速曲线 //举例:ease-in ease (贝塞尔曲线) 平滑效果 #查看更多详细

delay —— 属性指定何时将开始切换效果 //举例:2s 延迟两秒执行

 

 

#Style

    

        #btn{
            width: 48px;
            height: 20px;
            border:1px solid rgba(153, 153, 153, 0.35);
            border-radius:10px;
            background-color: white;
            transition:all 1s ease;
            position: relative;
            display: inline-block;
        }
        #btn_circle{
            display: inline-block;
            height: 18px;
            width: 18px;
            border-radius: 9px;
            border:1px solid rgba(153, 153, 153, 0.15);
            transition: all 0.6s ease; 
            background-color: #4cb946;
            position:absolute;
            top: 0px;
            right: 28px;
        }
        .btn_bg{
            background-color: #4cb946!important;
        }
        .btn_circle_move{
            right: 0!important;
            background-color: white!important;
        }

 

#Html

    <div style="padding: 100px;">

        <a id="btn">
                    <i id="btn_circle"></i>
            </a>
    </div>

 

#Js

        var btn = document.getElementById("btn");
        var btn_circle = document.getElementById("btn_circle");
        btn.addEventListener("click",function () { 
            var btnflag = btn.classList.contains(‘btn_bg‘);
            if(!btnflag){
                btn.classList.add("btn_bg");
                btn_circle.classList.add("btn_circle_move")
            }else{
                btn.classList.remove("btn_bg");
                btn_circle.classList.remove("btn_circle_move")
            };
             return false;

         },false)

 

css3_transition: 体验好的过渡效果。附 好看的按钮

标签:classlist   doc   soft   display   .com   func   一个   com   top   

原文地址:https://www.cnblogs.com/jason1991/p/9436601.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!