css十个特效

CSS是网页设计中常用的技术之一，它可以让你的网站更加美观和实用。下面介绍十种常见的CSS特效，让你的网站更具有吸引力。

/*第一种特效：背景渐变*/
background: linear-gradient(to bottom,#FFDAB9,#FF6347);

/*第二种特效：边框动画*/
border: 2px solid #000;
transition: border-width 0.3s ease-in-out;
&:hover{
  border-width: 10px;
}

/*第三种特效：阴影*/
Box-shadow: 5px 5px 5px #888888;

/*第四种特效：文本渐变*/
color: linear-gradient(to right,#8B008B,#FF8C00);

/*第五种特效：透明度*/
opacity: 0.5;

/*第六种特效：旋转*/
transform: rotate(45deg);

/*第七种特效：平移*/
transform: translate(50px,50px);

/*第八种特效：缩放*/
transform: scale(2,2);

/*第九种特效：过渡*/
transition: all 0.3s ease-in-out;

/*第十种特效：动画*/
animation: my-animation 2s infinite;
@keyframes my-animation{
  0%{
    transform: scale(1);
  }
  50%{
    transform: scale(1.5);
  }
  100%{
    transform: scale(1);
  }
}

以上十种CSS特效是网站设计中常用的技术之一，它们可以让你的网站更加吸引人。无论你是一个设计爱好者，还是一个网站开发人员，学习并掌握这些技术将会帮助你为用户打造更好的网站。