css鼠标移入线条延中心伸长,css动画效果:鼠标移上去底部线条从中间往两边延伸 - 子成君-分享出去,快乐加倍!-旧版已停更...
本站已不再更新,最新资源请前往zcjun.com获取!
css:
.top-nav a:after {
content: ' ';
position: absolute;
z-index: 2;
bottom: 0;
left: 50%;
display: block;
width: 165px;
height: 1px;
transform: translate(-50%);
}
.top-nav a:hover:after {
height: 2px;
animation: ad_width .5s linear forwards;
background: #ff8a00;
}
@keyframes ad_width {
from {
width: 0
}
to {
width: 165px
}
}
其实这个还可以定位一个div当border使用,然后靠scale缩放也是一样的效果,看自己喜欢了。
本文标签:这篇文章木有标签 版权声明:若无特殊注明,本文皆为《 子成君 》原创,转载请保留文章出处。 本文链接:css动画效果:鼠标移上去底部线条从中间往两边延伸 https://old.zcjun.com/learn/516.html 百度收录:本文已被百度收录点击查看详情!
本文到此结束
css鼠标移入线条延中心伸长,css动画效果:鼠标移上去底部线条从中间往两边延伸 - 子成君-分享出去,快乐加倍!-旧版已停更...相关推荐
- css鼠标移入线条延中心伸长,jquery鼠标悬浮,显示动态延伸线条,如何在鼠标移开后依然让线条元素延伸到终点...
1.一个标题,鼠标悬浮时从图片中心伸出一个类似箭头指示的线条, 使用jquery hover添加类的方法给这个标题添加动画,动画是用css keyframes做的, 困惑的是有时候线条动画还没到终点鼠 ...
- css动画效果:鼠标移上去底部线条从中间往四周动画延伸
css动画效果:鼠标移上去底部线条从中间往四周动画延伸 如图: .top-nav a:after {content: ' ';position: absolute;z-index: 2;bottom: ...
- html5鱼游动动画,CSS和D3制作小鱼游动的交互动画效果
CSS和D3制作小鱼游动的交互动画效果 发布时间:2020-05-13 13:54:35 来源:亿速云 阅读:118 作者:Leah 本篇文章主要探讨如何用CSS和D3制作小鱼游动的交互动画效果.有一 ...
- html5 鼠标滑动页面动画效果,鼠标滑动到当前页面触发动画效果
近年来,关于鼠标滑动到当前页面从而触发动画效果十分的火热,今天我们就来学习下这一效果. 一.首先,我们先来了解一下这一效果实现的原理 1.一个网页离不开基本的布局,所以首先就是要先用html将所需要的 ...
- 通过JS和CSS,实现网页加载中的动画效果
需要材料: 一张loading动画的gif图片 基本逻辑: 模态框遮罩 + loading.gif动图, 默认隐藏模态框 页面开始发送Ajax请求数据时,显示模态框 请求完成,隐藏模态框 下面我们通过 ...
- css 平移到某个位置_Html基本的动画效果(平移,旋转)
在HTML中我们可以自己制作一些有趣的动态动画放入页面,也可以给用户体验增加一点趣味,所以合理的利用css动画效果. 动画 ...
- html鼠标移入显示下拉框,小白求助!鼠标移入移出显示下拉菜单问题!
是不是导航栏中的每个菜单移入移出都得分开不同的函数,都要重新命名不同的变量吗?不然怎么避免我鼠标移入这个菜单,别的菜单的下拉不会显示的问题? 这是我写的一个代码: 二级菜单下拉 *{ margin:0 ...
- 盘点,这些年你知道的鼠标移入显示小手图标的css的cursor 属性,你还记得吗?
在 style 中使用:一
- CSS transform属性的简单应用——双开门动画效果
1.效果演示 CSS transform属性有许多效果,平移.旋转.缩放等. 这里简单应用平移效果,实现双开门动画,以下为效果图. 2.设计思路 设置一张居中的需要隐藏的底图. 设置封面图,平分成左右 ...
最新文章
- 分区视图(转自小春BOOK)
- window.btoa
- “铜死亡”顶级研究文献解读
- 腾讯iOA零信任安全——IT变革下的新一代企业网
- 由于不当的执行顺序导致的死锁
- 30岁,真的是程序员迈不过去的坎吗?
- 【2016年第5期】基于深度学习的光学遥感机场与飞行器目标识别技术
- c语言 指正判断字符串大小
- Win10/Win7下添加Protel 99 SE库文件
- 机器学习视频推荐-绝对的通俗易懂(线性回归,逻辑回归,朴素贝叶斯分类器,K-近邻,SVM,决策树,随机森林,XGboost,k-means聚类)
- Android HTTPS 抓包
- ios睡眠分析 卧床 睡眠_iPhone睡眠模式:教你设置追踪睡眠排程与提升睡眠品质...
- mysql全文索引详解_MySql全文索引详解
- springboot springsecurity报错 **.LoginUser cannot be cast to **.LoginUser
- a4纸在html的像素,打印常识:A4纸张在显示器上应该要多少像素?
- 通过Python自动化玩腾讯微证券领长牛
- 13.tornado操作之增加用户喜欢的图片展示页+同时展示用户上传的所有图片增加展示图片有多少用户喜欢的功能
- oracle匹配靓号的正则表达式_正则表达式(靓号过滤)
- 神经网络基础05-注意力机制
- commvault xtrabackup全实例备份失败 处于未决状态
热门文章
- hibernate性能_改善Hibernate应用程序性能的7种方法
- 成为Java流大师–第1部分:创建流
- jdk 1.8 jdk8_JDK 8功能的可疑方面
- java中runnable_Java:在Runnable中处理RuntimeException
- java jvm调优_(第2部分,共3部分):有关性能调优,Java中的JVM,GC,Mechanical Sympathy等的文章和视频的摘要...
- JDK 12 Early Access Build 12中的原始字符串文字支持
- java堆内存和堆外内存_Java堆空间,本机堆和内存问题
- 在ECR上推送Spring Boot Docker映像
- 如何:使用Json插入数据库并从中读取
- key 和secret_Java Secret:加载和卸载静态字段