最近、あるページで非常に興味深いアニメーションを目にしました。マウスを移動すると、対応するテキストの下に下線のアニメーションが表示され、マウスを離すと下線のアニメーションが消えます。そこで、このアニメーションを実装する方法を考えました。効果。
最初はこれでやろうと思ったのですが、文字が固定されず長さや高さが変わってしまうという問題があり、それは無理だったので背景サイズ制御を使うことを考えました。
具体的な効果は以下の通りです。
コードは以下のように表示されます。
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>3D地图</title>
<style>
body,html{ margin:0;padding:0;}
.box{
width: 250px;
margin: 100px auto;
}
.box span {
font-size: 26px;
background: linear-gradient(to right, red, yellow) no-repeat right bottom;
background-size: 0 3px;
transition: background-size 1s;
}
.box span:hover {
font-size: 26px;
background-position-x: left;
background-size: 100% 3px ;
}
</style>
</head>
<body>
<div class="box">
<span>你好啊哈哈哈哈哈哈你好撒护肤撒护肤哈哈哈哈哈</span>
</body>
</html>