CSS+JS实现一些常见的动画效果(css的动画效果实现方法)
我们在开发设计网站的时候经常会使用一些常见的动画效果，以下是我本次分享的活动倒计时、轮播图以及通过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; }
作者：远之喵
链接：https://juejin.cn/post/7035476061705994277