CSS3实现文字抹开特效
CSS:
.column-title {
color: #9b9b9b;
text-shadow: 1px 1px #d4d4d4;
}
.column-title:hover {
color: #5a5a5a;
text-shadow: none;
}
@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
.column-title-hover:hover {
padding: .5em 0;
border-top: solid 1px #868686;
border-bottom: solid 1px #868686;
border-radius: 2px;
background-image: -webkit-linear-gradient(left, #f0f0f0, #363636 100%);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-background-size: 200% 100%;
-webkit-animation: column-title-hover-animation 3s infinite linear;
}
@-webkit-keyframes column-title-hover-animation {
0% {
background-position: 0 0;
}
100% {
background-position: -100% 0;
}
}
}
HTML:
<h2 class="column-title"><font class="column-title-hover">阡陌千灯 万叶飞花</font></h2>
最新文章
- GMOLO平板——如何安装新系统
- Datagridview中数字格式列 不显示小数点前面的0
- 8.20 usaco
- 【转】android自动化测试之MonkeyRunner使用实例(三)
- Oracle执行计划——all_rows和first_rows(n) 优化器模式
- ActiveMQ的Destination高级特性
- jmeter之正则表达式
- mac 下 使用 java运行 class 文件 总是提示 “错误: 找不到或无法加载主类”的解决方法
- Visual Studio Plus 开发
- Java网络编程和NIO详解8:浅析mmap和Direct Buffer
- Noip前的大抱佛脚----图论
- 《Linux兵书》
- java7(1)——反编译深入理解增强的switch(读字节命令实战)
- 关于BigDecimal类型在jsp页面中进行除法运算问题
- Mysql Sql Explain
- .Net 项目代码风格规范
- 【面试虐菜】—— 常用SQL语句
- C++类的复习
- redis win系统安装并设置开机自启
- 【Todo】C++类 &; 通用面试题分析记录 &; 最难的bug