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从中间向两边动画,css动画效果：鼠标移上去底部线条从中间往两边延伸 - 子成君-分享出去，快乐加倍！-旧版已停更...相关推荐

css鼠标移入线条延中心伸长,css动画效果：鼠标移上去底部线条从中间往两边延伸 - 子成君-分享出去，快乐加倍！-旧版已停更...
本站已不再更新,最新资源请前往zcjun.com获取! css: .top-nav a:after { content: ' '; position: absolute; z-index: 2; bo ...
css动画效果：鼠标移上去底部线条从中间往四周动画延伸
css动画效果:鼠标移上去底部线条从中间往四周动画延伸如图: .top-nav a:after {content: ' ';position: absolute;z-index: 2;bottom: ...
html 纯css设置转圈,CSS3 转圈彩色文字动画实例及animation-play-state属性规则
网页中的动画通常是当鼠标移到上面,动画立即停止,便于用户阅读:CSS3新增的制作动画属性也考虑到这个问题,只要作了相应的设置,鼠标移到上面,动画也会停止,移开鼠标,动画继续运动:这主要通过animat ...
php鼠标移过图片放大代码,鼠标移上去，图片会自动原地放大CSS写法
今天在制作一个zblog模板的时候,用上了这个图片放大特效,想到以前也没写过,就分享出来吧! 在我第一次接触这个特效的时候,以为会很复杂,至少会有几行代码才能去实现,但学习后真的精到了! CSS3的t ...
html怎么让方块自动旋转,如何使用纯CSS实现一个圆环旋转错觉的动画效果（附源码）...
本篇文章给大家带来的内容是关于如何使用纯CSS实现一个圆环旋转错觉的动画效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览源代码下载 https://github.com ...
纯CSS实现帅气的SVG路径描边动画效果
一.应该人人皆会的基础技术简而言之,就是让SVG的描边像是有人绘制一样的动画效果. 国外很多相关介绍的文章,来看看一些效果gif吧~ 纯CSS实现帅气的SVG路径描边动画效果纯CSS实现帅气的SV ...
3 css 奖品出现弹出动画_10 个 GitHub 上超火的 CSS 奇技淫巧项目，找到写 CSS 的灵感！...
如果 CSS 是女孩子,肯定如下图那样吧 ~ 简介一般人没事的时候刷刷朋友圈.微博.电视剧.知乎,而有些人是没事的时候刷刷 GitHub ,看看最近有哪些流行的项目. 久而久之,这差距就越来越大,因 ...
使用css动画实现loding效果
代码如下: <!doctype html> <html><head><meta charset="ulf-8"><title& ...
3D风车动画CSS HTML代码
下载地址 3D风车动画CSS HTML代码,风车样式是用css和div构造的. dd:
css实现人走路效果,如何使用纯CSS实现一个人独自行走的动画效果（附源码）
本篇文章给大家带来的内容是关于如何使用纯CSS实现一个人独自行走的动画效果(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览源代码下载 https://github ...

css从中间向两边动画,css动画效果：鼠标移上去底部线条从中间往两边延伸 - 子成君-分享出去，快乐加倍！-旧版已停更...

css从中间向两边动画,css动画效果：鼠标移上去底部线条从中间往两边延伸 - 子成君-分享出去，快乐加倍！-旧版已停更...相关推荐

最新文章

热门文章