广告：宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买
本篇文章给大家分享8种CSS文字效果的实现方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
今天我们来研究几款文字效果，主要利用text-shadow、webkit内核的几个独有特性实现效果。
在线研究单击这里，下载收藏单击这里。
效果一-立体字效果我们的html文件貌似这样，为了更好的展示效果，我们加上了可编辑属性。
<div contenteditable="true" class="text effect01">前端开发whqet</div>登录后复制
css文件里，我们先看看全局的设置
body{ background-color: #666;}@import url(http://fonts.googleapis.com/css?family=Dosis:500,800);.text { font-family:"微软雅黑", "Dosis", sans-serif; font-size: 80px; text-align: center; font-weight: bold; line-height:200px; text-transform:uppercase; position: relative;}登录后复制然后才是效果一的专属CSS，非常简单，就是用text-shadow实现立体字效果
.effect01{ background-color: #333; color:#fefefe; text-shadow: 0px 1px 0px #c0c0c0, 0px 2px 0px #b0b0b0, 0px 3px 0px #a0a0a0, 0px 4px 0px #909090, 0px 5px 10px rgba(0, 0, 0, 0.6);}登录后复制效果二-长尾效果html文件还是那样
<div contenteditable="true" class="text effect02">前端开发whqet</div>登录后复制
text-shadow里面偏移多一点，颜色逐渐简单，长尾效果就来了。
.effect02{ color:#333; background-color: #ddd; text-shadow: 1px -1px 0 #767676, -1px 2px 1px #737272, -2px 4px 1px #767474, -3px 6px 1px #787777, -4px 8px 1px #7b7a7a, -5px 10px 1px #7f7d7d, -6px 12px 1px #828181, -7px 14px 1px #868585, -8px 16px 1px #8b8a89, -9px 18px 1px #8f8e8d, -10px 20px 1px #949392, -11px 22px 1px #999897, -12px 24px 1px #9e9c9c, -13px 26px 1px #a3a1a1, -14px 28px 1px #a8a6a6, -15px 30px 1px #adabab, -16px 32px 1px #b2b1b0, -17px 34px 1px #b7b6b5, -18px 36px 1px #bcbbba, -19px 38px 1px #c1bfbf, -20px 40px 1px #c6c4c4, -21px 42px 1px #cbc9c8, -22px 44px 1px #cfcdcd;}登录后复制效果三-内阴影html文件
<div contenteditable="true" class="text effect03">前端开发whqet</div>登录后复制
css文件
.effect03{ color: #202020; background-color: #2d2d2d; text-shadow: -1px -1px 1px #111111, 2px 2px 1px #363636;}登录后复制效果四-斜纹字描边效果html文件
<div contenteditable="true" class="text effect04">前端开发whqet</div>登录后复制
css文件，使用linear-gradient对p设置条纹背景、只在文本上显示背景（-webkit-background-clip: text;）、文字颜色透明（-webkit-text-fill-color: transparent;）和文字描边（-webkit-text-stroke: 2px #111;）实现。
.effect04{ background-color: #333; background-image: linear-gradient( 45deg, transparent 45%, hsla(48,20%,90%,1) 45%, hsla(48,20%,90%,1) 55%, transparent 0 ); background-size: .05em .05em; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke: 2px #111;}登录后复制效果五-文字条纹动画html文件
<div data-text="前端开发whqet" class="text effect05">前端开发whqet</div>登录后复制
css文件，利用:before伪对象来显示条纹，并对之添加动画。
body{ background-color: #666;}@import url(http://fonts.googleapis.com/css?family=Dosis:500,800);.text { font-family:"微软雅黑", "Dosis", sans-serif; font-size: 80px; text-align: center; font-weight: bold; line-height:200px; text-transform:uppercase; position: relative;}0登录后复制效果六-描边文字html文件
body{ background-color: #666;}@import url(http://fonts.googleapis.com/css?family=Dosis:500,800);.text { font-family:"微软雅黑", "Dosis", sans-serif; font-size: 80px; text-align: center; font-weight: bold; line-height:200px; text-transform:uppercase; position: relative;}1登录后复制css文件
body{ background-color: #666;}@import url(http://fonts.googleapis.com/css?family=Dosis:500,800);.text { font-family:"微软雅黑", "Dosis", sans-serif; font-size: 80px; text-align: center; font-weight: bold; line-height:200px; text-transform:uppercase; position: relative;}2登录后复制效果七-遮罩文字html文件
body{ background-color: #666;}@import url(http://fonts.googleapis.com/css?family=Dosis:500,800);.text { font-family:"微软雅黑", "Dosis", sans-serif; font-size: 80px; text-align: center; font-weight: bold; line-height:200px; text-transform:uppercase; position: relative;}3登录后复制css文件
body{ background-color: #666;}@import url(http://fonts.googleapis.com/css?family=Dosis:500,800);.text { font-family:"微软雅黑", "Dosis", sans-serif; font-size: 80px; text-align: center; font-weight: bold; line-height:200px; text-transform:uppercase; position: relative;}4登录后复制效果八-3D炫光效果html文件
body{ background-color: #666;}@import url(http://fonts.googleapis.com/css?family=Dosis:500,800);.text { font-family:"微软雅黑", "Dosis", sans-serif; font-size: 80px; text-align: center; font-weight: bold; line-height:200px; text-transform:uppercase; position: relative;}5登录后复制css文件
body{ background-color: #666;}@import url(http://fonts.googleapis.com/css?family=Dosis:500,800);.text { font-family:"微软雅黑", "Dosis", sans-serif; font-size: 80px; text-align: center; font-weight: bold; line-height:200px; text-transform:uppercase; position: relative;}6登录后复制更多编程相关知识，请访问：编程视频！！
以上就是纯CSS3如何实现文字效果？8种文字效果分享的详细内容，更多请关注9543建站博客其它相关文章！
发表评论