[分享]css两种特效视频

在网站设计中，CSS是一个非常实用的工具，它可以给网页增加动态感和美观性。下面我们来了解两种常见的CSS特效：1. Hover特效 :hover伪类是CSS中最常用的伪类之一。当鼠标悬停在元素上面时...

在网站设计中，CSS是一个非常实用的工具，它可以给网页增加动态感和美观性。下面我们来了解两种常见的CSS特效：

1. Hover特效

:hover伪类是CSS中最常用的伪类之一。当鼠标悬停在元素上面时，可以通过:hover伪类的设置来改变元素的样式。

例如，我们可以在CSS中这样设置：

.btn {
  background-color: #006600;
  color: #fff;
  padding: 10px 16px;
  border-radius: 4px;
  transition: background-color 0.5s ease;
}

.btn:hover {
  background-color: #4CAF50;
}

这里我们设置了一个按钮的样式，当鼠标悬停在按钮上时，按钮的背景颜色会在0.5秒内渐变到#4CAF50。

2. 动画特效

CSS3中提供了一些新的属性，可以用来实现各种各样的动画效果。比如，animation属性可以实现元素的平滑过渡，transform属性可以实现元素的旋转、缩放和移动等效果。

例如，我们可以在CSS中这样设置：

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

.slide {
  animation-name: slidein;
  animation-duration: 3s;
}

这里我们设置了一个元素的滑动特效，当该元素添加slide类名时，元素会在3秒内从左向右滑动。

以上就是两种常见的CSS特效，它们可以让网页更加生动有趣，给用户带来更好的使用体验。