@font-face { font-family:'WebSymbols'; src: url('../font/WebSymbols-Regular.otf'); } .icon{ font-family: "WebSymbols"; }
字体库WebSymbols-Regular的地址:https://pan.baidu.com/s/1WgRdbBXrAbZpHURD9yQ1EA;码:mvq9
/*1. font-face 字体库的引用 2. z-index 层级 只能配合position使用 3. text-shadow/box-shadow 文本/盒子阴影(水平 垂直 放大 颜色)
text-shadow: 3px 3px 5px #777; 动画 4. animation 5. transition 过渡属性 6. transform 形状/元素的变化 */ li{ position: relative; } ul li:hover{ transform: scale(1.1); border-color: #000; box-shadow: 3px 3px 20px red; z-index: 999; } ul li:hover .icon{ /*font-size: 60px;*/ /*transform: translateY(0);*/ color: #000; animation: move 0.3s ease; } ul li:hover .main{ color: #000; animation: move 0.3s ease; } @keyframes move{ 0%{ /*font-size: 40px;*/ transform: translateY(100%) scale(0.5); } 100%{ /*font-size: 60px;*/ transform: translateY(0px) scale(1); color: #000; } }