一、制作带icon的标题
想要让我们网页上的标题更加吸引眼球,我们可以在标题前面添加一个小图标,这样做显得更有创意和个性化,同时也可以更好地吸引用户的注意力。我们可以通过CSS伪元素来很容易地实现这一点。
h1::before{ content: url(icon.png); margin-right: 10px; }
代码中content属性的值指定我们想要添加的小图标,同时为了让标题与图标之间留出一定的空隙,我们在代码中添加了一个margin-right属性。
下面是完整的代码示例:
<style> h1::before{ content: url(icon.png); margin-right: 10px; } </style> <h1>This is a demo</h1>
二、实现霓虹字效果
霓虹字是非常常见的一种效果,在传播广告等方面也被广泛使用。我们可以通过CSS伪元素来实现这一效果,具体思路是在文字周围生成多个不同颜色、大小、透明度的光晕效果,然后再加上一层文字的投影效果。
h1 { position: relative; font-size: 70px; font-family: Arial; color: #fff; text-shadow: 0 0 10px rgba(255,255,255,1), 0 0 20px rgba(255,255,255,1), 0 0 30px rgba(255,255,255,1), 0 0 40px rgba(255,255,255,1); animation: neon 1.5s ease-in-out infinite alternate; } h1::before{ content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: #ff2ea0; animation: blur 3s ease-in-out infinite; } @keyframes neon { from { text-shadow: 0 0 10px rgba(255,255,255,1), 0 0 20px rgba(255,255,255,1), 0 0 30px rgba(255,255,255,1), 0 0 40px rgba(255,255,255,1); } to { text-shadow: 0 0 5px rgba(255,255,255,1), 0 0 10px rgba(255,255,255,1), 0 0 15px rgba(255,255,255,1), 0 0 20px rgba(255,255,255,1); } } @keyframes blur { from { opacity: 0.8; filter: blur(0px); } to { opacity: 0; filter: blur(35px); } }
代码中我们使用了text-shadow来实现文字的投影效果,同时又使用了animation动画来实现光晕效果的闪烁,并在伪元素中引入了一个模糊效果,制造出霓虹字效果的同时也增强了可读性。
下面是完整的代码示例:
<style> h1 { position: relative; font-size: 70px; font-family: Arial; color: #fff; text-shadow: 0 0 10px rgba(255,255,255,1), 0 0 20px rgba(255,255,255,1), 0 0 30px rgba(255,255,255,1), 0 0 40px rgba(255,255,255,1); animation: neon 1.5s ease-in-out infinite alternate; } h1::before{ content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: #ff2ea0; animation: blur 3s ease-in-out infinite; } @keyframes neon { from { text-shadow: 0 0 10px rgba(255,255,255,1), 0 0 20px rgba(255,255,255,1), 0 0 30px rgba(255,255,255,1), 0 0 40px rgba(255,255,255,1); } to { text-shadow: 0 0 5px rgba(255,255,255,1), 0 0 10px rgba(255,255,255,1), 0 0 15px rgba(255,255,255,1), 0 0 20px rgba(255,255,255,1); } } @keyframes blur { from { opacity: 0.8; filter: blur(0px); } to { opacity: 0; filter: blur(35px); } } </style> <h1 data-text="WELCOME">WELCOME</h1>
三、实现滑动线效果
在网页标题下面添加一条移动的线条,可以制造出一种很神秘、很时尚的效果。我们可以使用CSS伪元素来实现滑动线效果,具体思路是在标题下面添加一个伪元素作为线条,然后使用CSS动画来实现线条的移动。
h1 { position: relative; text-align: center; font-size: 40px; margin-top: 50px; color: #333; } h1::after { content: ""; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 50px; height: 2px; background-color: #555; animation: line 2s ease-in-out infinite; } @keyframes line { from { transform: translateX(-50%); } to { transform: translateX(50%); } }
代码中我们在标题后面加上一个伪元素,然后将其定位到标题下方,再通过transform属性让其跳转到指定位置。最后使用animation属性来让线条滑动。
下面是完整的代码示例:
<style> h1 { position: relative; text-align: center; font-size: 40px; margin-top: 50px; color: #333; } h1::after { content: ""; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 50px; height: 2px; background-color: #555; animation: line 2s ease-in-out infinite; } @keyframes line { from { transform: translateX(-50%); } to { transform: translateX(50%); } } </style> <h1>This is a demo</h1>