值得收藏的8个实用CSS效果代码「分享」-猿码集

1. 前言

对前端开发人员而言，CSS是一种不可或缺的技能。CSS（层叠样式表）是一种用于为网页添加样式的标记语言。它可以让你富有创意地设计你的网页，从而使其变得更具吸引力和可用性。笔者为大家整理了8个实用的CSS效果代码，富有实用性，简洁易懂。

2. 文本特效

2.1 阴影文本

这个CSS小技巧可以为网页上的标题或子标题添加阴影，以使它们看起来更加吸引人和突出。以下是实现代码样例：


.text-shadow {
  text-shadow:2px 2px 4px #000000;
}

在这个示例中，text-shadow属性将阴影应用于文本。2px是x方向的偏移量，2px是y方向的偏移量，4px是阴影的模糊度，#000000是阴影的颜色。

2.2 文字描边

另一个添加文字特效的方法是为文本添加描边。这可以通过使用CSS中的text-stroke属性来实现。以下是实现代码样例：


.text-stroke {
  -webkit-text-stroke:1px black;
}

在这个示例中，-webkit-text-stroke属性为文本添加了一个黑色描边，描边宽度为1px。

3. 按钮特效

3.1 悬停按钮

当用户悬停在一个按钮上时，可以用CSS添加一些特效，以为按钮添加动态效果。以下是一个简单的悬停按钮的示例：


.hover-button {
  background-color:#008CBA;
  color:white;
  padding:10px 20px;
  border-radius:5px;
  transition:background-color 0.5s ease;
}
.hover-button:hover {
  background-color:#004C6D;
}

在这个示例中，当用户悬停在按钮上时，CSS中使用:hover选择器，来修改按钮的背景色。这个过渡效果是平滑地从蓝色到深蓝色。

3.2 带边框的按钮

在按钮周围添加一个简单的边框可以使其看起来更具立体感。以下是一个简单的带边框的按钮的实现代码示例：


.border-button {
  background-color:white;
  color:black;
  padding:10px 20px;
  border:2px solid #008CBA;
  border-radius:5px;
}

在这个示例中，border属性为按钮添加了2个px的粗边框，并且border-color属性设置了边框的颜色。

4. 图像特效

4.1 变形图像

通过CSS transform属性可以创建一个图像的变形效果，使得图像看起来更加美观，具有艺术感。以下是一个变形图像的实现代码示例：


.transform-image {
  transform:rotate(20deg);
}

这个例子中，transform:rotate(20deg);属性旋转图像20度角度。

4.2 图像遮罩

CSS的mask-image属性可以为图片添加一种遮罩效果。以下是一个简单的图片遮罩的实现代码示例：


.mask-image {
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
}

这个示例中，mask-image属性使用了一个渐变的遮罩层，将图片从顶部向下淡化。这个作用可用于使图片背景与页面背景适应。

5. 背景特效

5.1 渐变背景

使用CSS的linear-gradient属性，可以创建一个渐变背景。以下是一个渐变背景的示例代码：


.gradient-background {
  background:linear-gradient(to bottom, #ff9933, #ffcc00, #ccff00);
}

这个示例中，linear-gradient属性创建了一个从上到下的渐变背景。to bottom声明了渐变的方向，#ff9933等颜色定义颜色的渐变过程。

5.2 动态背景

让背景动起来可以更好地吸引用户的眼球并增加页面的互动性。CSS中的animation关键字可以为背景添加动画效果，使其交互起来。以下是一个简单的动态背景的实现代码示例：


.dynamic-background {
  background-color: #F3F3F3;
  animation: background 15s ease infinite;
}
@keyframes background {
  0% {
    background-color: #F3F3F3;
  }
  50% {
    background-color: #A0427A;
  }
  100% {
    background-color: #F3F3F3;
  }
}

这个示例中，背景色从灰色到粉色，整个动画过程需要15秒，通过定义CSS动画的关键字@keyframes，实现背景色的变化。

6. 卡片效果

6.1 彩虹卡片

通过CSS实现彩虹色背景的卡片，使其看起来更具个性和吸引力。以下是一个简单的彩虹色背景卡片的实现代码示例：


.rainbow-card {
  background: linear-gradient(to right, #FF0066,  #FF7600, #FFC800, #0ABFBC, #005EFF, #2D00F7, #FF00FF);
  border-radius: 10px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
  color: white;
  padding: 20px;
  text-align: center;
}

在这个示例中，linear-gradient属性创建了一个从左到右的彩虹色背景卡片。box-shadow属性为背景卡片添加了一层阴影效果。

6.2 3D卡片

通过CSS transform属性，可以实现3D卡片的效果，使得卡片更加立体且具有吸引力。以下是一个简单的3D卡片的实现代码示例：


.three-d-card {
  transform-style:preserve-3d;
  transform:rotateY(0deg);
  transition:transform 1s ease-out;
}
.three-d-card:hover {
  transform:rotateY(180deg);
}

在这个示例中，transform属性创建了旋转角度为0度的3D卡片。当用户悬停卡片时，使用:hover为卡片应用旋转角度为180度的效果，达到动态立体的效果。

7. 边框特效

7.1彩虹边框

彩虹色边框可以使任何元素都变得更加生动活泼。以下是一个简单的彩虹色边框的实现代码示例：


.rainbow-border {
  border:3px solid #F3F3F3;
  border-image:linear-gradient(to right,#FF0066,#FF7600,#FFC800,#0ABFBC,#005EFF,#2D00F7,#FF00FF)30 round;
}

在这个示例中，border属性为元素添加了一个3px的白色边框，并使用border-image属性为边框添加了一个彩虹色渐变图像。

7.2 边框阴影

边框阴影可以使任何元素看起来更加三维，使其显得更加真实。以下是一个带有阴影边框的实现代码示例：


.shadow-border{
  border: 5px solid #F3F3F3;
  box-shadow: 0px 0px 20px rgba(0,0,0,0.5);
}

在这个示例中，border属性为元素添加了一个5px的白色边框，并使用box-shadow属性为边框添加了一个20px的模糊度阴影效果。

8. 扩展阅读

阅读完成后，可以进一步学习和扩展关于CSS的知识。

CSS选择器。

CSS布局。

CSS动画。

CSS框架。

祝您在前端开发中取得更高成就！

值得收藏的8个实用CSS效果代码「分享」