css与js 动效的区别

CSS和JavaScript（简称JS）是前端开发中不可或缺的两个重要技术。其中，CSS主要用于页面的样式定义和美化，而JS则可以实现页面上的各种交互效果。在前端开发中，CSS和JS都可以实现动效，但二者存在明显的区别。

首先，CSS实现动效主要是通过CSS3中的动画属性来实现。CSS3中提供了以下四种动画属性：transition、animation、transform、keyframes。其中，transition属性用于过渡效果，animation属性用于动画效果，transform属性用于变形效果，keyframes属性用于定义关键帧动画。CSS实现动效的好处是代码简单易懂，适用于简单动效，如过渡效果、轮播图等。

/* 使用transition属性实现hover动态效果 */
div {
  width: 200px;
  height: 200px;
  background-color: red;
  transition: width 1s ease-out;
}
div:hover {
  width: 300px;
} 

而JS实现动效主要是通过一系列代码逻辑和函数实现。JS可以针对用户操作进行相应的交互效果，如点击按钮滑动页面、鼠标移入移出特效等。JS实现动效的好处是可以实现复杂交互效果，如拖拽排序、模态框弹窗等。

// 使用JS实现轮播图
let index = 0;
let timer;
function slide() {
  let imgList = document.querySelectorAll('.img');
  imgList[index].style.display = 'none';
  index++;
  if(index === imgList.length) {
    index = 0;
  }
  imgList[index].style.display = 'block';
  timer = setTimeout(slide, 2000);
}
slide(); 

总之，CSS和JS都有各自的优缺点，应根据具体情况选择使用哪种方式实现页面动效。但无论使用哪种方式，动效都可以提升网站的用户体验度，使用户更愿意停留在网站上，增加网站的黏性和转化率。