CSS+JS implements some common animation effects

We often use some common animation effects in the development and design of the website, the following is my share of the event countdown, rotation and through the Flex Box layout to achieve the effect of the shutter and the source code: \

Js make countdown effect code

function countDown(time){
     var nowTime =+ new Date(a);// The current time
     var inputTime =+new Date(time);  // Enter the time
     var times =(inputTime - nowTime)/1000;  // The unit is converted to seconds
     var d = parseInt(times / 60 /60 /24); / / number of days
         d = d <10 ? '0' + d : d;     // achieve the effect of 00
     var h = parseInt(times / 60 /60 % 24);  / / hour
         h = h <10 ? '0' + h : h;
     var m =parseInt(times / 60 % 60);
         m = m <10 ? '0' + m : m;
     var s =parseInt(times %60);
         s = s <10 ? '0' + s : s;
     return d +'day'+h+'when'+m+'points'+s+'秒';
 }
  function getTime(){
        var time = new Date(a);var h =time.getHours();
        h = h < 10 ? '0'+ h : h;
        var m =time.getMinutes();
        m = m < 10 ? '0' + m :m;
        var s =time.getSeconds();
        s = s < 10 ? '0' + s :s;
        return h+':'+m+':'+s;
    }
console.log(countDown('2021-12-01 00:00:00')); The above is a simple encapsulation of a time function, later can create an interval of 1000mssetInterval(countDown, 1000) interval repetition timer only needs to be calledCopy the code

Js to achieve the effect of web page rotation:

// Create a caroute graph function
function carousel(){
    // Get the object of the multicast graph
    var oCarousel = document.querySelector('.carousel');
    // Add the name of the image
    var imgArr = ['1.jpg'.'2.jpg'.'3.jpg'.'4.jpg'];
    var img = document.querySelector('#displayimg');
    var Timer =null;
    var n = 0;
    // Mouse over clear timer
    oCarousel.onmouseenter = function(){
        clearInterval(Timer);
    }
    // Mouse starts timer
    oCarousel.onmouseleave = function(){
        showTime();
    }
    // Get the left button of the wheel map
    var preve = document.querySelector('.preve');
    preve.onclick = function(){
        clearInterval(Timer);
        console.log(n);
        if( n === 0){
            n = imgArr.length-1;
            img.src = 'img/' +imgArr[n];
        }else{
            n--;
            img.src = 'img/'+imgArr[n]; }}// Get the right button of the wheel map
    var next = document.querySelector('.next');
    next.onclick = function(){
        clearInterval(Timer);
        console.log(n);
        if( n > imgArr.length-2){
            n = 0;
            img.src = 'img/' +imgArr[n];
        }else{
            n++;
            img.src = 'img/'+imgArr[n]; }}// Click the button on the lower side of the rotation chart
    var lis = document.querySelectorAll('li');  
    // console.log(lis);  
    for(var i=0; i < lis.length; i++){ lis[i].onclick =function(){
            n = this.title;
            img.src = 'img/' +imgArr[n];
        // console.log(lis[i]);}}function showTime(){
        // Set the timer
        Timer = setInterval(function(){
            img.src = 'img/' +imgArr[n];
            n += 1;
            if( n>3 ){
                n =0; }},2000) 
    }
    showTime()
}
carousel();
Copy the code

slide01 slide02 slide03 slide04

CSS to make the louver effect code

ul{
    list-style: none;
    width: 510px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
ul li {
    width: 100px;
    height: 100px; 
    flex: 1;
    border: 1px solid #ccc;
}
ul li:hover{
    flex: 3;
    transition: 1s;   
}

Copy the code