Card by NotReal22
#212121
1.card-2 { 2 position: relative; 3 width: 300px; 4 height: 400px; 5 background-image: linear-gradient(to top,rgb(117, 117, 197),#67be96); 6 border-radius: 30px; 7 border: 2px solid white; 8 overflow: hidden; 9} 10 11.h1-circle { 12 position: absolute; 13 right: 70px; 14 border-radius: 50%; 15 width: 400px; 16 height: 400px; 17 background-image: radial-gradient(circle at center, #8798c5, #494fa1); 18 opacity: .8; 19} 20 21.card-2:hover .h1-circle, 22.h1-circle:hover { 23 animation: moving-weel 1s linear; 24 animation-fill-mode: forwards; 25} 26 27.h1-circle:not(:hover) { 28 animation: moving-weel-2 1s linear; 29 animation-fill-mode: backwards; 30} 31 32@keyframes moving-weel-2 { 33 0% { 34 rotate: 160deg; 35 right: -170px; 36 } 37 38 50% { 39 right: 20px; 40 rotate: 75deg; 41 } 42 43 100% { 44 rotate: 0deg; 45 } 46} 47 48@keyframes moving-weel { 49 0% { 50 rotate: 0deg; 51 } 52 53 50% { 54 right: 20px; 55 rotate: 90deg; 56 } 57 58 100% { 59 rotate: 180deg; 60 right: -170px; 61 } 62} 63 64.h1-circle ul li { 65 list-style: none; 66 color: white; 67 font-size: 20px; 68 margin: 20px; 69} 70 71#h1-circle-ul-1 { 72 display: flex; 73 flex: 1; 74 flex-direction: column; 75 position: absolute; 76 top: 100px; 77 left: 200px; 78 transition: 500ms ease-in; 79} 80 81#h1-circle-ul-2 { 82 opacity: 0; 83 flex: 1; 84 flex-direction: column; 85 position: absolute; 86 top: 100px; 87 left: 200px; 88 transition: 1s ease-in; 89} 90 91#h1-circle-ul-2 li { 92 transform: rotate(180deg); 93 font-size: 20px; 94 margin: 30px; 95} 96 97#card-2-h1 { 98 position: absolute; 99 left: 60px; 100 top: 10px; 101 color: transparent; 102 font-size: 40px; 103 font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; 104 z-index: 700; 105 background: linear-gradient(to bottom right, transparent, white 90%),rgb(117, 190, 117); 106 -webkit-background-clip: text; 107 background-clip: text; 108 text-transform: uppercase; 109 transition: 1s ease-in; 110} 111 112.card-2:hover #h1-circle-ul-2 { 113 opacity: 1; 114 transition: 1s ease-in; 115} 116 117.card-2:hover #h1-circle-ul-1 { 118 opacity: 0; 119 transition: 500ms ease-in; 120}
526 views
526 views
MIT License