css+js绘制五星红旗国庆快乐动画效果代码
代码语言:html
所属分类:布局界面
代码描述:css+js绘制五星红旗国庆快乐动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> *{ padding:0;margin:0;list-style-type:none;} html, body { align-items: center; display: flex; flex-direction: column; justify-content: center; height: 100vh; margin: 0; padding: 0; width: 100vw; font-size: 1.5vmin; overflow:hidden; } .container { display: flex; height: 100vh; width: 100vw; flex-direction: column; justify-content: center; align-items: center; } .btn-container { position: relative; text-align: center; } .btn { height: 4rem; width: 30rem; background: #fff; border: #B31C31 solid 0.125rem; border-radius: 0.625rem; color: #39386E; font-size: 2rem; font-weight: bold; cursor: pointer; margin-top: 3rem; } .btn:hover {opacity: 0.6} /* Fireworks */ @-webkit-keyframes explosion { from { width: 0; opacity: 0; } 33% { width: 0px; opacity: 0; } 34% { width: 0.625rem; opacity: 1.0; } 40% { width: 5rem; opacity: 1.0; } to { width: 5.625rem; opacity: 0; } } @-moz-keyframes explosion { from { width: 0; opacity: 0; } 33% { width: 0; opacity: 0; } 34% { width: 0.625rem; opacity: 1.0; } 40% { width: 5rem; opacity: 1.0; } to { width: 5.625rem; opacity: 0; } } #stage { position: relative; height: 100vh; width: 100vw; background-color: #000028; } .launcher { position: absolute; -webkit-animation-duration: 4s; -webkit-animation-iteration-count: infinite; -moz-animation-duration: 4s; -moz-animation-iteration-count: infinite; background: #fff; border-bottom: 0.1875rem solid yellow; } .launcher div { position: absolute; opacity: 0; left: 0.1875rem; top: 0.1875rem; width: 0.625rem; height: 0.25rem; border-right: 0.25rem solid yellow; border-radius: 0.125rem; -webkit-animation-name: explosion; -webkit-animation-duration: 4s; -webkit-animation-iteration-count: infinite; -moz-animation-name: explosion; -moz-animation-duration: 4s; -moz-animation-iteration-count: infinite; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; } @media(max-width: 500px) { .container { max-width: 80vw; max-height: 100vh; margin: 0 auto; } } /* 浜旀槦绾㈡棗 */ #flag_bg{ margin:10px; height:410px; width:750px; background:#FF0000; position:relative; } #big_star{ height:104px; width:104px; background:#FFFF00; position:absolute; top:60px; left:50px; } .big_tool{ background:#FF0000; height:40px; width:60px; position:absolute; } #angle_a{ top:-12px; left:-13px; -moz-transform: rotate(20deg); -webkit-transform: rotate(20deg); -ms-transform: rotate(20deg); } #angle_aa{ top:-3px; left:-23px; } #angle_b{ top:-12px; right:-13px; -moz-transform: rotate(-20deg); -webkit-transform: rotate(-20deg); -ms-transform: rotate(-20deg); } #angle_bb{ top:-3px; right:-23px; } #angle_c{ top:39px; left:-34px; -moz-transform: rotate(34deg); -webkit-transform: rotate(34deg); -ms-transform: rotate(34deg);} #angle_d{ top:39px; right:-34px; -moz-transform: rotate(-33deg); -webkit-transform: rotate(-33deg); -ms-transform: rotate(-33deg); } #angle_e{ top:49px; left:-35px; -moz-transform: rotate(23deg); -webkit-transform: rotate(23deg); -ms-transform: rotate(23deg); } #angle_f{ top:87px; left:9px; -moz-transform: rotate(-35deg); -webkit-transform: rotate(-35deg); -ms-transform: rotate(-35deg); } #angle_g{ top:47px; right:-34px; -moz-transform: rotate(-23deg); -webkit-transform: rotate(-23deg); -ms-transform: rotate(-23deg); } #angle_h{ top:86px; right:8px; -moz-transform: rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); } #angle_i{ height:20px; width:20px; top:85px; left:-5px; } #angle_j{ height:20px; width:20px; top:85px; right:-4px; } .small_star{ height:104px; width:104px; background:#FFFF00; position:absolute; } .small_star .small_tool{ background:#FF0000; height:40px; width:60px; position:absolute; overflow:hidden; } .small_star .angle_a{ top:-12px; left:-4px; -moz-transform: rotate(20deg); -webkit-transform: rotate(20deg); -ms-transform: rotate(20deg); } .small_star .angle_aa{ top:-3px; left:-14px; } .small_star .angle_b{ top:-12px; right:-4px; -moz-transform: rotate(-20deg); -webkit-transform: rotate(-20deg); -ms-transform: rotate(-20deg); } .small_star .angle_bb{ top:-3px; right:-14px; } .small_star .angle_c{ top:24px; left:-22px; -moz-transform: rotate(34deg); -webkit-transform: rotate(34deg); -ms-transform: rotate(34deg); } .small_star .angle_d{ top:24px; right:-22px; -moz-transform: rotate(-33deg); -webkit-transform: rotate(-33deg); -ms-transform: rotate(-33deg); } .small_star .angle_e{ top:32px; left:-20px; -moz-transform: rotate(20deg); -webkit-transform: rotate(20deg); -ms-transform: rotate(20deg); } .small_star .angle_f{ top:60px; left:9px; -moz-transform: rotate(-35deg); -webkit-transform: rotate(-35deg); -ms-transform: rotate(-35deg); } .small_star .angle_g{ top:31px; right:-20px; -moz-transform: rotate(-20deg); -webkit-transform: rotate(-20deg); -ms-transform: rotate(-20deg); } .small_star .angle_h{ top:60px; right:8px; -moz-transform: rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); } .small_star .angle_i{ height:45px; width:115px; top:65px; left:-5px; } .small_star .angle_j{ height:45px; width:25px; top:65px; right:-4px; } #flag_bg .star{ height:40px; width:40px; position:relative; overflow:hidden; } #one{ top:20px; left:160px; } #two{ top:35px; left:194px; } #three{ top:60px; left:190px; } #four{ top:65px; left:145px; } #small_one,#small_two,#small_three,#small_four{ margin-left:-30px; margin-top:-24px; } </style> </head> <body> <div id="stage"> <div class="container"> <!---五星红旗部分--> <div id="flag_bg"> <div id="big_star" class=""> <div id="angle_a" class="big_tool"></div> <div id="angle_aa" class="big_tool"></div> <div id="angle_b" class="big_tool"></div> <div id="angle_bb" class="big_tool"></div> <div id="angle_c" class="big_tool"></div> <div id="angle_d" class="big_tool"></div> <div id="angle_e" class="big_tool"></div> <div id="angle_f" class="big_tool"></div> <div id="angle_g" class="big_tool"></div> <div id="angle_h" class="big_tool"></div> <div id="angle_i" class="big_tool"></div> <div id="angle_j" class="big_tool"></div> </div> <div id="one" class="star"> <div id="small_one" class="small_star"> <div class="angle_a small_tool"></div> <div class="angle_aa small_tool"></div> <div class="angle_b small_tool"></div> <div class="angle_bb small_tool"></div> <div class="angle_c small_tool"></div> <div class="angle_d small_tool"></div> <div class="angle_e small_tool"></div> <div class="angle_f small_tool"></div> <div class="angle_g small_tool"></div> <div cl.........完整代码请登录后点击上方下载按钮下载查看
网友评论0