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

 首页 > 经验分享 > Css&Div > 不用图片和文字的CSS3文字效果

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

 2018-08-30  593  收藏  0 赞一个  0 真差劲  0 去评论

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

代码如下：

<!DOCTYPE HTML>
<html>
<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>
<div>
    <h1>
        <span class="cssPlay m"><span></span></span>
        <span class="cssPlay y"><span></span></span><br>
        <span class="cssPlay n"><span></span></span>
        <span class="cssPlay a"><span></span></span>
        <span class="cssPlay m"><span></span></span>
        <span class="cssPlay e"></span><br>
        <span class="cssPlay i"></span>
        <span class="cssPlay s"><span></span></span><br>
        <span class="cssPlay z"><span></span></span>
        <span class="cssPlay o"></span>
        <span class="cssPlay u"></span>
        <span class="cssPlay q"></span>
        <span class="cssPlay i"></span>
        <span class="cssPlay l"></span>
        <span class="cssPlay a"><span></span></span>
        <span class="cssPlay i"></span>
    </h1>
</div>
</body>
</html>

效果如图：

QQ截图20180830140739.jpg

下载须知

一、推荐使用迅雷或快车等多线程下载软件下载本站资源。

二、未登录会员无法下载，登录后可获得更多便利功能，若未注册，请先注册。

三、如果服务器暂不能下载请稍后重试！总是不能下载，请点我报错 ,谢谢合作！

四、本站大部分资源是网上搜集或私下交流学习之用，任何涉及商业盈利目的均不得使用，否则产生的一切后果将由您自己承担！本站将不对任何资源负法律责任.如果您发现本站有部分资源侵害了您的权益，请速与我们联系，我们将尽快处理.

五、如有其他问题，请加网站设计交流群(点击这里查看交流群 )进行交流。

六、如需转载本站资源，请注明转载来自并附带链接

七、本站部分资源为加密压缩文件，统一解压密码为：www.aizhanzhe.com

 大家评论

 站长推荐

 点击排行