CSS如何在页面加载时创建淡入效果?

时间: 2020-01-20阅读: 451标签: 效果

想要使用css在页面加载上创建淡入效果,可以使用css的animation属性或transition属性在页面加载时创建淡入效果。下面就来通过示例来介绍一下。


方法1:使用css animation属性

通过2个关键帧来定义css动画:一个不透明度设置为0,另一个不透明度设置为1。此属性应用于body标记;当动画的类型设置为ease时,动画会在页面中平滑淡入。每当页面加载时,这个动画就会播放,页面就会出现淡入。淡入的时间也可以在动画属性中设置。

语法

body { 
    animation: fadeInAnimation ease 3s 
    animation-iteration-count: 1; 
    animation-fill-mode: forwards; 
} 
  
@keyframes fadeInAnimation { 
    0% { 
        opacity: 0; 
    } 
    100% { 
        opacity: 1; 
     } 
}

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>如何使用css在页面加载时创建淡入效果</title>
	<style> 
        body { 
            animation: fadeInAnimation ease 3s; 
            animation-iteration-count: 1; 
            animation-fill-mode: forwards; 
        } 
        @keyframes fadeInAnimation { 
            0% { 
                opacity: 0; 
            } 
            100% { 
                opacity: 1; 
            } 
        } 
    </style> 
</head> 
   
<body> 
    <h1> Hello world!</h1> 
      
    <b> 使用css在页面加载时创建淡入效果</b> 
      
    <p>加载后此页将淡入</p> 
</body> 
   
</html>


方法2:使用“Transition”属性并在加载页面时将“Opacity”设置为1

首先将body的opacity属性设置为0,并且每次更改该属性时,都使用“transition”属性使其具有动画效果。然后在加载页面时,使用onload事件将opacity属性设置为1。由于“transition”属性,现在更改opacity属性将在页面中显示为淡入淡出。淡入的时间可以在transition属性中设置。

语法

body { 
    opacity: 0; 
    transition: opacity 5s; 
}

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>如何使用css在页面加载时创建淡入效果</title>
	<style> 
        body { 
            opacity: 0; 
            transition: opacity 5s; 
        }
    </style> 
</head> 
   
<body onload="document.body.style.opacity='1'"> 
    <h1> Hello world!</h1> 
      
    <b> 使用css在页面加载时创建淡入效果</b> 
      
    <p>加载后此页将淡入</p> 
</body> 
   
</html>
站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/7547

css左边竖条的实现方法

问题描述:在只使用一个标签的情况下实现左边竖线。使用border;使用伪元素来实现;内/外阴影;drop-shadow;渐变 linearGradient

利用CSS变量实现炫酷的悬浮效果

最近,我从 Grover网站 上发现以一个好玩儿的悬停动画,这个动画是将鼠标移动到订阅按钮上移动光标,会跟随光标实现相应的彩色渐变。这个想法很简单,但是它能使这个按钮脱颖而出,人们一下子就注意到它了,增加了点击的概率。

多种方式实现吸顶效果

还是前两天的那个唱歌中间页,上线前发现滚动时候体验不好。因为之前没有做吸顶效果,搜索内容然后滚下去,没有找到内容需要再手动划上来。

position: sticky实现导航栏下滑吸顶效果

近期开发中遇到导航栏下滑吸顶的需求,经过方案调研,发现position:sticky可以简单快捷的实现功能。sticky(粘贴定位)可以被认为是相对定位和固定定位的混合,元素在跨越特定阀值前为相对定位

css文字选中效果

文字选中效果,这个可能很少有人注意过。在默认状态先一般选中的文本颜色是白字蓝底的,不过可以通过CSS进行设置。::selection定义元素上的伪选择器,以便在选定元素时设置其中文本的样式。

CSS3实现柱状图的3D立体动画效果

尝试使用纯CSS来实现相同的效果。一开始的难点在于创建一个六面半透明的立方体,而后面的难点在于如何创建一个完整的带有动画效果的3D柱状图,下面,我们就一起来看一下如何解决这些难点

Vue实现网页放大镜效果

组件使用less,请确保已安装loader,本组件为放大镜组件,传参列表为:width: 必传,设置放大镜的宽高(正方形),放大区域等同,放大倍数为2倍,picList:必传,传入图片列表

css如何实现首字下沉效果?

在CSS中可以使用伪元素::first-letter来选中一段文本的首字,然后使用font-size属性设置首字大小,在通过float属性来将实现下沉效果。:first-letter 伪元素向文本的第一个字母添加特殊样式。

text-fill-color:仿苹果官网介绍效果 CSS设置文字渐变效果 文字背景图遮罩

发布iPhone XR的时候 各种心动 去官网看了一遍又一遍。闲着无聊发现 里面的介绍很用大篇幅的有背景文字来介绍。Like this:看着挺酷炫的还不错 就看了下实现方式。还挺简单的。

CSS实现无外边框列表效果

使用外层容器切割:给每一个 li 设定右边框和下边框线,使用CSS选择器此方法仅适用于每行固定显示两个li的情况,不需要计算宽高,也不需要设置父容器。使用table通过CSS选择器li:nth-last-child(2)和li:last-child隐藏最后两个li的下边框

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广