博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
3D文本悬停改变效果
阅读量:6835 次
发布时间:2019-06-26

本文共 945 字,大约阅读时间需要 3 分钟。

html

W3CBEST.COM

css

.hover-text-3d {    font-size: 7em;}.hover-text-3d {    position: absolute;    top: 50%;    left: 50%;    -webkit-transform: translate(-50%, -50%);    -ms-transform: translate(-50%, -50%);    -o-transform: translate(-50%, -50%);    transform: translate(-50%, -50%);    -webkit-text-fill-color: #fff;    text-fill-color: #fff;}.hover-text-3d:before {    position: absolute;    overflow: hidden;    width: 0;    content: attr(data-text);    -webkit-transition: 2s;    -o-transition: 2s;    transition: 2s;    -webkit-text-fill-color: #aaf0d1;    text-fill-color: #aaf0d1;    -webkit-text-stroke-width: 2px;    text-stroke-width: 2px;    -webkit-text-stroke-color: #aaf0d1;    text-stroke-color: #aaf0d1;    -webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, .8));    -o-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, .8));    filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, .8));}.hover-text-3d:hover:before {    width: 100%;}

转载地址:http://qdxkl.baihongyu.com/

你可能感兴趣的文章
字体阴影、粗细
查看>>
10分钟还原HTTPS真像!
查看>>
单例模式的笔记
查看>>
Linux压力测试工具
查看>>
自由职业一时爽,一直自由一直爽
查看>>
浏览器事件window.onload、o…
查看>>
对象回收时Weak指针自动被置为nil的实现原理
查看>>
php URLEncode() / php URLEncode函数 php urldecode...
查看>>
phpunit mock
查看>>
NodeJS、NPM安装配置步骤(windows版本)
查看>>
mac常用的命令
查看>>
knn 分类
查看>>
【总结】Hadoop中的MultipleOutputs实践
查看>>
测试常见问题
查看>>
SHOP++ 中Hibernate 注解 用法
查看>>
jQuery EasyUI使用教程之创建基本的树网格
查看>>
Fluentd日志处理-插件使用和调试问题(四)
查看>>
实验四 交换机SPAN功能配置 (交换与路由技术)
查看>>
centos7源码安装php5.6并安装pthreads扩展
查看>>
php网络名片系统源码免费电子云名片3.2版
查看>>