css3有哪些效果好

CSS3是Web开发领域的一个重要技术，它可以帮助开发者在网页设计中实现许多炫酷的效果。这里介绍一些CSS3中比较好的效果。

/* 圆角和阴影效果 */.box {
      border-radius: 10px;
      box-shadow: 2px 2px 5px #ccc;
}
/* 渐变效果 */.box {
      background: linear-gradient(to right, #ffafbd, #ffc3a0);
}
/* 动画效果 */@keyframes shake {
  0% {
     transform: translateX(0);
 }
  10%, 90% {
     transform: translateX(-10px) rotate(5deg);
 }
  20%, 80% {
     transform: translateX(10px) rotate(-5deg);
 }
  30%, 50%, 70% {
     transform: translateX(-10px) rotate(5deg);
 }
  40%, 60% {
     transform: translateX(10px) rotate(-5deg);
 }
  100% {
     transform: translateX(0);
 }
}
.box {
      animation: shake 1s infinite;
}
/* 文本特效 */.box {
      text-shadow: 2px 2px 5px #ccc;
      letter-spacing: 2px;
}
/* 媒体查询 */@media only screen and (max-width: 768px) {
  .box {
        font-size: 14px;
  }
}
     

以上是一些CSS3中比较好的效果。使用CSS3可以为网页设计增添更多的趣味性和吸引力。不过在实际开发中，也要注意浏览器的兼容性问题，避免一些效果在某些浏览器中无法展现。

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