效果如下:
这个很简单,直接上代码,如果对字体图标不熟悉的同学可以看这篇文章:
(45条消息) CSS之如何从icomoon引入及使用字体图标_qwerty053的博客-CSDN博客
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> @font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?w0aq5k'); src: url('fonts/icomoon.eot?w0aq5k#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?w0aq5k') format('truetype'), url('fonts/icomoon.woff?w0aq5k') format('woff'), url('fonts/icomoon.svg?w0aq5k#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; } #one { width: 300px; height: 30px; border-radius: 25px; border: 2px solid pink; margin: 40px auto; } #one::before { content: ""; width: 0; height: 30px; border-radius: 25px; background-color: rgb(151, 183, 241); display: block; transition: width 1.5s ease; } #one:hover::before { width: 250px; } #two{ margin: 0 auto; width: 100px; height: 100px; background-color: coral; border-radius: 15px; display: flex; overflow: hidden; } #two div{ font-family: 'icomoon'; font-size:45px; line-height: 100px; margin-left: 23px; letter-spacing: 30px; transition: margin-left 0.3s ease-in,background-color 0.3s ease-in; } #two:hover div{ background-color: gainsboro; margin-left:-59px; } </style> </head> <body> <div id="one"></div> <div id="two"> <div></div> </div> </body> </html>