148 views
1.notification { 2 width: 250px; 3 height: 60px; 4 color: black; 5 background: white; 6 border-radius: 3px; 7 display: grid; 8 grid-auto-flow: column; 9 align-items: center; 10 justify-items: center; 11 -webkit-animation-name: pulse; 12 animation-name: pulse; 13 -webkit-animation-duration: 1s; 14 animation-duration: 1s; 15 -webkit-animation-fill-mode: both; 16 animation-fill-mode: both; 17 animation-iteration-count: infinite; 18 border: 3px solid #ece0b4; 19} 20 21.notification:hover button.ff3 { 22 background-color: #f4e0a6; 23} 24 25.notification:hover { 26 border-color: #f4e0a6; 27} 28 29.notification:hover .lvl { 30 border-color: #f4e0a6; 31} 32 33button.ff3 { 34 background-color: #ece0b4; 35 height: 100%; 36 display: flex; 37 align-items: center; 38 width: 100%; 39 justify-content: center; 40 flex-direction: column; 41 gap: 3px; 42 cursor: pointer; 43 border: 0; 44 transition: .5s; 45 font-weight: bold; 46} 47 48.lvl { 49 background: white; 50 padding: 6px; 51 border-radius: 100px; 52 border: 3px solid #ece0b4; 53 position: absolute; 54 left: -10px; 55 transform: scale(.8); 56 top: -10px; 57} 58 59@-webkit-keyframes pulse { 60 0% { 61 -webkit-transform: scale3d(1, 1, 1); 62 transform: scale3d(1, 1, 1); 63 } 64 65 50% { 66 -webkit-transform: scale3d(1.05, 1.05, 1.05); 67 transform: scale3d(1.05, 1.05, 1.05); 68 } 69 70 100% { 71 -webkit-transform: scale3d(1, 1, 1); 72 transform: scale3d(1, 1, 1); 73 } 74} 75 76@keyframes pulse { 77 0% { 78 -webkit-transform: scale3d(1, 1, 1); 79 transform: scale3d(1, 1, 1); 80 } 81 82 50% { 83 -webkit-transform: scale3d(1.05, 1.05, 1.05); 84 transform: scale3d(1.05, 1.05, 1.05); 85 } 86 87 100% { 88 -webkit-transform: scale3d(1, 1, 1); 89 transform: scale3d(1, 1, 1); 90 } 91} 92
MIT License