前言：
此时看官们对“下划线css”可能比较注意，小伙伴们都想要剖析一些“下划线css”的相关知识。那么小编同时在网摘上搜集了一些关于“下划线css””的相关资讯，希望我们能喜欢，大家一起来学习一下吧！文字渐变
.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%;}未完待续....
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
