纯CSS3怎么实现文字效果-成都快上网建站
纯CSS3怎么实现文字效果
这篇文章主要介绍了纯CSS3怎么实现文字效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
公司主营业务：成都做网站、网站建设、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。成都创新互联公司是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。成都创新互联公司推出大东免费做网站回馈大家。
今天我们来研究几款文字效果，主要利用text-shadow、webkit内核的几个独有特性实现效果。
在线研究单击这里，下载收藏单击这里。
效果一-立体字效果
我们的html文件貌似这样，为了更好的展示效果，我们加上了可编辑属性。
前端开发whqet
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文件还是那样
前端开发whqet
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文件
前端开发whqet
css文件
.effect03{
color: #202020;
background-color: #2d2d2d;
text-shadow:
-1px -1px 1px #111111,
2px 2px 1px #363636;
}效果四-斜纹字描边效果
html文件
前端开发whqet
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文件
前端开发whqet
css文件，利用:before伪对象来显示条纹，并对之添加动画。
.effect05{
color:#DC554F;
background-color:#27ae60;
z-index: 3;
}
.effect05:before{
content:attr(data-text);
width:100%;
line-height:200px;
opacity: .5;
position: absolute;
top:2px;
left:5px;
background-image:
linear-gradient(
45deg,
transparent 45%,
hsla(48,20%,90%,1) 45%,
hsla(48,20%,90%,1) 55%,
transparent 0
);
z-index:-1;
background-size: .05em .05em;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: shadowGo 20s linear infinite;
}
@keyframes shadowGo{
0% {background-position: 0 0}
0% {background-position: -100% 100%}};
}效果六-描边文字
html文件
前端开发whqet
css文件
.effect06 {
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 2px #d6d6d6;
background: url(http://www.pencilscoop.com/demos/CSS_Text_Effects/images/galaxy.jpg);
background-size: cover;
}效果七-遮罩文字
html文件
前端开发whqet
css文件
.effect07 {
background: url(http://www.pencilscoop.com/demos/CSS_Text_Effects/images/galaxy.jpg) #333;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: cover;
animation: 10s infinite linear animate;
}
.effect07:before {
content:"";
width:100%;
height:100%;
position: absolute;
left:0;
top:0;
background-color: #999;
z-index: -1;
}
@keyframes animate {
0% {
background-position:0;
}
100% {
background-position:-1000px 0;
}
}效果八-3D炫光效果
html文件
前端开发whqet
前端开发whqet
前端开发whqet
前端开发whqet
前端开发whqet
前端开发whqet
前端开发whqet
前端开发whqet
css文件
.effect08 {
color:#fff;
transform-origin:center bottom;
transform-style:preserve-3d;
transition:all 1s;
cursor: pointer;
}
.effect08:hover {
transform:rotate3d(1, 0, 0, 40deg);
}
.effect08 h2 {
position: absolute;
left:0;
right:0;
margin:auto;
text-shadow:0 0 10px rgba(0, 0, 100, .5);
}
/*
sass 循环给每一个h2设置不同的translateZ
*/
@for $n from 1 to 8 {
.effect08 h2:nth-child(#{$n}) {
transform:translateZ(4px*$n);
}
}css的选择器有哪些
css的选择器可以分为三大类，即id选择器、class选择器、标签选择器。它们之间可以有多种组合，有后代选择器、子选择器、伪类选择器、通用选择器、群组选择器等等
感谢你能够认真阅读完这篇文章，希望小编分享的“纯CSS3怎么实现文字效果”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!
当前标题：纯CSS3怎么实现文字效果
文章地址：http://kswjz.com/article/jgsphj.html
扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
