CSS+JS实现一些常见的动画效果

我们在开发设计网站的时候经常会使用一些常见的动画效果，以下是我本次分享的活动倒计时、轮播图以及通过flex box的布局方式实现百叶窗的效果以及源代码： \

js制作倒计时效果代码

function countDown(time){
     var nowTime =+ new Date();   //当前时间
     var inputTime =+new Date(time);  //输入的时间
     var times =(inputTime - nowTime)/1000;  //单位转换为秒
     var d = parseInt(times / 60 /60 /24); //天数
         d = d <10 ? '0' + d : d;     //实现 00的效果
     var h = parseInt(times / 60 /60 % 24);  //小时
         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 +'天'+h+'时'+m+'分'+s+'秒';
 }
  function getTime(){
        var time = new Date();
        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'));
上面是简单封装的一个时间函数，后面可以创建一个间隔为1000ms的 setInterval(countDown, 1000)的间隔重复定时器只需要调用即可

js实现网页轮播图效果：

//创建轮播图函数
function carousel(){
    //获取轮播图的对象
    var oCarousel = document.querySelector('.carousel');
    //添加图片的名字
    var imgArr = ['1.jpg','2.jpg','3.jpg','4.jpg'];
    var img = document.querySelector('#displayimg');
    var Timer =null;
    var n = 0;
    //鼠标移出清除定时器
    oCarousel.onmouseenter = function(){
        clearInterval(Timer);
    }
    //鼠标进入启动定时器
    oCarousel.onmouseleave = function(){
        showTime();
    }
    //获取轮播图左侧按钮
    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];
        }
    }
    //获取轮播图右侧按钮
    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];
        } 
    }
    //轮播图下侧按钮
    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(){
        //设置定时器
        Timer = setInterval(function(){
            img.src = 'img/' +imgArr[n];
            n += 1;
            if( n>3 ){
                n =0;
            }
        },2000) 
    }
    showTime()
}
carousel();

slide01 slide02 slide03 slide04

css 制作百叶窗效果代码

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;   
}