笔记 08 CSS 8种让人眼前一亮的hover效果 加载效果
参考原文
MDN mix-blend-mode
MDN cubic-bezier
加载效果
css hover 触发 transition 宽度变化 cubic-bezier定时函数(立方贝塞尔曲线 cubic Bézier curve)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>加载效果</title>
</head>
<style>
#loading-btn {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
button {
background: transparent;
border: 0;
border-radius: 0;
text-transform: uppercase;
font-weight: bold;
font-size: 20px;
padding: 15px 50px;
position: relative;
}
button:before {
/* 冒出后,在回归100% */
transition: all 0.8s cubic-bezier(0.7, -0.5, 0.2, 2);
/* 到100%就停下 */
/* transition: all 0.8s ease; */
content: '';
width: 1%;
height: 100%;
background: #ff5964;
position: absolute;
top: 0;
left: 0;
}
button span {
/* mix-blend-mode CSS 属性描述了
元素的内容应该与
元素的直系父元素的内容和元素的背景如何混合 */
/* 如果不采用文字会被覆盖住 */
mix-blend-mode: darken;
}
button:hover:before {
background: #ff5964;
width: 100%;
}
</style>
<body>
<div id="loading-btn">
<button><span>Hover me</span></button>
</div>
</body>
</html>