渐入渐出效果
这里就用渐入渐出效果来举例子，下面的样式来自StackOverflow的A.M.K。
| 代码如下 | 复制代码 |
|
.content{ -webkit-animation: fadein 2s; /* Safari and Chrome */ -moz-animation: fadein 2s; /* Firefox */ -ms-animation: fadein 2s; /* Internet Explorer */ -o-animation: fadein 2s; /* Opera */ animation: fadein 2s; } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* Firefox */ /* Safari and Chrome */ /* Internet Explorer */ /* Opera */ |
|
上面的content就是要渐入渐出的容器，from相当于0%，to就是100%，相信你已经大概想出简单的使用方法了。
页面正在加载旋转效果 戳我
标题正在加载效果
首先需要加载JQuery，如果你的网站已经加载了就免了
| 代码如下 | 复制代码 |
| <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.3.min.js"></script> 接着把下面这段代码加到当前主题的header.php中，＜/head＞标签之前： <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.3.min.js"></script>a<script type="text/javascript"> $(document).ready(function() { $('h2 a').click(function(){ myloadoriginal = this.text; $(this).text('请稍等，正在努力加载中...'); var myload = this; setTimeout(function() { $(myload).text(myloadoriginal); }, 2011); }); }); </script> |
|
上面"h2 a"如果改成"a"，可以实现全部连接都显示这一效果。后面的2011是这一特效显示的时间，单位是毫秒，可酌情修改。
怎么又水了一文呢。
More：这个加载上的效果都是靠js，依赖jquery，渐入渐出效果依赖css。虽然加上三个后实际上加载速度是慢了，但是感觉上有种好玩很多的感觉。见仁见智吧。出乎意料的是这个旋转的小球居然不是图片是用css写的。标题正在加载最讨厌有人点了一个又点一个
时间： 2024-10-25 18:47:35