Recientemente vi una animación muy interesante en una página. Cuando se mueve el mouse hacia adentro, aparecerá una animación subrayada debajo del texto correspondiente. Cuando se quita el mouse, la animación subrayada desaparecerá, así que pensé en cómo implementar esta animación. Efecto.
La primera idea era hacerlo hasta el final, pero habría un problema, es decir, el texto no es fijo y el largo y el alto pueden cambiar, esto no era posible, así que pensé en usar el control de tamaño de fondo.
Los efectos específicos son los siguientes:
El código se muestra a continuación:
<!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>