当前位置：编程学习 > JS >>

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

不用图片和文字而实现的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>案例也开始做其他浏览器的兼容，以前的案例不再作更改。<br>
  <p class="bredcolor">css3小技巧:</p>
	这片文章是我在国外的网站看到的，自己改了下，和大家来分享一下！<br>
	<br>
	qq群:197326136<br>
</section>
<div class="cssFontContainer">
	<h1 class="cssFont">
		<span class="cssPlay m"><span></span></span>
		<span class="cssPlay y"><span></span></span><br class="clear">
		<span class="cssPlay n"><span></span></span>
		<span class="cssPlay a"><span></span></span>
		<span class="cssPlay m&qu

上一个：HTML5网页Loading加载效果
下一个：CSS3动画遮罩文字特效

更多图片编程知识:
更多JS疑问解答：
几个验证11位手机号码格式的js代码
js把图片转换成 base64代码
js把base代码转换成图片
JS 将 base64编码的图片转化为图片文件
js中的定时器
js如何获得FCKeditor控件的值
用js限制投票的cookie .目前设置的为：<input type="" class="" onclick="'window.location...
JS验证，这块“牛皮”反复修改都不能实现
在JS中使用DOM模型
如何用JS 获取本地文件夹的文件列表
js中new 了两个Object数组。怎么样将数组内容合并，重复的内容？
求实现自动生成图片缩略图的JS代码
JS脚本网页问题
js，代码中"object"和"Object"区别？
js+flash实现网页图片切换效果，出现边框，单击激活此控件。
asp
php
Delphi
Matlab
JSP
Foxpro
JS
C/C++
C#/ASP.NET
VC++
JAVA
VB
汇编语言
html/css
CGI
XML/UML
wap
网站相关
网页素材
python
微信小程序
thinkphp
如果你遇到编程学习难题：
访问www.zzzyk.com 试试
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络，