推荐这篇日记的豆列
······WordPress 特效-页面加载动画圆圈Duang~ | 魔帆博客 <div class="speedbar" 请在Chrome、Firefox等现代浏览器浏览本站。 有事
联系我 想在魔帆博客投稿？ 联系我 [ 既然来了就多看两篇文章嘛，你好意思走么？ ]如果您觉得本站非常有看点，那么赶紧使用Ctrl+D 收藏魔帆博客吧
> WordPress 特效-页面加载动画圆圈Duang~
目录[] 效果：
代码实现的效果：
你也可以自己DIY，，比如 我博客现在的动画效果。
首先我们需要把CSS样式表代码插入主题的Style.css样式表之中
/* 代码开始
魔帆博客 */
background-color: rgba(0,0,0,0);
border:5px solid rgba(138,43,226,0.9);
opacity:.9;
border-right:5px solid rgba(0,0,0,0);
border-left:5px solid rgba(0,0,0,0);
border-radius:50
box-shadow: 0 0 35px #9a3ad1;
-moz-animation:spinPulse 1s infinite ease-in-
-webkit-animation:spinPulse 1s infinite ease-in-
-o-animation:spinPulse 1s infinite ease-in-
-ms-animation:spinPulse 1s infinite ease-in-
#circle1 {
background-color: rgba(0,0,0,0);
border:5px solid rgba(138,43,226,0.9);
opacity:.9;
border-left:5px solid rgba(0,0,0,0);
border-right:5px solid rgba(0,0,0,0);
border-radius:50
box-shadow: 0 0 15px #9a3ad1;
-moz-animation:spinoffPulse 1
-webkit-animation:spinoffPulse 1
-o-animation:spinoffPulse 1
-ms-animation:spinoffPulse 1
@-moz-keyframes spinPulse {
0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #505050;}
50% { -moz-transform:rotate(145deg); opacity:1; }
100% { -moz-transform:rotate(-320deg); opacity:0; }
@-moz-keyframes spinoffPulse {
0% { -moz-transform:rotate(0deg); }
100% { -moz-transform:rotate(360deg);
@-webkit-keyframes spinPulse {
0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #505050; }
50% { -webkit-transform:rotate(145deg); opacity:1;}
100% { -webkit-transform:rotate(-320deg); opacity:0; }
@-webkit-keyframes spinoffPulse {
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(360deg); }
@-o-keyframes spinPulse {
0% { -o-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #505050; }
50% { -o-transform:rotate(145deg); opacity:1;}
100% { -o-transform:rotate(-320deg); opacity:0; }
@-o-keyframes spinoffPulse {
0% { -o-transform:rotate(0deg); }
100% { -o-transform:rotate(360deg); }
@-ms-keyframes spinPulse {
0% { -ms-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #505050; }
50% { -ms-transform:rotate(145deg); opacity:1;}
100% { -ms-transform:rotate(-320deg); opacity:0; }
@-ms-keyframes spinoffPulse {
0% { -ms-transform:rotate(0deg); }
100% { -ms-transform:rotate(360deg); }
然后在页面头部公共代码header.php文件的后同样添加下列代码
&div id=&circle&&&/div&&div id=&circle1&&&/div&
最后添加jQuery渐隐效果，在全站底部脚本footer.php内的 前添加下列代码
jQuery(window).load(function() {
jQuery(&#circle&).fadeOut(500);
jQuery(&#circle1&).fadeOut(700);
如需更改颜色，请自行编辑代码中的138,43,226和#9a3ad1，颜色请看
魔帆博客 , 版权所有丨如未注明 , 均为原创丨本网站没采用协议进行授权 , 转载请注明！
or分享 (0)10大炫酷的HTML5文字动画特效欣赏
10大炫酷的HTML5文字动画特效欣赏
编辑日期： 字体：
文字是网页中最基本的元素，在CSS2.0时代，我们只能在网页上展示静态的文字，只能改变他的大小和颜色，显得枯燥无味。随着HTML5的发展，现在网页中的文字样式变得越来越丰富了，甚至出现了文字动画，HTML5和CSS3的强大之处就在于此。本文分享的10款炫酷的HTML5文字动画特效非常不错，一起来看看吧。
1、HTML5 Canvas粒子效果文字动画特效
之前我们分享过很多超酷的文字特效，其中也有利用HTML5和CSS3的。今天我们要来分享一款基于HTML5 Canvas的文字特效，输入框中输入想要展示的文字，回车后即可在canvas上绘制出粒子效果的文字动画，相当酷的动画效果。
2、CSS3 3D镂空文字特效
之前我们有分享过一款镂空效果的CSS3按钮，镂空部分可以定义其他的背景图片。今天我们要介绍的也是一款基于CSS3的镂空文字特效，这样的镂空文字效果在以前很难实现，必须使用背景图片，但是现在利用CSS3，这种镂空效果变得非常简单。
3、HTML5粒子效果的文字动画特效
记得之前向大家分享过一款HTML5 Canvas实现会跳舞的时间动画，利用了HTML5的粒子动画特性。今天要分享的也是一款基于HTML5的粒子效果的文字动画特效，并且它可以实现每个文字的逐帧播放，形成一句很浪漫的诗句。
4、CSS3 3D折叠翻转文字动画
今天我们再来分享一款CSS3文字特效应用，和之前分享的这款HTML5/CSS3文字特效类似，它也是一款CSS3 3D折叠翻转文字动画，只要将鼠标滑过文字，文字的另一面即可像翻页一样翻转开来，呈现3D立体的视觉效果，这一切都是CSS3实现的。
5、CSS3实现文字局部背景图案效果
这次要分享的是一款利用CSS3实现的文字特效，这款CSS3文字特效可以使文字的任意局部背景自定义，这样我们的一个文字不同区域就可以定义不同的背景颜色和背景图片。之前我们也分享过一篇文章用CSS3美化半个字符巧妙方法，这就是实现原理。
6、超炫CSS3文字特效集锦
今天我们要来分享十几种样式各异的CSS3文字特效，有些是3D的文字效果，有些是带有立体的文字阴影，而且色彩也都很不错。这几款CSS3文字特效用了很多text-shadow和filter属性，是这些CSS3属性，让枯燥的黑白文字变得如此生动，尽管它们都是静态的文字。
7、HTML5自定义背景图片的文字特效
在HTML5和CSS3标准出来之前，文字的背景只能是纯色，更不用说是自定义背景图片了。然而，强大的HTML5不仅让文字背景支持渐变颜色，而且支持自定义的背景图片，这些图片就像遮罩层，让文字的背景变得丰富多彩。
8、10组CSS3鼠标滑过文字动画特效
之前我们分享过很多CSS3文字动画特效，比如CSS3 3D镂空文字特效和HTML5粒子效果的文字动画特效。今天要介绍10组基于CSS3的鼠标滑过文字动画特效，有上凸、下凹等文字动画。这些炫酷的CSS3文字效果可以让网页变得更加绚丽。
9、CSS3 3D超链接 点击链接效果更酷
之前我们分享过很多CSS3 3D效果的文字，今天我们来介绍一款用纯CSS3实现的3D超链接，一眼看上去，和之前的CSS3 3D文字没什么区别，但是当你点击文字链接时，3D效果就出来了，文字链接会下陷进去，移开鼠标时，文字链接又会浮上来，很酷的CSS3 3D链接特效。
10、HTML5自定义文字背景生成QQ签名档
这是一款利用HTML5实现的自定义文字背景应用，首先我们可以输入需要显示的文字，并且为该文字选择一张背景图片，背景图片就像蒙版一样覆盖在文字上。点击生成QQ签名档即可将文字背景融为一体生成另外一张图片，你也可以下载这张拥有你QQ签名档的图片。
本文固定链接:
转载请注明:
作者：Yang
梦想有多远，我就要走多远！
如果您觉得这篇文章有用处，请支持作者！鼓励作者写出更好更多的文章！
，，，，，，，，，，
您可能还会对这些文章感兴趣！}