css3实现3D文本悬停改变效果的示例代码


Posted in HTML / CSS onJanuary 16, 2019

本文介绍了css3实现3D文本悬停改变效果的示例代码,分享给大家,具体如下:

html

<h1 class="hover-text-3d" data-text="w3cbest.com">W3CBEST.COM</h1>

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%;
}

查看效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
纯CSS3实现质感细腻丝滑按钮
Mar 09 HTML / CSS
css3中用animation的steps属性制作帧动画
Apr 25 HTML / CSS
CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)
Jun 03 HTML / CSS
前端隐藏出边界内容的实现方法
Apr 14 HTML / CSS
利用CSS3的线性渐变linear-gradient制作边框的示例
Jun 02 HTML / CSS
CSS3常用的几种颜色渐变模式总结
Nov 18 HTML / CSS
CSS3 transforms应用于背景图像的解决方法
Apr 16 HTML / CSS
HTML5 canvas标签实现刮刮卡效果
Apr 24 HTML / CSS
canvas实现扭蛋机动画效果的示例代码
Oct 17 HTML / CSS
移动端Html5中百度地图的点击事件
Jan 31 HTML / CSS
webView加载html图片遇到的问题解决
Oct 08 HTML / CSS
html5 横向滑动导航栏的方法示例
May 08 HTML / CSS
css3实现元素环绕中心点布局的方法示例
Jan 15 #HTML / CSS
CSS3改变浏览器滚动条样式
Jan 04 #HTML / CSS
浅谈CSS3 动画卡顿解决方案
Jan 02 #HTML / CSS
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
Dec 29 #HTML / CSS
10分钟入门CSS3 Animation
Dec 25 #HTML / CSS
10分钟理解CSS3 Grid布局
Dec 20 #HTML / CSS
10分钟理解CSS3 FlexBox弹性布局
Dec 20 #HTML / CSS
You might like
IE6不能修改NAME问题的解决方法
2010/09/03 Javascript
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
2010/10/18 Javascript
向当前style sheet中插入一个新的style实现方法
2013/04/01 Javascript
jquery的ajax跨域请求原理和示例
2014/05/08 Javascript
在JavaScript中判断整型的N种方法示例介绍
2014/06/18 Javascript
jQuery中get()方法用法实例
2014/12/27 Javascript
jquery中表单 多选框的一种巧妙写法
2015/09/06 Javascript
JavaScript SHA1加密算法实现详细代码
2016/10/06 Javascript
简单理解Vue条件渲染
2016/12/03 Javascript
ThinkJS中如何使用MongoDB的CURD操作
2016/12/13 Javascript
Bootstrap输入框组件使用详解
2017/06/09 Javascript
解决jquery appaend元素中id绑定事件失效的问题
2017/09/12 jQuery
详谈构造函数加括号与不加括号的区别
2017/10/26 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
2018/02/21 Javascript
this在vue和小程序中的使用详解
2019/01/28 Javascript
vue图片上传组件使用详解
2019/12/23 Javascript
vue实现分页的三种效果
2020/06/23 Javascript
解决vux 中popup 组件Mask 遮罩在最上层的问题
2020/11/03 Javascript
python装饰器深入学习
2018/04/06 Python
python 信息同时输出到控制台与文件的实例讲解
2018/05/11 Python
python3之模块psutil系统性能信息使用
2018/05/30 Python
python中的tcp示例详解
2018/12/09 Python
一篇文章弄懂Python中的可迭代对象、迭代器和生成器
2019/08/12 Python
python生成器用法实例详解
2019/11/22 Python
时尚的CSS3进度条效果
2012/02/22 HTML / CSS
纯CSS3实现地球自转实现代码(图文教程附送源码)
2012/12/26 HTML / CSS
五分钟学会HTML5的WebSocket协议
2019/11/22 HTML / CSS
世界上第一个水枕头:Mediflow
2018/12/06 全球购物
Onzie官网:美国时尚瑜伽品牌
2019/08/21 全球购物
这段代码难道不该打印出56吗
2013/02/27 面试题
体育教育毕业生自荐信
2013/11/21 职场文书
京剧自荐信
2014/01/26 职场文书
2014年设计师工作总结
2014/11/25 职场文书
办公室主任个人总结
2015/02/28 职场文书
创业计划书之物流运送
2019/09/17 职场文书
Python使用永中文档转换服务
2022/05/06 Python