This notification was created for level-up-challenge145 views
CSSAdd prefixes
1.notification { 2 width: 250px; 3 height: 60px; 4 background: rgb(255, 255, 255); 5 border-radius: 14px; 6 position: relative; 7 border: 1px solid rgba(0, 0, 0, 0.377); 8} 9 10.shinner { 11 position: absolute; 12 width: 250px; 13 height: 60px; 14 overflow: hidden; 15 top: 0; 16 left: 0; 17 border-radius: 0.5rem; 18} 19 20.mover { 21 position: absolute; 22 border-top: 60px solid rgba(255, 255, 255, 0.4); 23 border-right: 30px solid transparent; 24 left: 50px; 25 filter: blur( 4px ); 26 animation: shine 2s infinite ease-in-out; 27} 28 29.mover2 { 30 content: ""; 31 position: absolute; 32 border-top: 60px solid rgba(255, 255, 255, 0.4); 33 border-left: 30px solid transparent; 34 transform: scaleY(-1); 35 left: 20px; 36 filter: blur( 4px ); 37 animation: shine2 2s infinite ease-in-out; 38} 39 40.levelup { 41 color: rgb(18, 175, 4); 42 text-align: center; 43 padding-top: 0.6rem; 44 font-weight: bolder; 45 font-size: 1.8rem; 46 z-index: 3; 47} 48 49.congrats { 50 font-family: cursive; 51 font-size: 1.5rem; 52 color: rgb(240, 240, 240); 53 text-align: center; 54 padding-top: 1rem; 55 text-shadow: 1px 4px 7px rgb(7, 7, 7); 56} 57 58.wing { 59 transform: translate(150px,-100px); 60 position: absolute; 61 z-index: -1; 62 animation: winganime 2s ease-in-out infinite; 63} 64 65.wing1 { 66 transform: translate(-30px,-100px) scaleX(-1); 67 position: absolute; 68 z-index: -1; 69 animation: winganime2 2s ease-in-out infinite; 70} 71 72.bg { 73 background: rgb(223, 223, 105); 74 width: 130px; 75 height: 130px; 76 position: absolute; 77 top: 50%; 78 right: 50%; 79 transform: translate(50%,-50%); 80 z-index: -2; 81 border-radius: 50%; 82 box-shadow: rgb(252, 255, 54,0.7) 0px 4px 105px, rgb(252, 255, 54,0.7) 0px -24px 130px, rgb(252, 255, 54,0.7) 0px 4px 446px, rgb(252, 255, 54,0.7) 0px 12px 13px, rgb(252, 255, 54,0.7) 0px -3px 5px; 83 animation: rot 2.5s infinite ease-in-out; 84 transform-origin: center; 85} 86 87@keyframes rot { 88 0% { 89 transform: translate(50%,-50%) rotate(0deg); 90 } 91 92 100% { 93 transform: translate(50%,-50%) rotate(360deg); 94 } 95} 96 97@keyframes winganime { 98 0% { 99 transform: translate(150px,-100px) rotateY(0deg); 100 } 101 102 50% { 103 transform: translate(150px,-95px) rotateY(25deg); 104 } 105 106 100% { 107 transform: translate(150px,-100px) rotateY(0deg); 108 } 109} 110 111@keyframes winganime2 { 112 0% { 113 transform: translate(-30px,-100px) rotateY(0deg) scaleX(-1); 114 } 115 116 50% { 117 transform: translate(-30px,-95px) rotateY(-25deg) scaleX(-1); 118 } 119 120 100% { 121 transform: translate(-30px,-100px) rotateY(0deg) scaleX(-1); 122 } 123} 124 125@keyframes shine { 126 0% { 127 left: -50px; 128 } 129 130 100% { 131 left: 300px; 132 } 133} 134 135@keyframes shine2 { 136 0% { 137 left: -20px; 138 } 139 140 100% { 141 left: 270px; 142 } 143}
HTML
1<div class="notification"> 2 <div class="shinner"> 3 <div class="mover"></div> 4 <div class="mover2"></div> 5 </div> 6 <svg version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" height="121.46" width="122.88" class="wing"> 7 <g> 8 <g id="svg_1"> 9 <path class="st0" d="m12.35,121.46c-8.01,-9.72 -11.92,-19.29 -12.31,-28.71c-0.82,-19.74 10.88,-34.47 28.26,-45.08c18.28,-11.16 37.08,-13.93 55.36,-22.25c9.13,-4.15 20.02,-10.95 38.14,-25.42c5.92,15.69 -12.92,40.9 -43.52,54.23c9.48,0.37 19.69,-2.54 30.85,-9.74c-0.76,19.94 -16.46,32.21 -51.3,36.95c7.33,2.45 16.09,2.58 27.27,-0.58c-10.77,35.95 -55.2,10.2 -72.75,40.6l0,0z" fill-rule="evenodd" clip-rule="evenodd" id="svg_2" fill="#fff"></path> 10 </g> 11 </g> 12</svg> 13 14<svg version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" height="121.46" width="122.88" class="wing1"> 15 <g> 16 <g id="svg_1"> 17 <path class="st0" d="m12.35,121.46c-8.01,-9.72 -11.92,-19.29 -12.31,-28.71c-0.82,-19.74 10.88,-34.47 28.26,-45.08c18.28,-11.16 37.08,-13.93 55.36,-22.25c9.13,-4.15 20.02,-10.95 38.14,-25.42c5.92,15.69 -12.92,40.9 -43.52,54.23c9.48,0.37 19.69,-2.54 30.85,-9.74c-0.76,19.94 -16.46,32.21 -51.3,36.95c7.33,2.45 16.09,2.58 27.27,-0.58c-10.77,35.95 -55.2,10.2 -72.75,40.6l0,0z" fill-rule="evenodd" clip-rule="evenodd" id="svg_2" fill="#fff"></path> 18 </g> 19 </g> 20</svg> 21 <div></div> 22 <p class="levelup">LEVEL UP!</p> 23 <p class="congrats">Congratulations!</p> 24 <div class="bg"></div> 25 26</div>