css3动画

时间 2019-11-19

标签 css3 css 动画栏目 CSS 繁體版

原文原文链接

　　作项目会碰到作一些简单的css3动画，就把一些简单的动画属性玩了一遍，今天作了一个css3实现的滑块，以为还蛮好玩的，就记录一下实现方式。css

　　　首先看一下作的是个什么东东：html

　　　　就是一个开关，点了以后上面的滑块从左边跑到右边so easy的小动画。css3

　　　　　　　　　　图1 滑动前的效果web

　　　　　　　　　　图2 滑动后的效果css3动画

　　　　css3新属性就不在这里罗列了，想了解看看教程以后就会了。这里用到transition属性，因此粗略解释一下。transition属性,w3译为过渡，是元素从一种样式逐渐改变为另外一种的效果。你设定一个元素的初始样式，再设定最后的样式，而后你能够控制transition的过渡速度，延迟时间等等。那么怎么触发transition呢。MDN上是这么解释的：app

　　The transition CSS property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay. It enables you to define the transition between two states of an element. Different states may be defined using pseudo-classes like:hover or :active or dynamically set using JavaScript.动画

　　也就是说，transition在该元素上hover,active或者用js来触发transition,这样你才能看到transition效果。那么咱们动手作一个开关吧(∩_∩)this

　　利用transition作一个开关不难，写好一个初始样式和transition以后的样式就能够了，但问题是你怎么用css触发这个transition事件呢，去google上一搜，就看到不少抖机灵的同窗作的奇淫异巧（哭衰我怎么没想到）。随手看到一个方法，记录一下。google

　　既然点击的时候完成，那么咱们放一个复选框(checkbox)隐藏掉这个chckbox就好了呀~而后吧这个checkbox跟你要作动画的元素（好比label）绑定在一块儿，点击transition元素的时候，等同于点击checkbox,就这么机灵的出发了transition。spa

　　大概思想就是这样子的，当时看到这个方法的时候只是以为，不少时候，作一些没尝试的东西，多google，去吸收别人的优秀经验，还有就是要动脑子，奇淫异巧这个东西，就是你思惟模式要跳跃，要敢于尝试就能够啦(∩_∩)(∩_∩)好哒，感慨完了放代码吧。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<style type = "text/css">
    .switch{
        background-color:#9fcaf4;
        height: 26px;
        width: 0;
        border-radius: 12px;
        transition:all 1s ease;
    }
    .bg{
        display: block;
        width: 68px;
        height: 26px;
        border-radius: 12px;
        background-color:#526069;
        overflow: hidden;
    }
    .bg:after{
        position: absolute;
        top:8px;
        left:0;
        display: block;
        content:'';
        width: 26px;
        height: 26px;
        background-color: #e6ebee;
        border-radius: 50%;
        transition:all 1s ease;
        background-image:-webkit-linear-gradient(0deg, #e5eaed, #fafbfb);
    }

    input{
        display: none;
    }
    input:checked ~ label:after{
        position: absolute;
        top:8px;
        left:56px;
    }
    input:checked ~label .switch{
        width: 68px;
    }
</style>
<div class  ="wrap">
    <input type = "checkbox" id = "unchecked"/>
    <label for = "unchecked" class = "bg">
        <div class = "switch"></div>    
    </label>
</div>
</body>
</html>

就这样子啦~~~很简单的，就是记录一下这种思惟模式。