利用CSS3动画属性“@keyframes ”可实现一些动态特效,具体语法和参数可以网上自行学习。这篇文章主要是实践应用一下这个动画属性,实现页面淡入特效,在火狐24版、chrome29版、IE10中测试通过。IE9及以下浏览器不支持此特效。
淡入代码:
@keyframes fade-in {
0% {opacity: 0;}/*初始状态 透明度为0*/
40% {opacity: 0;}/*过渡状态 透明度为0*/
100% {opacity: 1;}/*结束状态 透明度为1*/
}
@-webkit-keyframes fade-in {/*针对webkit内核*/
0% {opacity: 0;}
40% {opacity: 0;}
100% {opacity: 1;}
}
#wrapper {
animation: fade-in;/*动画名称*/
animation-duration: 1.5s;/*动画持续时间*/
-webkit-animation:fade-in 1.5s;/*针对webkit内核*/
}
直接将上述代码添加到主题style样式文件中,并修改其中 #wrapper 为你的主题ID或类的名称即可。
另外,可针对页面某部分延长显示时间,比如侧边栏,再加上一句:
#sidebar {
animation: fade-in;
animation-duration: 4s;
-webkit-animation:fade-in 1.5s;
}
同理,可对页面不同的部分设定不同的淡入显示时间,实现分段显示。

利用CSS3实现页面淡入动画特效的更多相关文章

  1. 利用CSS3实现div页面淡入动画特效

    利用CSS3实现页面淡入动画特效   摘要 利用CSS3动画属性"@keyframes "可实现一些动态特效,具体语法和参数可以网上自行学习.这篇文章主要是实践应用一下这个动画属性 ...

  2. jQuery+CSS3实现404背景动画特效

    效果:http://hovertree.com/texiao/jquery/74/ 源码下载:http://hovertree.com/h/bjaf/ko0gcgw5.htm 效果图如下: 代码如下: ...

  3. 纯css3 加载loading动画特效

    最近项目中要实现当页面还没有加载完给用户提示正在加载的loading,本来是想做个图片提示的,但是图片如果放大电脑的分辨率就会感觉到很虚,体验效果很不好.于是就采用css3+js实现这个loading ...

  4. 2014圣诞节一款纯css3实现的雪人动画特效

    在2014年的圣诞节,爱编程小编给大家分分享一款纯css3实现的雪人动画特效.该实例实现一个雪人跳动的特效,效果图如下: 在线预览   源码下载 实现的代码. html代码: <span cla ...

  5. [CSS3] 学习笔记-CSS动画特效

    在CSS3中,出现了很多出彩的效果,例如2D.3D以及过度.动画和多列等.这些效果为页面设计添加了很多的可选设计. 1.2D.3D转换 转换,是使元素改变尺寸.形状.位置的一种效果:通过CSS3转换, ...

  6. 28种CSS3炫酷载入动画特效

    这是一组效果很炫酷的纯CSS3 Loading载入动画特效.这组loading动画共同拥有27种不同的效果.每一种loading动画都是通过CSS3的keyframes帧动画来完毕的,每个载入动画都构 ...

  7. CSS3扁平化Loading动画特效

    效果预览:http://hovertree.com/texiao/css3/42/ 代码如下: <!doctype html> <html> <head> < ...

  8. CSS3实现边框线条动画特效

    <div class="box-line"></div> CSS代码 .box-line, .box-line::before, .box-line::af ...

  9. 纯CSS3绘制神奇宝贝伊布动画特效

    在线演示       本地下载

随机推荐

  1. 信息:Could not publish server configuration for Tomcat v6.0 Server at localhost. Multiple Context

    需要把server.xml更正一下,去掉重复的context.或者把整个server文件夹都删掉,重新添加服务器.也可以在server窗口中删除server,再新添加一个server.

  2. .net项目的svn Global ignore pattern

     *.o *.lo *.la *.al .libs *.so *.so.[0-9]* *.a *.pyc *.pyo __pycache__ *.rej *~ #*# .#* .*.swp .DS_S ...

  3. Qt之自定义界面(QMessageBox)

    简述 通过前几节的自定义窗体的学习,我们可以很容易的写出一套属于自己风格的界面框架,通用于各种窗体,比如:QWidget.QDialog.QMainWindow. 大多数窗体的实现都是采用控件堆积来完 ...

  4. 为初学者写ORM,ORM的原理及测试案例

    提纲 一.什么是ORM.二.反射以及Attribute在ORM中的应用.三.创建一个数据库表和表对应的实体model.四.实体model如何映射出数据库表.五.组合ORM映射生成insert语句.六. ...

  5. Java知识点:琐碎知识点(1)

    Java基本介绍 SUN:Stanford University NetworkJava之父:James GoslingJava的跨平台性因为有Java虚拟机,运行class文件.Java吉祥物:Du ...

  6. hdu 4671 Backup Plan(签到题)

    错成那样,还以为是卡时间卡精度的变态题,结果就那么ac了= = 悔死我了 题意就不概述了,只要处理前两列即可.其中第一列顺序直接扫一遍,第二列要先处理较少的那几种.我是接着第一列用 head[] 继续 ...

  7. IOS的XML文件解析,利用了NSData和NSFileHandle

    如果需要了解关于文档对象模型和XML的介绍,参看 http://www.cnblogs.com/xinchrome/p/4890723.html 读取XML 上代码: NSFileHandle *fi ...

  8. Android平台程序崩溃的类型及原因列举

    Android平台程序崩溃大家都应该遇到过,force close和ANR应该是大家遇到较多的. 这里把Android平台程序崩溃的各种类型做一个简述和原因列举. 1.ANR(可见ANR): 发生场景 ...

  9. IPy的使用

    IPy - class and tools for handling of IPv4 and IPv6 addresses and networks. Website: https://github. ...

  10. hdu 3068(最长回文)

    题意:容易理解... 思路:可以用扩展kmp来做,但是我还没怎么弄懂,时间复杂度O(n*logn),而manacher算法,第一次听说,代码比较短,不难理解,和扩展kmp有点类似,时间复杂度为:O(n ...