不用图片和文字的CSS3文字效果

2020-01-27 14:16:57

字体：大中小

来源：转载

供稿：网友

不用图片和文字而实现的CSS3文字效果，实现的效果类似于一种卡通的字体风格，好像以前见过这种字体，不过本例中的文字效果并不是通过设定字体而实现的，也不是使用了图片，而是采用较新的CSS3技术实现的，不错哦。

<!DOCTYPE HTML><html lang=zh-cn><head><meta charset=utf-8><title>不用图片和文字的CSS3文字效果</title><style>*{margin:0px;padding:0px;}body{background:#b1b1b1;margin:0px;padding:0px;font-size:14px;color:#000;}.tips{width:702px;margin:0 auto;line-height:24px;padding-top:10px;}.bredcolor{color:#fff;}.cssFontContainer {width:745px; margin:0 auto; padding-left:5px;}.cssPlay {height:1.4em; display:block; float:left; margin:0.2em 0.05em; position:relative;}.cssPlay span {display:block; position:absolute;}.cssPlay span:before,.cssPlay span:after,.cssPlay:before,.cssPlay:after {display:block; content:""; position:absolute;}.cssPlay {text-indent:-999em;}.cssPlay.a {width:1.4em; height:1.4em; overflow:hidden;}.cssPlay.a:before {width:0.7em; height:0.9em; background:#000; left:0; top:0;	-webkit-transform-origin: right top;	-moz-transform-origin: right top;	-ms-transform-origin: right top;	-o-transform-origin: right top;	transform-origin: right top;	-webkit-transform: skewY(-63deg);	-moz-transform: skewY(-63deg);	-ms-transform: skewY(-63deg);	-o-transform: skewY(-63deg);	transform: skewY(-63deg);}.cssPlay.a:after {width:0.7em; height:0.9em; background:#000; right:0; top:0;	-webkit-transform-origin: left top;	-moz-transform-origin: left top;	-ms-transform-origin: left top;	-o-transform-origin: left top;	transform-origin: left top;	-webkit-transform: skewY(63deg);	-moz-transform: skewY(63deg);	-ms-transform: skewY(63deg);	-o-transform: skewY(63deg);	transform: skewY(63deg);}.cssPlay.a span {width:0.6em; height:0.2em; background:#000; left:0.4em; bottom:0.1em;}.cssPlay.e {width:0.6em; height:0.6em; border:0.4em solid #000; border-right:0;}.cssPlay.e:before {width:0.5em; height:0.3em; background:#000; left:0; top:0.15em;}.cssPlay.i {width:0.4em; height:1.4em; background:#000;}.cssPlay.l {width:0.6em; height:1em; border:0.4em solid #000; border-width:0 0 0.4em 0.4em;}.cssPlay.m {width:1.4em; height:1.4em; overflow:hidden;}.cssPlay.m:before {width:0.4em; height:0.9em; background:#000; left:0; top:0.5em;}.cssPlay.m:after {width:0.4em; height:0.9em; background:#000; right:0; top:0.5em;}.cssPlay.m span:before {width:0.7em; height:0.55em; background:#000; left:0; top:0;	-webkit-transform-origin: left top;	-moz-transform-origin: left top;	-ms-transform-origin: left top;	-o-transform-origin: left top;	transform-origin: left top;	-webkit-transform: skewY(45deg);	-moz-transform: skewY(45deg);	-ms-transform: skewY(45deg);	-o-transform: skewY(45deg);	transform: skewY(45deg);}.cssPlay.m span:after {width:0.7em; height:0.55em; background:#000; left:0.7em; top:0;	-webkit-transform-origin: right top;	-moz-transform-origin: right top;	-ms-transform-origin: right top;	-o-transform-origin: right top;	transform-origin: right top;	-webkit-transform: skewY(-45deg);	-moz-transform: skewY(-45deg);	-ms-transform: skewY(-45deg);	-o-transform: skewY(-45deg);	transform: skewY(-45deg);}.cssPlay.n {width:1.1em; height:1.4em; overflow:hidden;}.cssPlay.n:before {width:0.7em; height:1em; border-left:0.4em solid #000; top:0.4em;}.cssPlay.n:after {width:0.4em; height:1em; background: #000; right:0; top:0;}.cssPlay.n span {width:1.1em; height:0.55em; background:#000; left:0; top:0;	-webkit-transform-origin: left top;	-moz-transform-origin: left top;	-ms-transform-origin: left top;	-o-transform-origin: left top;	transform-origin: left top;	-webkit-transform: skewY(38deg);	-moz-transform: skewY(38deg);	-ms-transform: skewY(38deg);	-o-transform: skewY(38deg);	transform: skewY(38deg);}.cssPlay.o {width:0.6em; height:0.6em; border:0.4em solid #000; border-radius:8em;}.cssPlay.q {width:0.6em; height:0.6em; border:0.4em solid #000; border-radius:8em;}.cssPlay.q:after {width:0.3em; height:0.6em; background:#000; right:-0.3em; bottom:-0.4em;	-webkit-transform-origin: right bottom;	-moz-transform-origin: right bottom;	-ms-transform-origin: right bottom;	-o-transform-origin: right bottom;	transform-origin: right bottom;	-webkit-transform: skewX(25deg);	-moz-transform: skewX(25deg);	-ms-transform: skewX(25deg);	-o-transform: skewX(25deg);	transform: skewX(25deg);}.cssPlay.s {width:1.1em; height:1.4em;}.cssPlay.s:before {width:0.27em; height:0.1em; border:0.4em solid #000; border-right:0; border-radius:8em 0 0 8em;}.cssPlay.s:after {width:0.27em; height:0.1em; border:0.4em solid #000; border-left:0; border-radius:0 8em 8em 0; right:0; top:0.5em;}.cssPlay.s span {width:1.1em; height:1.4em; left:0; top:0;}.cssPlay.s span:before {width:0.1em; height:0.1em; border:0.4em solid transparent; border-color:transparent #000 transparent transparent; border-radius:6em; left:0.2em;	-webkit-transform: rotate(-45deg);	-moz-transform: rotate(-45deg);	-ms-transform: rotate(-45deg);	-o-transform: rotate(-45deg);	transform: rotate(-45deg);}.cssPlay.s span:after {width:0.1em; height:0.1em; border:0.4em solid transparent; border-color:transparent transparent transparent #000; border-radius:6em; left:0em; top:0.5em;	-webkit-transform: rotate(-45deg);	-moz-transform: rotate(-45deg);	-ms-transform: rotate(-45deg);	-o-transform: rotate(-45deg);	transform: rotate(-45deg);}.cssPlay.u {width:0.3em; height:1em; border:0.4em solid #000; border-top:0; border-radius:0 0 0.6em 0.6em;}.cssPlay.y {width:1.3em; height:1.4em; overflow:hidden;}.cssPlay.y:before {width:0.65em; height:0.9em; background:#000; left:0; top:0.4em;	-webkit-transform-origin: right bottom;	-moz-transform-origin: right bottom;	-ms-transform-origin: right bottom;	-o-transform-origin: right bottom;	transform-origin: right bottom;	-webkit-transform: skewY(63deg);	-moz-transform: skewY(63deg);	-ms-transform: skewY(63deg);	-o-transform: skewY(63deg);	transform: skewY(63deg);}.cssPlay.y:after {width:0.65em; height:0.9em; background:#000; right:0; top:0.4em;	-webkit-transform-origin: left bottom;	-moz-transform-origin: left bottom;	-ms-transform-origin: left bottom;	-o-transform-origin: left bottom;	transform-origin: left bottom;	-webkit-transform: skewY(-63deg);	-moz-transform: skewY(-63deg);	-ms-transform: skewY(-63deg);	-o-transform: skewY(-63deg);	transform: skewY(-63deg);}.cssPlay.y span {width:0.4em; height:0.6em; background:#000; left:0.45em; bottom:0;}.cssPlay.z {width:1.2em; height:1.4em; overflow:hidden;}.cssPlay.z:before {width:0.9em; height:0.4em; background:#000;}.cssPlay.z:after {width:0.9em; height:0.4em; background:#000; right:0; bottom:0;}.cssPlay.z span {width:0.45em; height:1.4em; background:#000; left:0; bottom:0;	-webkit-transform-origin: left bottom;	-moz-transform-origin: left bottom;	-ms-transform-origin: left bottom;	-o-transform-origin: left bottom;	transform-origin: left bottom;	-webkit-transform: skewX(-28deg);	-moz-transform: skewX(-28deg);	-ms-transform: skewX(-28deg);	-o-transform: skewX(-28deg);	transform: skewX(-28deg);}h1.cssFont {clear:both; font-size:3em; padding:0; margin:0;}.cssPlay {text-indent:-999em;}.clear {clear:left;}</style></head><body><section class="tips"> 由于各位朋友的反映，<a href="http://www.css3train.com" target="_blank">本站</a>案例也开始做其他浏览器的兼容，以前的案例不再作更改。 css3小技巧:	这片文章是我在国外的网站看到的，自己改了下，和大家来分享一下！ 	 	qq群:197326136 </section><div class="cssFontContainer">	<h1 class="cssFont">				 								 				 																	</h1></div></body></html>

上一篇：古典的HTML5钟表效果

下一篇：使用transform和transition制作CSS3动画