让我们先来看看实现的效果
html代码
<!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>
<link rel="stylesheet" href="iconfont.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul>
<li><span class="iconfont icon-shoucang"></span></li>
<li><span class="iconfont icon-xihuan"></span></li>
<li><span class="iconfont icon-zan"></span></li>
</ul>
</body>
</html>
iconfont.css代码
@font-face {
font-family: "iconfont";
src: url('iconfont.eot?t=1616639737360');
src: url('iconfont.eot?t=1616639737360#iefix') format('embedded-opentype'),
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAARUAAsAAAAACIQAAAQGAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDFAqETIQLATYCJAMQCwoABCAFhG0HQRtuB8gOJaHAwABgYMlmPHy/3//WPmdf+aZJkkl686t3USCRSGIpQCV0ptOIrxSmWwn3/383vcEOTeqSmvkkhYll9AU8nBAmSueqyET1qxeH06b4fMtymWN51AXUxQEFNPYCmUAFgl212008MOPXtJjApA1JsKuaJgqkEmkViLdqJQ3SlkLOpIdeaEcGJsQ3EOvLZME1AF/17+M/ZIQUFE0F0vHmTXU7lP3RvzMKLZ0WfSQCmOfpEAyj4hBI4vWo4RWhDRwSmsxqixwDrRTKWbbOAY1iGbmofSm/4J8XLRDBNGJHwcofPScT/GHJFP4YFSqis3mPDj8BIkG0ph8vVHUUIPYLIH2Hb10RI5MtmeJPUeuWxbdRiw7HyhcuXLLAm5q3wK+3bMFCP4V84VSfNnq+xZvqOX/+xoW+MrZUftLhsJfYKSs1b4qvXeZ3OGa12YoR5t0xFfqPbcRmtTa1D3uZG3a7Az+r2tbmYDeeDOq98kxOlSxoqQNbcwafcgysVgrvqZxKEDYb2WOZNct5ypbAXku3EoTDIe9w1J63tVlW+esExPz5lnk4PmUBJuxY6NeqXEgfjPl08UfOaPv/tP+Cai7ieBSz9qjPv41eRz4jU78Br8d8QhUeIj985+VMKMvCSa+jBN54OXFhGRa567I/Lr3isU3q+w9xAp/fXU3v49Q3rHt4ZXkP5waioYJyp4CK1Aa1ww0fkjr1ndrkaqAPQBRs2R05HdatSzTC2TxNWLDvUfKo4IZVVpyNRm40HSbv4txUSt8efifsOt87I1TzdtczOWwb59waJNGERMZlYPLR4/sJ/GHRoa9BgXgZ1D6szAidUpm3+6rnYAy+Y0rPgEaBSofVVOWXlbkXdcdq/WZqQ3rN97Mc9TzqFEt0EvuJL7tiW9vAR4BhXK8IEwGGoe4USgD1RzgdhuC32Tu3v1vR754QAVAwxu+/tg/jhH1JeoXVzH/OXJmTOZsoM1MOZxSmdP31GhRMmsS/zoRFT84QraxOJfRWaig661D1NpGJPYTGlBG0eqcw6UDt8ClLOEKRTsC+8QBh3k4oZv2Cat51ZGIfQ2PVZ2jNhxAmPYXXhFO2Q41XcojmUTs5cCipVrAGhql53KR3Q0qzjuaabI2TIc6kdpPpKWndcC0yIO6MLqZBygyeZ0iGY/VkDSyHdDqWNHKsBin4FBXPGwtSU5mxO6UoWD3gLnEQGg9pRxpoKJKaAsuAkcV5eO/73SBKZjo0biZrRimDcEzU5ZPSpUhbgawVGFZlfcsxJoMoZeDxGCQGh6VHqgEdoqMBFsk4Xk8DUeClUO3wGRVIdfIxawUp94v0X7gEJpGNMgSYEBNhYui/qFizgjYoJUPUKjNtEA7jcgAAAA==') format('woff2'),
url('iconfont.woff?t=1616639737360') format('woff'),
url('iconfont.ttf?t=1616639737360') format('truetype'),
url('iconfont.svg?t=1616639737360#iconfont') format('svg');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-shoucang:before {
content: "\e86d";
}
.icon-xihuan:before {
content: "\e86f";
}
.icon-zan:before {
content: "\e870";
}
style.css代码
:root{
--background-color:#2c3e50;
}
*{
margin:0;
padding: 0;
}
html{
font-size: 14px;
}
body{
width: 100vw;
height: 100vh;
background-color: var(--background-color);
display: flex;
justify-content: center;
align-items: center;
}
ul{
width: 150px;
height: 50px;
display: flex;
justify-content: space-between;
}
li{
position:relative;
list-style: none;
}
.iconfont{
font-size: 2em ;
color: #fff;
}
li::before{
position: absolute;
top: 0;
height: 0;
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 2em ;
border-bottom: 1px solid;
overflow: hidden;
transition: 0.5s ease-in-out;
}
li:nth-child(1)::before{
color: salmon;
content: "\e86d";
}
li:nth-child(2)::before{
color: #fa72e3;
content: "\e86f";
}
li:nth-child(3)::before{
color: #44d664;
content: "\e870";
}
li:hover::before{
height: 60%;
}
今天份知识总结
引入icon库，iconfont.css是从阿里巴巴图标库下载下来的！
| font-style |
字体样式 |
| normal |
正常 |
| italic |
斜体 |
| oblique |
斜体 |
| transition值 |
描述 |
| linear |
规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。(匀速) |
| ease |
规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）（相对于匀速，中间快，两头慢）。 |
| ease-in |
规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）（相对于匀速，开始的时候慢，之后快）。 |
| ease-out |
规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）（相对于匀速，开始时快，结束时候间慢，）。 |
| ease-in-out |
规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）（相对于匀速，（开始和结束都慢）两头慢）。 |
| cubic-bezier(n,n,n,n) |
在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。 |
| 标签 |
作用 |
| list-style |
在一个声明中设置所有的列表属性。 |
| font-size |
设置字体的尺寸 |
| font-family |
规定元素的字体系列 |
| font-style |
指定文本的字体样式 |
| -webkit-font-smoothing |
使页面上的字体抗锯齿,使用后字体看起来会更清晰舒服 |
| -moz-osx-font-smoothing |
用于兼容火狐浏览器中设置字体的抗锯齿或者说光滑度的属性 |
| border-bottom |
指定下边框属性 |
| overflow |
属性规定当内容溢出元素框时发生的事情 |