您的位置：首页 > Web前端 > CSS

css3 - 动画功能 — Animations功能实现网页的淡入淡出

2017-04-29 13:57 239 查看
在线展示

打开页面，网页会慢慢淡入；

html：

<body>
示例文字示例文字示例文字示例文字示例文字
</body>


css：

<style>
@-webkit-keyframes fadein {
0% {
opacity: 0;
background-color: #fff;
}
100% {
opacity: 1;
background-color:  #fff;
}
}

body {
-webkit-animation-name: fadein;
-webkit-animation-duration: 4s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: 1; /* 动画只播放一次 */
}
</style>


解析：

通过在开始帧与结束帧中改变页面的opacity属性的属性值来实现页面的淡入淡出效果。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航