html鼠标悬停下划线消失,CSS3 2个实用的鼠标悬停文本下划线动画效果
CSS
语言:
CSSSCSS
确定
@import 'https://fonts.googleapis.com/css?family=Lora:400,700';
* {
box-sizing: border-box;
}
html,
body {
font-family: 'Lora', serif;
width: 100%;
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
body {
border: 8px solid #00B388;
margin: 0;
}
a {
cursor: pointer;
}
strong {
margin-top: 16px;
display: block;
font-weight: 700;
}
p {
padding: 24px;
max-width: 760px;
font-size: 22px;
font-weight: 300;
line-height: 1.9;
}
.link-1 {
position: relative;
text-decoration: none;
display: inline-block;
color: black;
padding: 0 1px;
-webkit-transition: color ease 0.3s;
transition: color ease 0.3s;
}
.link-1::after {
content: '';
position: absolute;
z-index: -1;
width: 100%;
height: 5%;
left: 0;
bottom: 0;
background-color: #00B388;
-webkit-transition: all ease 0.3s;
transition: all ease 0.3s;
}
.link-1:hover {
color: white;
}
.link-1:hover::after {
height: 100%;
}
.link-2 {
position: relative;
text-decoration: none;
display: inline-block;
color: black;
padding: 0 1px;
-webkit-transition: color ease 0.3s;
transition: color ease 0.3s;
}
.link-2::before,
.link-2::after {
content: '';
position: absolute;
background-color: #00B388;
z-index: -1;
height: 5%;
}
.link-2::before {
width: 0%;
left: 0;
bottom: 0;
-webkit-transition: width ease 0.4s;
transition: width ease 0.4s;
}
.link-2::after {
width: 100%;
left: 0;
bottom: 0;
-webkit-transition: all ease 0.6s;
transition: all ease 0.6s;
}
.link-2:hover::before {
width: 100%;
}
.link-2:hover::after {
left: 100%;
width: 0%;
-webkit-transition: all ease 0.2s;
transition: all ease 0.2s;
}
html鼠标悬停下划线消失,CSS3 2个实用的鼠标悬停文本下划线动画效果相关推荐
- 【web前端特效源码】使用HTML5+CSS3制作一个会动的音频loading加载动画效果~~适合初学者~超简单~ |前端开发|IT编程
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会动的音频loading加载动画效果~~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <!DOCTY ...
- 使用CSS3实现超炫的Loading(加载)动画效果
SpinKit 是一套网页动画效果,包含8种基于 CSS3 实现的很炫的加载动画.借助 CSS3 Animation 的强大功能来创建平滑,易于定制的动画.SpinKit 的目标不是提供一个每个浏览器 ...
- HTML5+CSS3小实例:简单又好看的加载动画效果
HTML5+CSS3做一个简单又好看的加载动画效果,一个三色圆环转动,再加圆环内部文字转动,效果虽然简单,但第一次看到还是很惊艳的,最主要一点,代码真的超简单的. 效果: 源码: <!DOCTY ...
- 鼠标经过下划线 css3,详解css3和伪元素实现鼠标移入时下划线向两边展开
本文主要介绍了利用css3+伪元素实现鼠标移入时下划线向两边展开效果的相关资料,文中先进行了详细的介绍,方便大家理解,而后给出了完整的实例代码让大家可以参考学习,需要的朋友们下面来一起学习学习吧.希望 ...
- css 右上角 翻开动画_27个精致的CSS3动画效果源代码下载
CSS主要用于控制网页的外观,CSS代码可以随意变化网页的布局和网页的内容样式.当CSS3出现以后,更是可以让网页增添了不少动画元素,随着IE6,7的淘汰,手机端的崛起更是让它成熟了许多.CSS3动画 ...
- html5 css动画效果代码,超酷震撼 8个HTML5/CSS3动画应用及源码
原标题:超酷震撼 8个HTML5/CSS3动画应用及源码 HTML5可以制作非常华丽的动画效果,这点通过之前的分享学习我们已经有深刻的了解了,今天我们主要来分享一些HTML5结合CSS3形成的超炫震撼 ...
- html css动画自动旋转,使用CSS3 backface-visibility属性制作翻转动画效果
使用CSS3 backface-visibility属性我们可以制作出许多有趣的动画效果.当你翻转一个元素的时候,你看到的是什么?通常情况下,我们应该看到的是元素的背面,这是正常的情况,但是有时候我们 ...
- CSS3中的动画效果记录
今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...
- 京东css3动画全屏海报_CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
最近在做项目时,发现CSS3中关于动画的技术,自己很少运用在项目中,平时一些列表块的收缩和展开动画效果,几乎都是使用 display 的 none 和 block,或者 visibility 的 hi ...
- CSS3超酷网页Loading加载进度条动画效果
在jQuery之家上发现的一款css3效果. CSS3 animation超酷网页Loading加载进度条动画效果 >>查看演示 > ...
最新文章
- Python 将数据框类型转为字典类型
- java 多线程池_Java项目中,线程池中线程数量太大会有什么影响?
- 【学习笔记】浅谈广义矩阵乘法——动态DP
- 对称二叉树(信息学奥赛一本通-T1368)
- 两个pv挂一个vg_两个pv挂一个vg_VG解散LOL分部,LPL官网提前改名,下赛季被“RA”收购...
- 十六位顶尖专家齐聚,解密阿里云最新核心技术竞争力!
- 【重点!DP】LeetCode 97. Interleaving String
- JSP — 知识总结篇《I》【基础语法】
- Wireshark实战分析之TCP协议(三)
- KM算法实现带权匹配C#版本和C++两个版本实现O^3
- FPGA之乒乓Buffer
- 第四周项目3--单链表应用之递增判断
- 解决U盘文件变成快捷方式的最佳方法
- 一个用户只能登录一次
- mysql安装流程以及各类问题解决
- c#程序设计 习题7.3
- maven项目中,使用pom文件引入自定义jar包
- GNURadio 3.9 使用 OOT 自定义模块问题记录
- 解决Outlook不能打开的问题
- 【题单——基础字符串】菜鸡L_C_A的基础字符串(KMPACAM)