Card by htwarriors108
This card was created for One <div> challenge
#212121
1.one-div { 2 background-color: #fff; 3 width: 190px; 4 height: 254px; 5 box-shadow: 0 0 0.5em rgba(255, 255, 255, 0.5); 6 border: 1px solid rgba(255, 255, 255, 0.6); 7 border-radius: 12px; 8 transition: 0.5s; 9 cursor: pointer; 10 transform: rotateX(-55deg) rotateY(15deg) rotateZ(60deg); 11 color: #fff; 12} 13 14.one-div:active { 15 scale: 1.1; 16 rotate: 5deg; 17} 18 19@keyframes animate { 20 0% { 21 opacity: 0.3; 22 } 23 24 80% { 25 opacity: 1; 26 } 27 28 100% { 29 opacity: 0.3; 30 } 31} 32 33.one-div:hover { 34 transform: rotate(0deg); 35 opacity: 1; 36} 37 38.one-div, .one-div::before { 39 background: linear-gradient(43deg, rgb(65, 88, 208) 0%, rgb(200, 80, 192) 46%, rgb(255, 204, 112) 100%); 40} 41 42.one-div::before { 43 content: ''; 44 width: 120%; 45 height: 110%; 46 z-index: -1; 47 position: absolute; 48 top: 50%; 49 left: 50%; 50 border-radius: 15px; 51 transform: translate(-50%, -50%); 52 filter: blur(30px); 53 animation: animate 5s linear infinite; 54} 55 56.one-div::after { 57 content: 'Hover Me'; 58 width: 100%; 59 height: 100%; 60 font-size: 2em; 61 font-weight: 800; 62 display: flex; 63 align-items: center; 64 justify-content: center; 65}
844 views
844 views
MIT License