一、基础CSS样式
首先我们来看一下如何基于基础的CSS样式实现加号样式。
/*HTML*/
<div class="plus">加号</div>
/*CSS*/
.plus {
border: 1px solid #ddd;
display: inline-block;
padding: 5px;
}
.plus::before {
content: "+";
margin-right: 5px;
}
这段代码中，我们使用了伪元素::before，给加号添加了一个before伪元素，并设置了content属性，将加号添加到before伪元素中。我们使用margin-right属性，为content和加号之间添加了5px的距离。
二、CSS动画
如果我们想要让加号在hover时出现动态特效，可以使用CSS动画来实现。
/*HTML*/
<div class="plus2">加号</div>
/*CSS*/
.plus2 {
border: 1px solid #ddd;
display: inline-block;
padding: 5px;
}
.plus2::before {
content: "+";
margin-right: 5px;
transition: all 0.2s ease-in-out;
}
.plus2:hover::before {
transform: rotate(45deg) scale(1.5);
}
这段代码中，我们给before伪元素添加了transition属性，实现了在hover时平滑过渡的效果。我们使用:hover伪类，控制加号的旋转和伸缩效果，并使用transform属性，实现了这些效果。
三、利用多个元素实现更复杂的加号
我们也可以使用多个元素来实现更复杂的加号样式，下面看一个例子。
/*HTML*/
<div class="plus3">
<div class="plus3__left"></div>
<div class="plus3__right"></div>
<div class="plus3__top"></div>
<div class="plus3__bottom"></div>
</div>
/*CSS*/
.plus3 {
border: 1px solid #ddd;
display: inline-block;
padding: 5px;
position: relative;
}
.plus3__left,
.plus3__right,
.plus3__top,
.plus3__bottom {
background-color: #000;
height: 1px;
position: absolute;
width: 40%;
}
.plus3__left {
left: 0;
top: 50%;
transform: translateY(-50%);
}
.plus3__right {
right: 0;
top: 50%;
transform: translateY(-50%);
}
.plus3__top {
left: 50%;
top: 0;
transform: translateX(-50%);
}
.plus3__bottom {
left: 50%;
bottom: 0;
transform: translateX(-50%);
}
这段代码中，我们使用了四个div元素，分别代表加号的上下左右四个部分。我们将四个元素定位为绝对定位，并使用transform属性，使它们水平和垂直居中对齐。
四、实现动态的加号
最后，我们来看一个实现动态加号的例子。
/*HTML*/
<div class="plus4"></div>
/*CSS*/
.plus4 {
background-color: #000;
height: 1px;
width: 40%;
position: relative;
}
.plus4::before,
.plus4::after {
background-color: #000;
content: "";
height: 1px;
position: absolute;
width: 40%;
top: 50%;
}
.plus4::before {
left: 0;
transform: translateY(-50%) rotate(45deg);
}
.plus4::after {
right: 0;
transform: translateY(-50%) rotate(-45deg);
}
.plus4:hover::before,
.plus4:hover::after {
width: 60%;
}
这段代码中，我们使用了:hover伪类，控制加号的动态效果。我们使用before和after伪元素，分别代表加号的左上和右下两个部分。我们将before伪元素旋转45度，并将after伪元素旋转-45度，使它们组成加号的样式。我们使用:hover伪类，为before和after伪元素添加了60%的长度，实现了加号伸展的效果。
原创文章，作者：XNCM，如若转载，请注明出处：https://www.506064.com/n/140107.html
微信扫一扫 
支付宝扫一扫 