CSS3 是当前前端开发必备的技能之一,提供了丰富的样式效果和动画特效,本文将介绍如何使用 CSS3 制作打钩和打叉的效果。
首先,我们需要使用如下 CSS 代码来定义钩子和叉子的样式:
.check { width: 75px; height: 75px; border-radius: 50%; border: 3px solid #4CAF50; position: relative; } .check::before { content: ""; position: absolute; left: 10px; top: 20px; width: 25px; height: 50px; border-right: 4px solid #4CAF50; transform: rotate(45deg); } .check::after { content: ""; position: absolute; right: 10px; top: 20px; width: 25px; height: 25px; border-left: 4px solid #4CAF50; transform: rotate(-45deg); } .cross { width: 75px; height: 75px; border-radius: 50%; border: 3px solid #f44336; position: relative; } .cross::before { content: ""; position: absolute; left: 10px; top: 10px; width: 55px; height: 55px; border-top: 4px solid #f44336; border-right: 4px solid #f44336; transform: rotate(-45deg); } .cross::after { content: ""; position: absolute; right: 10px; top: 10px; width: 55px; height: 55px; border-top: 4px solid #f44336; border-left: 4px solid #f44336; transform: rotate(45deg); }
上述代码定义了两个类别 check 和 cross,分别表示打钩和打叉的样式。在类别中,先定义一个圆形区域,并将其与对应的颜色和边框样式设置好。然后使用伪元素 ::before 和 ::after 来创建钩子和叉子的形状,再通过 position 和 transform 属性来控制其位置和旋转角度。
接下来,我们在 HTML 中使用对应的类名来应用样式效果:
<div class="check"></div> <div class="cross"></div>
总结来说,使用 CSS3 制作打钩和打叉的效果并不复杂,只需要定义好样式,然后与 HTML 进行组合应用即可。