css3 上课睡觉

今天上午的CSS3课程，我真的是太困了，就忍不住想在课堂上睡觉。可是突然想到了CSS3的一些优秀特性，就把我从瞌睡中救了出来。

/* CSS3的动画效果 */.animation {
      animation: shake 2s;
}
@keyframes shake {
  0% {
     transform: translate(0);
 }
  25% {
     transform: translate(-2px, 2px);
 }
  50% {
     transform: translate(-4px, 4px);
 }
  75% {
     transform: translate(-2px, 2px);
 }
  100% {
     transform: translate(0);
 }
}

在老师讲解CSS3的动画效果时，我被一些新奇的属性深深吸引了。比如animation，通过设定关键帧，可以轻易实现动态的效果。虽然我做出来的只是简单的抖动，但对我来说已经是一大突破了。

/* CSS3的过渡效果 */.transition {
      transition: all 0.3s ease-in-out;
}
.transition:hover {
      transform: scale(1.2);
}
    

另外，过渡效果也很好玩。我尝试添加了一个:hover的效果，通过transform将元素放大1.2倍。相比之前单纯的变大，这个过渡效果感觉更加流畅美观。而且，这种过渡效果适合多种属性，灵活性非常大。

总而言之，今天上课虽然困意满满，但CSS3的一些特性还是给我带来了惊喜。这种感觉真好。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！