#212121
1.notification { 2 position: relative; 3 font-family: "Lucida Console", "Courier New", monospace; 4 font-weight: 900; 5 letter-spacing: 5px; 6 text-transform: uppercase; 7} 8 9.start { 10 font-size: 20px; 11 letter-spacing: 3px; 12 text-shadow: 1px 1px 0 #000, 13 -1px -1px 0 #000, 14 1px -1px 0 #000, 15 -1px 1px 0 #000; 16 animation: animate4 5s forwards infinite ease-in-out; 17} 18 19.ribbon-content { 20 font-size: 35px; 21 text-shadow: 1.5px 1.5px 0 #680638, 22 -1.5px -1.5px 0 #680638, 23 1.5px -1.5px 0 #680638, 24 -1.5px 1.5px 0 #680638; 25} 26 27.ribbon { 28 position: relative; 29 width: 300px; 30 height: 50px; 31 line-height: 50px; 32 background-color: #CC014D; 33 color: #fff; 34 text-align: center; 35 font-size: 20px; 36} 37 38.ribbon::before, .ribbon::after { 39 content: ''; 40 position: absolute; 41 top: 20px; 42 border: 25px solid #DB0F5A; 43 z-index: -1; 44} 45 46.ribbon::before { 47 left: -30px; 48 border-left-color: transparent; 49} 50 51.ribbon::after { 52 right: -30px; 53 border-right-color: transparent; 54} 55 56.ribbon .ribbon-content:before, .ribbon .ribbon-content:after { 57 content: ''; 58 position: absolute; 59 border-style: solid; 60 bottom: -20px; 61} 62 63.ribbon .ribbon-content:before { 64 left: 0; 65 border-width: 0 20px 20px 0; 66 border-color: transparent #6B043A transparent transparent; 67} 68 69.ribbon .ribbon-content:after { 70 right: 0; 71 border-width: 20px 20px 0 0; 72 border-color: #6B043A transparent transparent transparent; 73} 74 75.star svg { 76 width: 100px; 77 height: 100px; 78} 79 80.star { 81 position: absolute; 82} 83 84.star1 { 85 top: -85px; 86 left: 0; 87 transform: rotate(-15deg); 88 animation: animate1 5s forwards infinite ease-in-out; 89} 90 91.star2 { 92 top: -100px; 93 left: 50%; 94 transform: translate(-50%); 95 animation: animate2 5s forwards infinite ease-in-out; 96} 97 98.star3 { 99 top: -85px; 100 left: 100%; 101 transform: translateX(-100%) rotate(15deg); 102 animation: animate3 5s forwards infinite ease-in-out; 103} 104 105@keyframes animate1 { 106 0% { 107 transform: rotate(-15deg) translateY(0); 108 } 109 110 25% { 111 transform: rotate(-15deg) translateY(10px); 112 } 113 114 50% { 115 transform: rotate(-15deg) translateY(0px); 116 } 117 118 75% { 119 transform: rotate(-5deg); 120 } 121 122 100% { 123 transform: rotate(-15deg); 124 } 125} 126 127@keyframes animate3 { 128 0% { 129 transform: translateX(-100%) translateY(0) rotate(15deg); 130 } 131 132 25% { 133 transform: translateX(-100%) translateY(10px) rotate(15deg); 134 } 135 136 50% { 137 transform: translateX(-100%) translateY(0) rotate(15deg); 138 } 139 140 75% { 141 transform: translateX(-100%) rotate(5deg); 142 } 143 144 100% { 145 transform: translateX(-100%) rotate(15deg); 146 } 147} 148 149@keyframes animate2 { 150 0% { 151 transform: translate(-50%) translateY(0); 152 } 153 154 25% { 155 transform: translate(-50%) translateY(10px); 156 } 157 158 50% { 159 transform: translate(-50%) translateY(0px) scale(1); 160 } 161 162 75% { 163 transform: translate(-50%) scale(1.1); 164 } 165 166 100% { 167 transform: translate(-50%) scale(1); 168 } 169} 170 171@keyframes animate4 { 172 50% { 173 transform: scale(1); 174 } 175 176 75% { 177 transform: scale(1.1); 178 } 179 180 100% { 181 transform: scale(1); 182 } 183}
1.2K views
1.2K views
Comments
1Crane1043778796 17. October at 10:50
17. October at 10:50
how to make it comes to 2 stars
MIT License