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

Runjs

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

PrefixFree

<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演示

特效原文地址

HTML5/CSS3(PrefixFree.js) 3D文字特效的更多相关文章

  1. html5和css3实现的3D滚动特效

    今天给大家带来一款html5和css3实现的3D滚动特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="container"&g ...

  2. CSS3实现水位充满文字特效

    CSS3实现水位充满文字特效是一款既是Loading特效也是文字特效,Loading动画开始时,文字中的水位渐渐上升,为了模拟水位上升的真实效果,水面还会波浪浮动,当Loading动画结束时,文字中的 ...

  3. html5 + css3 + zepto.js实现的微信广告宣传页

    最新学习html5 + css3, 参考微信的一个推广页写出一个实例巩固自己知识,自己已经将原实例打包到自己博客文件当中,但是不知道如何提供下载,如有需要的朋友可以联系我qq309666726

  4. HTML5颜色渐变3D文字特效

    在线演示 本地下载

  5. Html5+Css3 Banner Animation 多方位移动特效

    背景:朋友问我小米官网的mi4的特效会做吗,可能新接的一个小网站需要用到.一直有打算研究H5C3的一些效果,趁此机会,赶紧学习一下! 效果:如图 素材 HTML: <div class=&quo ...

  6. 基于HTML5/CSS3可折叠的3D立方体动画

    今天要给大家带来另外一款CSS3 3D立方体动画,尤其在DEMO2中可以看到,鼠标滑过立方体后,它将会被打开,从里面弹出另外一个小立方体,动画效果非常酷,非常逼真. 在线预览   源码下载 实现的代码 ...

  7. 3D文字特效

    在线演示 本地下载

  8. html5/CSS3鼠标滑过图片特效插件

    在线演示 本地下载

  9. 基于HTML5+CSS3的图片旋转、无限滚动、文字跳动特效

    本文分享几种基于HTML5+CSS3实现的一些动画特效:图片旋转.无限滚动.文字跳动;实现起来均比较容易,动手来试试! 一.图片旋转 效果图如下: 这个效果实现起来其实并不困难.代码清单如下: < ...

随机推荐

  1. BZOJ K大数查询（分治）（Zjoi2013）

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=3110 Description 有N个位置,M个操作.操作有两种,每次操作如果是1 a b ...

  2. CSS3 filter:drop-shadow滤镜与box-shadow区别应用 抄的

    CSS3 filter:drop-shadow滤镜与box-shadow区别应用 这篇文章发布于 2016年05月18日,星期三,01:07,归类于 css相关. 阅读 5777 次, 今日 12 次 ...

  3. zw版【转发·台湾nvp系列Delphi例程】CheckDifference1

    zw版[转发·台湾nvp系列Delphi例程]CheckDifference1 procedure TForm1.Button1Click(Sender: TObject);var img, img1 ...

  4. 菜鸟，大牛和教主三者的区别（转自hzwer）

    菜鸟,大牛和教主,三者的区别 对菜鸟来说题目有三种:会算法且能AC的,会算法但不能AC的,不会做的 对大牛来说题目有两种:会做的,不会做的 对教主来说题目有两种:能AC的,数据有错的 菜鸟提交WA了, ...

  5. 如何在图像处理工具包ImagXpress中对图像进行捕捉、复制和粘贴

    如何在在ImagXpress中进行图像的捕捉. 复制和粘贴呢?下面详细来看一下,在多种情况下,图和实现这些操作. 捕捉屏幕图像 捕捉通过ImageXView窗口绑定的屏幕范围,以及保存到一个Image ...

  6. android 项目学习随笔十七（ListView、GridView显示组图）

    ListView.GridView显示组图,处理机制相同 <?xml version="1.0" encoding="utf-8"?> <Li ...

  7. jquery中的each用法以及js中的each方法实现实例

    each()方法能使DOM循环结构简洁,不容易出错.each()函数封装了十分强大的遍历功能,使用也很方便,它可以遍历一维数组.多维数组.DOM, JSON 等等在javaScript开发过程中使用$ ...

  8. linux常用命令简单介绍(netstat,awk,top,tail,head,less,more,cat,nl)

    1.netstat netstat -tnl | grep 443 (查看443端口是否被占用) root用户,用netstat -pnl | grep 443 (还可显示出占用本机443端口的进程P ...

  9. java中length，length(),size()的区别

    1. java中的length属性是针对数组说的,比如说你声明了一个数组,想知道这个数组的长度则用到了length这个属性.2. java中的length()方法是针对字符串String说的,如果想看 ...

  10. iOS 学习笔记 五 （2015.03.17）使用storyBoard进行tableview的跳转

    方法一: 点击tableviewCell后,按住ctrl键拖拽至想要跳转的新的界面.这样跳转的结果是,点击tableview中的任何一行都会跳转到新的界面.可以通过控制cell的 属性 userInt ...