[分享]css3效果代码视频教程

今天小编为大家介绍一些关于 CSS3效果代码 的视频教程。如果您正在学习 CSS3 或者想加强自己的 CSS3 技能，这些教程会对您有很大的帮助。 视频教程如下： 1. CSS Hover效果/CSS...

今天小编为大家介绍一些关于 CSS3效果代码 的视频教程。如果您正在学习 CSS3 或者想加强自己的 CSS3 技能，这些教程会对您有很大的帮助。 视频教程如下：

1. CSS Hover效果

/*CSS代码*/
.hover-effect {
  position: relative;
  display: inline-block;
  padding: 15px 30px;
  border: 1px solid #000;
  color: #fff;
  background-color: #000;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: all .3s ease;
}

.hover-effect:hover {
  background-color: #fff;
  color: #000;
} 

2. CSS3 动画效果

/*CSS3代码，动画名字为 shake*/
@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-20px); }
  50% { transform: translateX(20px); }
  75% { transform: translateX(-10px); }
  100% { transform: translateX(10px); }
}

/*应用动画*/
.shake-effect {
  animation: shake 1s infinite;
} 

3. CSS3 过渡效果

/*CSS3过渡效果*/
.transition-effect {
  position: relative;
  padding: 15px 30px;
  border: 1px solid #000;
  color: #fff;
  background-color: #000;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: all .3s ease;
}

.transition-effect:hover {
  background-color: #fff;
  color: #000;
} 

以上是小编精选的 CSS3 效果代码视频教程，希望能对您有所帮助。如果您还有更多的问题或者建议，欢迎在评论区留言，我们会尽快回复您。