您的位置：首页 > Web前端 > JavaScript

HTML5/CSS3(PrefixFree.js) 3D文字特效

2014-04-14 16:14 573 查看

之前在园子里看到一个HTML5/CSS3的文字特效(这里)，觉得挺好玩的所以小小的研究了下，不过发现代码都是针对webkit以及FF的所以IE跪了。

Runjs

我将示例中的代码进行了精简，后来发现CSS大多数没有前缀，我很费解之后发现它引用过来一个PrefixFree，有了这个js就能不用写CSS3的前缀:)

<script src="http://leaverou.github.com/prefixfree/prefixfree.min.js"></script>

在link中，或是style中，或是dom元素的style中书写CSS3 code，或是jQuery

.css()

方法此脚本会自动补上需要的前缀，让响应的浏览器支持该CSS3属性

background-color: #a0b3d6;
background-image: linear-gradient(top, #beceeb, #34538b);

这样就不需要添加这些前缀太方便来了 ;)

-khtml- Konqueror

-rim- RIM

-ms- Microsoft（IE）

-0- Opera

-moz- Mozilla(如Firefox)

-webkit- Webkit

<!DOCTYPE html>
<html style="" class=" -moz- js no-flexbox canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>HTML5/CSS3 3D文字特效</title>
<style>
@import url(http://fonts.googleapis.com/css?family=Lato:900);

*, *:before, *:after {
-moz-box-sizing: border-box;
}

body {
font-family: 'Lato', sans-serif;
}

div.foo {
width: 90%;
margin: 0 auto;
text-align: center;
}

.letter {
display: inline-block;
font-weight: 900;
font-size: 8em;
margin: 0.2em;
position: relative;
color: #00B4F1;
transform-style: preserve-3d;
perspective: 400;
z-index: 1;
}

.letter:before, .letter:after {
position: absolute;
content: attr(data-letter);
transform-origin: top left;
top: 0;
left: 0;
}

.letter, .letter:before, .letter:after {
transition: all 0.3s ease-in-out;
}

.letter:before {
color: #fff;
text-shadow: -1px 0px 1px rgba(255,255,255,.8), 1px 0px 1px rgba(0,0,0,.8);
z-index: 3;
transform: rotateX(0deg) rotateY(-15deg) rotateZ(0deg);
}

.letter:after {
color: rgba(0,0,0,.11);
z-index: 2;
transform: scale(1.08,1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg,1deg);
}

.letter:hover:before {
color: #fafafa;
transform: rotateX(0deg) rotateY(-40deg) rotateZ(0deg);
}

.letter:hover:after {
transform: scale(1.08,1) rotateX(0deg) rotateY(40deg) rotateZ(0deg) skew(0deg,22deg);
}
</style>
<script src="http://leaverou.github.com/prefixfree/prefixfree.min.js"></script>
</head>
<body>
<div class="foo">
<span class="letter" data-letter="C">C</span>
<span class="letter" data-letter="N">N</span>
<span class="letter" data-letter="B">B</span>
<span class="letter" data-letter="L">L</span>
<span class="letter" data-letter="O">O</span>
<span class="letter" data-letter="G">G</span>
</div>
</body>
</html>

完整代码
Runjs演示

特效原文地址

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航