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