[CSS3 + native JS] The rising block dynamic background, css3js
If the GIF image is a little large and the network speed is slow, wait a moment or you can browse your own demo.
Demo: Click to view
HTML:
<!DOCTYPE html>
CSS:
* { margin: 0; padding: 0; border: none; outline: 0; } body{ width: 100vw; height: 100vh; background: url(img/bg.png) no-repeat; background-size: cover; } #F-dynamicbg-box { width: 100vw; height: 100vh; position: absolute; top: 0; left: 0; overflow: hidden; } #F-dynamicbg-box > div { z-index: -9999; background-color: rgba(255,255,255,.1); position: absolute; top: 105vh; animation: dynamicDiv 30s linear infinite; } #F-dynamicbg-box > div:nth-of-type(1) { animation-delay: 1s } #F-dynamicbg-box > div:nth-of-type(2) { animation-delay: 3s } #F-dynamicbg-box > div:nth-of-type(3) { animation-delay: 6s } #F-dynamicbg-box > div:nth-of-type(4) { animation-delay: 9s } #F-dynamicbg-box > div:nth-of-type(5) { animation-delay: 12s } #F-dynamicbg-box > div:nth-of-type(6) { animation-delay: 4s } #F-dynamicbg-box > div:nth-of-type(7) { animation-delay: 15s } #F-dynamicbg-box > div:nth-of-type(8) { animation-delay: 18s } #F-dynamicbg-box > div:nth-of-type(9) { animation-delay: 20s } #F-dynamicbg-box > div:nth-of-type(10) { animation-delay: 16s } @keyframes dynamicDiv { form { top: 105vh; transform: scale(1.2); } to { top: -13vh; transform: scale(1) rotate(60deg); } }
JS :( JS initializes div form)
Var box = document. getElementById ('F-dynamicbg-box'), div = box. getElementsByTagName ('div '), math = [0, 1]; for (var I = 0; I <div. length; I ++) {math [1] = F_getSJS (, 9) F_getSJS please read the random number obtained before the blog step. if (math [1]! = Math [2]) {div [I]. style. width = math [1] + 'px '; div [I]. style. height = math [1] + 'px '; math [2] = math [1] ;}}for (var I = 0; I <div. length; I ++) {div [I]. style. left = F_getSJS (, 15, 8) + 'vw'; div [I]. style. transform = 'rotate ('+ F_getSJS (360,5, 9) + 'deg )';}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
