效果如图:
代码展示:
<style>
* {
margin: 0;
padding: 0;
}
.box {
position: relative;
width: 800px;
height: 800px;
background-color: #999999;
}
.text {
position: absolute;
top: 50%;
left: 50%;
height: 25px;
width: 200px;
border: 1px solid #333333;
/*
相对于自身宽或者高的移动,距离为:宽/2、高/2,
可以让盒子进行水平垂直居中,
不用设置margin-left或者margin-right.
*/
transform: translate(-50%, -50%);
}
.text::after {
content: "";
position: absolute;
top: 8px;
right: 11px;
width: 8px;
height: 8px;
cursor: pointer;
/* 三角设计 */
border-bottom: 1px solid #030303;
border-right: 1px solid #030303;
/* 让三角进行旋转45度,下拉模式 */
transform: rotate(45deg);
/* 过渡效果 */
transition: all .3s ease;
/* 设置旋转中心 */
transform-origin: center;
}
.text:hover::after {
/* 鼠标放在三角时旋转,进而呈现上拉模式 */
transform: rotate(225deg);
}
</style>
</head>
<body>
<div class="box">
<div class="text"></div>
</div>
</body>
如有不懂得或者想要和小编进行探讨相关问题的大佬,可以在下面讨论哈~