文字渐变
.text-linear-gradient {
background-image: linear-gradient(to bottom, #ffffff, #48daeb);
-webkit-background-clip: text;
color: transparent;
font-size: 18px;
}悬浮动画水平翻转
.inforxTow li:hover i,
.hwgk li:hover i {
-webkit-transition: -webkit-transform 0.7s ease-out;
-moz-transition: -moz-transform 0.7s ease-out;
transition: transform 0.7s ease-out;
transform: rotateY(360deg);
-webkit-transform: rotateY(360deg);
-moz-transform: rotateY(360deg);
}菜单下划线收缩效果
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
:root {
--theme-color: red;
}
a {
display: inline-flex;
height: 32px;
line-height: 32px;
position: relative;
/*border: 2px solid green;*/
}
a:after {
content: "";
position: absolute;
width: 100%;
height: 4px;
bottom: 0;
left: 0;
background-color: var(--theme-color);
visibility: hidden;
transform: scaleX(0);
transition: .4s ease-in-out;
}
a:hover:after {
visibility: visible;
transform: scaleX(1)
}
</style>
</head>
<body>
<a>测试测试</a>
</body>
</html>悬浮背景图片放大
.link-normal {
background-image: url(./01.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
transition: 1.5s;
}
.link-normal:hover {
background-size: 125%;
}未完待续....