文章中的效果模仿的是 CodePen 网站中的效果: 传送门 。
原理:
给 h1 的前面添加一个 伪元素,设置他的收缩比例为 0,收缩中心在 右下角 (right、 bottom;
在鼠标移上时,设置 收缩中心在 左下角 (left、 bottom ;并设置 伪元素 收缩比较为 1,还原为原来的样子;
这样,鼠标在移上时,伪元素 从左边进入,鼠标移出时,伪元素从 右边移出 。
代码:
<style>
html {
font-size:
文章中的效果模仿的是 CodePen 网站中的效果: 传送门 。
原理:
给 h1 的前面添加一个 伪元素,设置他的收缩比例为 0,收缩中心在 右下角 (right、 bottom;
在鼠标移上时,设置 收缩中心在 左下角 (left、 bottom ;并设置 伪元素 收缩比较为 1,还原为原来的样子;
这样,鼠标在移上时,伪元素 从左边进入,鼠标移出时,伪元素从 右边移出 。
代码:
<style>
html {
font-size: