Card by ZeroKaarma
This card was created for Open-Source CSS Odyssey
#212121
1.card { 2 width: 190px; 3 height: 254px; 4 background: #8749D5; 5 box-shadow: 7px 5px 10px rgba(0, 0, 0, 0.333); 6 border-radius: 10px; 7 background-image: linear-gradient(#8A65B9,#8957C7,#8749D5,#863BE3,#852DF1); 8 animation: gradient 5s ease infinite; 9} 10 11.heading { 12 padding-top: 6px; 13 font-weight: bold; 14 display: flex; 15 flex-direction: column; 16 justify-content: center; 17 align-items: center; 18} 19 20.heading span { 21 font-size: 2em; 22 font-weight: 800; 23 text-decoration: underline; 24 animation: light 2s infinite ease-out; 25} 26 27.item--create:hover { 28 animation: rotate 1s; 29} 30 31.item--post:hover { 32 animation: rotate 1s; 33} 34 35.item--inspire:hover { 36 animation: rotate 1s; 37} 38 39@keyframes rotate { 40 0% { 41 transform: rotateY(180deg); 42 } 43 44 100% { 45 transform: rotateY(360deg); 46 } 47} 48 49.content { 50 width: 189px; 51 height: 130px; 52 border-radius: 10px; 53 display: flex; 54 flex-direction: column; 55 align-items: center; 56 justify-content: center; 57} 58 59.content span { 60 animation: light 2s infinite ease-out; 61} 62 63.item { 64 padding-bottom: 6px; 65} 66 67@keyframes light { 68 0% { 69 transform: translateY(0px); 70 opacity: 1; 71 } 72 73 50% { 74 opacity: .5; 75 transform: translateY(-5px); 76 } 77 78 100% { 79 opacity: 1; 80 transform: translateY(0px); 81 } 82} 83 84button { 85 margin-left: 5px; 86 width: 13em1; 87 height: 4.2em; 88 background-image: linear-gradient(#8A65B9,#8957C7,#8749D5,#863BE3,#852DF1); 89 border: 0.08em solid #852DF1; 90 border-radius: 0.3em; 91 font-size: 10px; 92 position: relative; 93 display: flex; 94 justify-content: center; 95 align-items: center; 96 bottom: 15; 97 width: 180px; 98 height: 50px; 99 border-radius: 0.2em; 100 font-size: 15px; 101 color: #fff; 102 font-weight: bold; 103 border: 0.08em solid #C4ACE2; 104 box-shadow: 0 0.4em 0.2em 0.022em #B597DB; 105} 106 107button:hover { 108 transition: all 0.5s; 109 transform: translate(0, 0.4em); 110 box-shadow: 0 0 0 0 #fff; 111} 112 113button:not(hover) { 114 transition: all 1s; 115} 116 117@keyframes gradient { 118 0% { 119 background-position: 0 50%; 120 box-shadow: 0px 0px 2px #C4ACE2, 121 0px 0px 5px #B597DB, 122 0px 0px 10px #8749D5, 123 0px 0px 50px #852DF1; 124 } 125 126 50% { 127 background-position: 100% 50%; 128 box-shadow: 0px 0px 2px #C4ACE2, 129 0px 0px 5px #B597DB, 130 0px 0px 10px #8A65B9, 131 0px 0px 50px #8957C7; 132 } 133 134 100% { 135 background-position: 0 50%; 136 box-shadow: 0px 0px 2px #ffffff, 137 0px 0px 5px #B597DB, 138 0px 0px 10px #8749D5, 139 0px 0px 50px #852DF1; 140 } 141} 142 143
455 views
455 views
MIT License