想要让自己的网站更加吸引人，就需要掌握一些酷炫的CSS代码。下面介绍几个常用的CSS技巧，只需30秒即可学会！
动画效果
使用CSS动画可以让你的网站更生动有趣。这里是一个简单的例子，让元素不断旋转：
-- -------------------- ---- -------
-------- -
---------- ---- -- ------ ---------
-
---------- ---- -
---- -
---------- ---------------
-
-上述代码中，我们定义了一个名为“spin”的动画，它将元素在2秒内以线性方式无限次地旋转。关键帧“100%”表示元素旋转了360度。
背景渐变
背景渐变是一种漂亮的设计效果，可以通过以下代码实现：
.element {
background: linear-gradient(to right, #ff0000, #0000ff);
}这将创建一个从红色到蓝色的水平渐变。你也可以尝试其他方向和颜色的组合。
边框动画
要让边框闪烁或呼吸，可以使用以下代码：
-- -------------------- ---- -------
-------- -
------- --- ----- -----
---------- ----- -- -------- ---------
-
---------- ----- -
-- -
---------- ---------
-------- --
-
---- -
---------- -----------
-------- --
-
-这将使边框在2秒内以缓出方式无限次地闪烁。关键帧“0%”和“100%”分别定义了元素的初始状态和结束状态。
CSS滤镜
CSS滤镜可以为图像添加效果，例如模糊、反转或饱和度。以下是一些常见的例子：
.element {
filter: blur(5px); /* 模糊 */
filter: grayscale(100%); /* 灰度 */
filter: invert(100%); /* 反转 */
filter: saturate(200%); /* 饱和度 */
}滤镜还有很多其他选项，请查看MDN文档。
文字阴影
为文字添加阴影可以使其更加突出，以下是一个简单的例子：
h1 {
text-shadow: 2px 2px #000;
}这将在标题下方创建一个黑色阴影，向右和向下各偏移2个像素。
总结：这些技巧只是冰山一角，掌握CSS可以创建许多惊人的设计效果。通过不断练习和尝试，让你的网站变得更加酷炫！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8660
