笔记 05 CSS 8种让人眼前一亮的hover效果 圆角效果
圆角效果
css hover 触发 animation + border-radius
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<style>
#border-btn {
display: flex;
/* align-self属性
设置项目在其包含块中在交叉轴方向上的对齐方式。
Y轴 */
align-items: center;
/* justify-content 定义了浏览器之间,
如何分配顺着弹性容器主轴(或者网格行轴)
的元素之间及其周围的空间。
X轴 */
justify-content: center;
height: 100vh;
}
button {
border: 0;
border-radius: 10px;
background: #2ec4b6;
text-transform: uppercase;
color: white;
font-size: 16px;
font-weight: bold;
padding: 15px 30px;
outline: none;
position: relative;
transition: border-radius 1.5s;
-webkit-transition: border-radius 1.5s;
}
button:hover {
border-bottom-right-radius: 50px;
border-top-left-radius: 50px;
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
}
</style>
<body>
<div id="border-btn">
<button>Hover me</button>
</div>
</body>
</html>