利用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. UVa 11752 (素数筛选 快速幂) The Super Powers

    首先有个关键性的结论就是一个数的合数幂就是超级幂. 最小的合数是4,所以枚举底数的上限是pow(2^64, 1/4) = 2^16 = 65536 对于底数base,指数的上限就是ceil(64*lo ...

  2. UVa 12186 Another Crisis

    题意: 给出一个树状关系图,公司里只有一个老板编号为0,其他人员从1开始编号.除了老板,每个人都有一个直接上司,没有下属的员工成为工人. 工人们想写一份加工资的请愿书,只有当不少于员工的所有下属的T% ...

  3. bzoj1412: [ZJOI2009]狼和羊的故事

    空地之间开始没有连然后一直WA...题意混乱...尴尬. #include<cstdio> #include<cstring> #include<iostream> ...

  4. <pages validateRequest="false"/>在.net4.0中无效的问题

    再web.config中设置<pages validateRequest="false"/>在.net4.0中无效的问题 解决方案: <system.web> ...

  5. 图形数据库、NOSQL和Neo4j

    简介 在众多不同的数据模型里,关系数据模型自80年代就处于统治地位,而且有不少实现,如Oracle.MySQL和MSSQL,它们也被称为关系数据库管理系统(RDBMS).然而,最近随着关系数据库使用案 ...

  6. [swustoj 785] Divide Tree

    Divide Tree(0785) 问题描述 As we all know that we can consider a tree as a graph. Now give you a tree wi ...

  7. 【WEB】jsp向servlet传参中文乱码问题解决

    传参方式:POST.GET.link方式 servlet向jsp传中文参数msg if(username.equals("") || password.euqals("& ...

  8. View.VISIBLE、INVISIBLE、GONE的区别

    android中UI应用的开发中经常会使用view.setVisibility()来设置控件的可见性,其中该函数有3个可选值,他们有着不同的含义: View.VISIBLE--->可见View. ...

  9. 在PC上收发短信--Pidgin短信(Linux Pidgin插件)

    Pidgin短信是Pidgin/empathy的一个插件.当手机收到短信进,电脑上面有提示:可以在电脑上发手机短信.让你时刻保持在电脑屏幕上,也不会错过短信.目前只支持安卓,wifi连接方式. 功能 ...

  10. MyBatis 入门到精通(三) 高级结果映射

    MyBatis的创建基于这样一个思想:数据库并不是您想怎样就怎样的.虽然我们希望所有的数据库遵守第三范式或BCNF(修正的第三范式),但它们不是.如果有一个数据库能够完美映射到所有应用程序,也将是非常 ...