文字下划线效果(标题hover效果)
来源:互联网 发布:剑灵烛魔武器属性优化 编辑:程序博客网 时间:2024/04/27 13:46
文字下划线效果(标题hover效果)
<!-- html结构 --><div><a href="javascript:void(0);" class="demo1">自己实现的hover效果</a></div>
/* css样式 */ .demo1{ position: relative; text-decoration: none; font-size: 20px; color: #333; } .demo1:before{ content: ""; position: absolute; left: 50%; bottom: -2px; width: 0; height: 2px; background: #4285f4; transition: all .3s; } .demo1:hover:before{ width: 100%; left: 0; right: 0; }
关键在于没有hover的时候定义width为0,这样可以实现宽度从0到100%的变化。
left为50%,目的是为了动画开始的位置是在50%的位置。
方法二:
<!-- html结构 --><div> <a href="javascript:void(0);" class="demo2">Hexo next主题的实现</a></div>
/* css样式 */ .demo2{ position: relative; text-decoration: none; font-size: 20px; color: #333; } .demo2:before{ content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 100%; background: #4285f4; transform: scale(0); transition: all 0.3s; } .demo2:hover:before{ transform: scale(1); }
这个实现的关键就是scale(0)到scale(1)的变化。
CSS3的scale transform的原点是中点,所以会从中间的位置开始动画。
两者区别
通过动画也看出来,next的动画有透明渐变的效果,和scale的表现形式有关。
第一个实现只是width变化,但是也可以用animation实现和next一样的效果。
0 0
- 文字下划线效果(标题hover效果)
- Android 标题下划线 选中效果
- hover效果
- 16-使文字具有下划线效果(文字及列表样式)
- 炫酷CSS3鼠标hover图片缩放和标题效果
- css3 实现图片遮罩效果,hover出现文字
- jquery鼠标hover事件文字内容滑动遮罩效果
- jQuery标题文字淡入淡出显示效果
- 标题文字跑马灯效果实现
- 使用layer-list实现文字下划线、边框线效果
- xml布局中实现文字下划线的效果
- 文字加下划线单选按钮效果,RadioGroup实现
- CSS3 按钮悬停(Hover)效果全集
- js做hover效果
- jquery hover效果处理
- 按钮hover active效果
- 跨行tr hover效果
- 去除网页下划线效果
- 一头扎进设计模式-适配器模式
- ARM下位置无关码和位置相关码介绍
- Java: HttpURLConnection 上传文件_20160912_七侠镇莫尛貝
- version_count high|library cache lock
- 安卓之使用DexClassLoader&AssetManager启动插件的Activity实现功能插件化
- 文字下划线效果(标题hover效果)
- 接口、抽象类(纯虚类)、重载、重写
- Runtime那些事儿(消息机制)
- linux 修改 dns 配置
- Spring Data JPA 直接调用存储过程的方法
- TYVJ 2018 小猫爬山
- Android Studio打包apk,aar,jar包
- 一个基于多用户的抓取视频下载系统 PhaGrabVideo
- cuda coalesced access to global memory