Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 2020-05-26——如何使用CSS在页面加载时创建淡入效果？
Blogger Information
Blog 12
fans 0
comment 0
visits 8909
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
2020-05-26——如何使用CSS在页面加载时创建淡入效果？
A 枕上人如玉、
Original
703 people have browsed it

使用动画和过渡属性在使用CSS的页面加载中创建淡入效果。

方法1：使用CSS动画属性：CSS动画由2个关键帧定义。一个将不透明度设置为0，另一个将不透明度设置为1。当动画类型设置为easy时，动画在页面中平滑淡入淡出。

此属性应用于body标签。每当页面加载时，都会播放此动画，并且页面看起来会淡入。可以在animation属性中设置淡入的时间。

代码如下：

  1. body { 
  2.     animation: fadeInAnimation ease 3s 
  3.     animation-iteration-count: 1; 
  4.     animation-fill-mode: forwards; 
  5. }
  7. @keyframes fadeInAnimation { 
  8.     0% { 
  9.         opacity: 0; 
  10.     } 
  11.     100% { 
  12.         opacity: 1; 
  13.      } 
  14. }

例：

  1. <!DOCTYPE html> 
  2. <html>
  4. <head> 
  5.     <title> 
  6.         How to create fade-in effect 
  7.         on page load using CSS 
  8.     </title>
  10.     <style> 
  11.         body { 
  12.             animation: fadeInAnimation ease 3s; 
  13.             animation-iteration-count: 1; 
  14.             animation-fill-mode: forwards; 
  15.         } 
  16.         @keyframes fadeInAnimation { 
  17.             0% { 
  18.                 opacity: 0; 
  19.             } 
  20.             100% { 
  21.                 opacity: 1; 
  22.             } 
  23.         } 
  24. </style> 
  25. </head>
  27. <body> 
  28.     <h1 style="color: green"> 
  29.         GeeksForGeeks 
  30.     </h1>
  32.     <b> 
  33.         How to create fade-in effect 
  34.         on page load using CSS 
  35.     </b>
  37.     <p> 
  38.         This page will fade in 
  39.         after loading 
  40.     </p> 
  41. </body>
  43. </html>

方法2：使用过渡属性，并在加载主体时将不透明度设置为1：在此方法中，可以将主体初始设置为不透明度0，并且每当更改该属性时，过渡属性都将用于为其设置动画。

加载页面时，使用onload事件将不透明度设置为1。由于transition属性，现在更改不透明度将在页面中消失。淡入的时间可以在transition属性中设置。

代码如下：

  1. body { 
  2.     opacity: 0; 
  3.     transition: opacity 5s; 
  4. }

例：

  1. <!DOCTYPE html> 
  2. <html>
  4. <head> 
  5.     <title> 
  6.         How to create fade-in effect 
  7.         on page load using CSS 
  8.     </title>
  10.     <style> 
  11.         body { 
  12.             opacity: 0; 
  13.             transition: opacity 3s; 
  14.         } 
  15. </style> 
  16. </head>
  18. <body onload="document.body.style.opacity='1'">
  20.     <h1 style="color: green"> 
  21.         GeeksForGeeks 
  22.     </h1>
  24.     <b> 
  25.         How to create fade-in effect 
  26.         on page load using CSS 
  27.     </b>
  29.     <p> 
  30.         This page will fade in 
  31.         after loading 
  32.     </p> 
  33. </body>
  35. </html>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post