我来为您讲解一下使用CSS实现“加号”效果的攻略。
一、通过动态伪类实现
HTML结构:
<div class="box">
<div class="plus"></div>
</div>
CSS样式:
.box {
width: 50px;
height: 50px;
background-color: #f2f2f2;
position: relative;
}
.plus {
width: 15px;
height: 2px;
background-color: #333;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
}
.plus::before,
.plus::after {
content: "";
position: absolute;
width: 2px;
height: 15px;
background-color: #333;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
}
.plus::before {
transform: translate(-50%, -50%) rotate(-90deg);
}
.plus:hover::before,
.plus:hover::after {
height: 25px;
}
代码实现思路:
通过在伪类 ::before
和 ::after
上设置相应的样式,来实现鼠标悬浮时 +
变成 ×
的效果。
二、通过CSS3动画实现
HTML结构同上。
CSS样式:
.box {
width: 50px;
height: 50px;
background-color: #f2f2f2;
position: relative;
}
.plus {
width: 15px;
height: 2px;
background-color: #333;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
transition: all .2s ease-in-out;
}
.plus:hover {
transform: translate(-50%, -50%) rotate(45deg);
}
.plus::before,
.plus::after {
content: "";
position: absolute;
width: 2px;
height: 15px;
background-color: #333;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(0);
cursor: pointer;
transition: all .2s ease-in-out;
}
.plus:hover::before {
transform: translate(-50%, -50%) rotate(-45deg);
}
.plus:hover::after {
transform: translate(-50%, -50%) rotate(45deg);
}
代码实现思路:
通过设置 transform: translate(-50%, -50%) rotate(45deg)
,使 +
变成斜着的 ×
;通过设置 transform: translate(-50%, -50%) rotate(-45deg);
和 transform: translate(-50%, -50%) rotate(45deg);
,使 ×
旋转变成 +
,从而实现加号、减号效果的切换。
以上就是通过CSS实现“加号”效果的完整攻略,希望能对您有所帮助。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:css实现“加号”效果的实例代码 - Python技术站