WordPress using CSS3 to achieve page fade animation effects

utilizeCSS3Animation properties“@keyframes ”Can achieve some dynamic effects,Specific syntax and parameters can be learned online。这篇文章主要是实践应用一下这个Animation properties,Realize page fade in effect,On foxes24edition、chrome29edition、IE10Passed the test in the test。IE9The browser below does not support this effect。

Fade in code:

  • @keyframes fade-in {    
  •     40% {opacity: 0;}    
  • }    
  •     0% {opacity: 0;}    
  •     100% {opacity: 1;}    
  • #wrapper {      
  •     animation-duration: 1.5s;    
  • }  
  • Add the above code directly to the topicstyleIn the style file,And modify it #wrapper For your themeIDOr the name of the class。

    in addition,The display time can be extended for a certain part of the page,Like the sidebar,Add one more sentence:

  • #sidebar {      
  •     animation-duration: 4s;    
  • }  
  • In the same way,Different fade in time can be set for different parts of the page,Realize segmented display。

    Related Article
    WordPress 5.7 introduces a function to check whether an article can be viewed publicly

    WordPress 5.7 Two functions are introduced to check whether the article can be viewed publicly。 is_post_status_viewable() before, is_post_type_viewable() Function can be used Read more

    WordPress Theme Development – add emoji to comments

    staywordpressIt used to be very popular to add expression packs to the comments on the topic,And many websites also include Read more

    WordPress automatically intercepts part of the content of the article as a summary

    In the daily release of articles, not every article may have an article summary, so the summary function of WordPress Read more

    How to add user defined upload avatar function in WordPress

    Friends who use WordPress to build a website should know that WordPress itself does not have the function of uploading Read more

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    To prove you're a person (not a spam script), type the security word shown in the picture.
    Anti-spam image