纯CSS3文字效果推荐
前端开发whqet,csdn,王海庆,whqet,前端开发专家
之前曾经研究过几个纯css实现的文字效果,《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);
}
效果二-长尾效果
<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对div设置条纹背景、只在文本上显示背景(-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伪对象来显示条纹,并对之添加动画。
.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文件
<div contenteditable="true" class="text effect06">前端开发whqet</div>
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;
}
效果七-遮罩文字
<div contenteditable="true" class="text effect07">前端开发whqet</div>
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文件
<div class="text effect08"><h1>前端开发whqet</h1><h1>前端开发whqet</h1><h1>前端开发whqet</h1><h1>前端开发whqet</h1><h1>前端开发whqet</h1><h1>前端开发whqet</h1><h1>前端开发whqet</h1><h1>前端开发whqet</h1>
</div>
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 h1 {position: absolute;left:0;right:0;margin:auto;text-shadow:0 0 10px rgba(0, 0, 100, .5);
}
/*
sass 循环给每一个h1设置不同的translateZ
*/
@for $n from 1 to 8 {.effect08 h1:nth-child(#{$n}) {transform:translateZ(4px*$n);}
}
----------------------------------------------------------
前端开发whqet,关注web前端开发,分享相关资源,欢迎点赞,欢迎拍砖。
---------------------------------------------------------------------------------------------------------
纯CSS3文字效果推荐相关推荐
- 纯CSS3文字Loading动画特效
纯CSS3文字Loading动画特效是一款个性的loading文字加载动画. 在线演示本地下载 更多专业前端知识,请上 [猿2048]www.mk2048.com
- 纯CSS3文字 渐变内发光投影效果
今天群上面同志们在讨论css3内发光效果,自己也就研究一下,写了个效果出来,涉及css3投影,渐变,蒙版,伪类等知识点,现在写下设计思路,仅供参考.发个效果图大家看先: 一般我们都是用css3的box ...
- html字体内发光,纯CSS3文字渐变内发光投影效果
今天群上面同志们在讨论css3内发光效果,自己也就研究一下,写了个效果出来,涉及css3投影,渐变,蒙版,伪类等知识点,现在写下设计思路,仅供参考.发个效果图大家看先: 一般我们都是用css3的box ...
- css3 文字 特效_惊人CSS3文字效果
css3 文字 特效 Astonishing CSS3 text effects In today's tutorial, I will show you six amazing CSS3 text ...
- 超越纯CSS3,超赞阴影效果推荐-shine.js
前端开发whqet,csdn,王海庆,whqet,前端开发专家 前段时间一直在忙微课比赛的事情,博客更新比较少,抱歉,今天抽空一更. 1.简介 前面我们曾经用两篇文章<纯CSS3文字效果推荐&g ...
- 第95天:CSS3 边框、背景和文字效果
1.CSS3边框: border-radius:CSS3圆角边框.在 CSS2 中添加圆角矩形需要技巧,我们必须为每个圆角使用不同的图片,在 CSS3 中,创建圆角是非常容易的,在 CSS3 中,bo ...
- 纯CSS3实现常见多种相册效果
本文包含 1.CSS3中2D转换和3D转换的介绍. 2.在相册中的应用实例. CSS3中的转换效果和动画效果十分强大好用,可以实现一些常见的动态效果. 如此一来,CSS3便可以代替许多jQuery的功 ...
- css伪类渐变,CSS3文字 渐变内发光投影效果_css
前阵子做了个css3文字效果,涉及css3投影,渐变,蒙版,伪类等知识点,现在写下设计思路,仅供参考.发个效果图大家看先: 投影shadow box-shadow 一般我们都是用css3的box-sh ...
- html 栏目切换幻灯片效果,很酷的切换效果 纯CSS3幻灯片实现
很酷的切换效果 纯CSS3幻灯片实现 11月 18, 2013 评论 (4) Sponsor CSS3实现给我们带来太多惊喜,FLASH能实现的动画,很多CSS3也可以实现,正如今天为大家展示的纯HT ...
最新文章
- 关于a标签的 href 与 onlick
- 虚拟机(基于栈还是基于寄存器)之谈
- 一个好的设计师_是什么让一个好的设计师
- GWT MVP变得简单
- 评估一个垃圾收集(GC)
- ubuntu下修改mysql编码,使能支持中文
- 发货100全功能网站/绿色版
- 怎么查看表用了那个序列_知识分享008:怎样在手机上用萤石云查看海康威视监控录像...
- goframe框架交叉编译go项目
- 大数据之-Hadoop完全分布式_集群的启动和停止方式总结---大数据之hadoop工作笔记0039
- matlab 马丢函数,振幅调制产生马丢光束的方法与流程
- U8系统UFO报表无法打印
- 多源异构网络安全关联分析
- 【Tool工具】LICEcap 推荐 GIf录制工作- 如何简单录制一个gif(Mac Window都可)
- UEFI与MBR区别
- python 处理xls
- 【IoT】 产品设计:如何做MRD和BRD?
- 24考研规划复习指导
- 【谷歌插件】Fatkun图片批量下载
- 亚航cookie加密 acw_sc_v3值