css实现A到B再到A动画,css-动画,a标签下,文字加下划线,而且动画是由中间向两边扩展开...

效果:

68d45d2ec49d3fc3145134bd6619e0f1.gif

html:

css:

.warp{

width: 100px;

height:40px;

background-color: bisque;

}

.welcome{

cursor: pointer;

}

.welcome::after{

/*position: relative;

bottom: 0;*/

content: "";/*content用来定义插入内容必须有值至少是空*/

display: block; /*默认情况下伪元素的display的默认值是inline可以通过设置block来改变其显示。*/

transition: all 200ms ease-in-out 0s;/*有过渡的效果*/

cursor: pointer;

border-top: 1px solid red;

margin: 0 auto;/*从中间向两边扩开*/

width: 0;

}

.welcome:hover::after{

width: 100%;

}

//为了看的更清楚,所以css截图版

544a193adb010114f0e3546660800aca.png

css给文字加下划线

语法:linear-gradient(direction, color-stop 1, color-stop 2,……) 简单用法:background-image: linear-gradient( ...

iOS 给UILabel文字加下划线

摘自:http://blog.sina.com.cn/s/blog_6cd380c10101b6hn.html //带下划线的“注” NSMutableAttributedString可变的属性字符串 ...

只用css实现“每列四行,加载完一列后数据自动填充到下一列”的效果

只用css实现“每列四行,加载完一列后数据自动填充到下一列”的效果.这个题目用图表示如下: 如果将题目换成“只用css实现每行四列,加载完一行后数据自动填充到下一行”,那这个问题就简单多了,相信大家都 ...

android UI进阶之实现listview的下拉加载

关于listview的操作五花八门,有下拉刷新,分级显示,分页列表,逐页加载等,以后会陆续和大家分享这些技术,今天讲下下拉加载这个功能的实现. 最初的下拉加载应该是ios上的效果,现在很多应用如新浪微 ...

基于Zepto移动端下拉加载(刷新),上拉加载插件开发

写在前面:本人水平有限,有什么分析不到位的还请各路大神指出,谢谢. 这次要写的东西是类似于的效果,下拉加载上啦加载,这次做的效果是简单的模拟,没有多少内容,下面是今日头条的移动 ...

iscroll5 上拉,下拉 加载数据

我这里的思路是上拉时候只是加载第一页的内容,可根据实际情况修改其中的代码.请勿照搬.样式没怎么调,可以加载gif动画.1.没有数据时候,下拉可以加载数据.2.没有数据时候,点击也可以加载数据.3.其余 ...

MUI - 上拉刷新/下拉加载

新闻信息列表必备的功能,支持Table,Ul等列表. 以下是DIV版本,在安卓端或者ios端必须使用双webview模式,传送门:http://dev.dcloud.net.cn/mui/pulldo ...

ASP.NET仿新浪微博下拉加载更多数据瀑布流效果

闲来无事,琢磨着写点东西.貌似页面下拉加载数据,瀑布流的效果很火,各个网站都能见到各式各样的展示效果,原理大同小异.于是乎,决定自己写一写这个效果,希望能给比我还菜的菜鸟们一点参考价值. 在开始之前, ...

【IE6的疯狂之十一】CSS的优先级及!important在IE6下的BUG

一 css的优先级 今天有人跟我说css hack中用!important来区分ie6,因为ie6不支持!important,是的在很早以前我也是用过这种方法写hack,但是后来就基本不用了.本来我对 ...

随机推荐

.NET Core 单元测试 MSTest

.NET Core 单元测试 MSTest ,MSTest Framework 已经支持 .NET Core RC2 / ASP.NET Core RC2. 之前都是使用 xUnit.net ,现在 ...

MobileOA第一期总结

MobileOA第一期总结 前段时间一直没有更新博客,好想给自己找个借口---恩,我还是多找几个吧.毕业论文.毕业照,再感伤一下,出去玩一下,不知不觉就过去几个月了.然后上个月底才重新回到学习之路,从 ...

3403: [Usaco2009 Open]Cow Line 直线上的牛

3403: [Usaco2009 Open]Cow Line 直线上的牛 Time Limit: 3 Sec  Memory Limit: 128 MBSubmit: 71  Solved: 62[S ...

[原创]CentOS下Mysql双机互为备份

一.环境: 1.安装Centos-6.5-x64位系统的机器两台: host1:192.168.2.3 host2:192.168.2.4  (互相能ping通) 2.安装Mysql. 命令:Yum ...

git-lfs插件

Git本地会保存文件所有版本,对于大文件很容易导致仓库体积迅速膨胀 为了解决这个问题,Github在2015.4宣布推出Git LFS(Large File Storage),详见:Announcin ...

Kotlin入门(26)数据库ManagedSQLiteOpenHelper

共享参数毕竟只能存储简单的键值对数据,如果需要存取更复杂的关系型数据,就要用到数据库SQLite了.尽管SQLite只是手机上的轻量级数据库,但它麻雀虽小.五脏俱全,与Oracle一样存在数据库的创建 ...

tomcat 下配置ajax 跨域 tomcat font face 跨域 java跨域

tomcat  ajax跨域和css字体 font face  跨域一样适用 CORS介绍 它在维基百科上的定义是:跨域资源共享(CORS )是一种网络浏览器的技术规范,它为Web服务器定义了一种方式 ...

python全栈开发 * 进程池,线程理论 ,threading模块 * 180727

一.进程池 (同步 异步 返回值) 缺点: 开启进程慢 几个CPU就能同时运行几个程序 进程的个数不是无线开启的 应用: 100个任务 进程池 如果必须用多个进程 且是高计算型 没有IO型的程序 希望 ...

array_filter()函数

用回调函数过滤数组中的值 array_filter(array,callbackfunction); 返回过滤后的数组

RecycleView 使用自定义CardLayouManager内容无法滚动问题

1.开始一直反应不过来一个问题:RecycleView不是自带滚动效果吗?为啥子条目还不能全部滚动,显示出来呢? 意识到:只有当RecycleView 适配器中条目数量特别多,才可以滚动. 然而自己的 ...

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值