• About us
  • Contact
  • Rules
  • Privacy Policy
I love wordpress
  • Home
  • WordPress
  • Theme WordPress
  • Plugin WordPress
No Result
View All Result
  • Home
  • WordPress
  • Theme WordPress
  • Plugin WordPress
No Result
View All Result
I love wordpress
No Result
View All Result

Create a snow effect with CSS3 for blogger

haikv121 by haikv121
Tháng Mười Hai 24, 2021
in Blogger
0

Create a snow effect with CSS3 for blogger. The coming Christmas season is also the time when bloggers race to decorate their blog/website as a habit. Snowfall is an indispensable effect! However, if you integrate this effect with a script when entering the page, the user will feel jerky, frozen, and very annoying.

Create a snow effect with CSS3 for blogger
Create a snow effect with CSS3 for the blogger

With the powerful development of CSS3, it is possible to create this effect without using scripts. You will reduce the above lag.

To proceed with the integration, do the following.

Log in to your blog’s admin page and go to HTML editing.

Paste the following code before the closing </body> tag. 

<style type="text/css"> 

.snow-container{position:fixed;width:100%;max-width:100%;z-index:99999;pointer-events:none;overflow:hidden;top:0 ;height:100%} 

.snow{display:block;position:absolute;z-index:2;top:0;right:0;bottom:0;left:0;pointer-events:none;-webkit-transform: translate3d(0,-100%,0);transform:translate3d(0,-100%,0);-webkit-animation:snow linear infinite;animation:snow linear infinite} 

.snow.foreground{background-image:url( "https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-large-075d267ecbc42e3564c8ed43516dd557.png");-webkit-animation-duration:15s;animation-duration:10s} 

.snow.foreground.layered{-webkit- animation-delay:7.5s;animation-delay:7.5s}

.snow.middleground{background-image:url("https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-medium-0b8a5e0732315b68e1f54185be7a1ad9.png");-webkit-animation-duration:20:15s;animation-durations;animation-durations; } 

.snow.middleground.layered{-webkit-animation-delay:10s;animation-delay:10s} 

.snow.background{background-image:url("https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow -small-1ecd03b1fce08c24e064ff8c0a72c519.png");-webkit-animation-duration:25s;animation-duration:20s} 

.snow.background.layered{-webkit-animation-delay:12.5s;animation-delay:12.5s} 

@- webkit-keyframes snow{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{-webkit-transform:translate3d(5%, 100%,0);transform:translate3d(5%,100%,0)}}

@keyframes snow{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{-webkit-transform:translate3d(5%,100 %,0);transform:translate3d(5%,100%,0)}} 

</style> 

<div class='snow-container'> 

        <div class='snow foreground'></div> 

        <div class= 'snow foreground layered'></div> 

        <div class='snow middleground'></div> 

        <div class='snow middleground layered'></div> 

        <div class='snow background'></div> 

        <div class='snow background layered'></div> 

</div>

Save the sample and check the results.

Custom:

  • Host 3 link photos to your account for safety. If using the default but the image link is broken, then I will send a new image link
  • You can use the b:if tag to specify when the snow starts to fall. For example, don’t want it to fall on posts and static pages

 

<b:if cond='data:blog.pageType not in {"static_page","item"}'> 

// Insert snowfall code here 

</b:if>

With this simple trick, you can decorate your blog more splendidly to welcome Christmas and New Year. Good Luck!

Click to rate this post!
[Total: 1 Average: 5]

Related posts:

  1. Instructions for inserting music into Blogger
  2. Create a beautiful download button for blogger
  3. 9 Blogspot Killer SEO Tips for Bloggers
  4. Adding Google Translate Utilities to Blogger
  5. How to add Facebook comments to Blogger
Tags: Create a snow effectCSS3
Previous Post

Download beautiful Microsoft Teams wallpapers

Next Post

Instructions for inserting music into Blogger

Related Posts

How to add Facebook comments to Blogger
Blogger

How to add Facebook comments to Blogger

Tháng Mười Hai 25, 2021
Adding Google Translate Utilities to Blogger
Blogger

Adding Google Translate Utilities to Blogger

Tháng Mười Hai 25, 2021
9 Blogspot Killer SEO Tips for Bloggers
Blogger

9 Blogspot Killer SEO Tips for Bloggers

Tháng Mười Hai 25, 2021
Create a beautiful download button for blogger
Blogger

Create a beautiful download button for blogger

Tháng Mười Hai 24, 2021
Next Post
Instructions for inserting music into Blogger

Instructions for inserting music into Blogger

Theo dõi
Đăng nhập
Thông báo của
guest
guest
0 Góp ý
Phản hồi nội tuyến
Xem tất cả bình luận

How to Fix 429 Too Many Requests Error in WordPress

15 Best WordPress Full Site Editing Themes in 2022 (FREE)

13 Best WordPress Plugins for Photographers in 2022

11 Reasons Why WordPress Users Choose Cloudways

How to Revert a WordPress Multisite to a Single Site in 2022

Cloudways Sponsored the WordCamp Athens 2022 Event

  • About us
  • Contact
  • Rules
  • Privacy Policy
Contact: Haidesign010596@gmail.com

© 2021 Cepke.info

No Result
View All Result
  • Home
  • WordPress
  • Theme WordPress
  • Plugin WordPress

© 2021 Cepke.info

wpDiscuz
0
0
Rất thích suy nghĩ của bạn, hãy bình luận.x
()
x
| Trả lời