Last active
May 10, 2019 05:28
-
-
Save gee1k/14100dae80f475736162c5eddc2d2066 to your computer and use it in GitHub Desktop.
HTML
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Document</title> | |
| <style> | |
| .bg { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100vw; | |
| height: 100vh; | |
| background-repeat: no-repeat; | |
| background-size: 100% auto; | |
| opacity: 0; | |
| transition: opacity 1s | |
| } | |
| .bg-1 { | |
| background-image: url("http://img1.template.cache.wps.cn/wpsweb/images/product/wpsmac2019/bg1.jpg?v=10-26-17-16"); | |
| /*background-color: #d6f0ff;*/ | |
| } | |
| .bg-2 { | |
| background-image: url("http://img2.template.cache.wps.cn/wpsweb/images/product/wpsmac2019/bg2.jpg?v=10-26-17-16"); | |
| /*background-color: #323232;*/ | |
| } | |
| .show { | |
| opacity: 1; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="bg-1" class="bg bg-1 show"></div> | |
| <div id="bg-2" class="bg bg-2"></div> | |
| <script> | |
| var current = 'bg-1' | |
| var bg1 = document.getElementById('bg-1') | |
| var bg2 = document.getElementById('bg-2') | |
| function switchBg() { | |
| if (current === 'bg-1') { | |
| bg1.className = 'bg bg-1' | |
| bg2.className = 'bg bg-2 show' | |
| current = 'bg-2' | |
| } else { | |
| bg1.className = 'bg bg-1 show' | |
| bg2.className = 'bg bg-2' | |
| current = 'bg-1' | |
| } | |
| } | |
| setInterval(switchBg, 1300) | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment