비전공자 개발일기

Text Hover Effect TEXT HOVER EFFEECT Shake On Invaild Input /* Text Hover Effect */ .link { text-align: center; font-size: 30px; color: #6667ab; margin: 40%; line-height: 150px; background-image: linear-gradient(#ff2f97, #ff2f97); background-repeat: no-repeat; background-size: 0 100%; background-position-x: right; transition: background-size 500ms; } .link:hover { background-size: 100% 100%; bac..

MENU body { background-color: #000; } .menu_btn { width: 100px; height: 40px; position: relative; color: #808080; margin: 20%; background-color: #000; border: 1px solid #808080; border-radius: 5px; transition: all 1s; } .menu_btn:hover { color: #000; border-color: #000; background-color: #fff; font-weight: 700; } .menu_btn::before { content: ""; position: absolute; top: 80%; left: 0; width: 100p..

.motion { width: 200px; height: 200px; border-radius: 50%; position: relative; display: flex; justify-content: center; align-items: center; } .circle { width: 100px; height: 100px; border: 1px solid #6667ab; position: absolute; border-radius: 50%; animation: circleAnimation 2s linear infinite; } .circle::before { content: ""; position: absolute; top: -10px; left: 50%; transform: translateX(-50%)..

Mac iPad iPhone * { font-size: 50px; } .list { list-style: none; text-align: center; } .link { display: inline-block; margin-block: 2px; text-decoration: none; color: #2598eb; position: relative; } .link::after { content:""; width: 100%; height: 1px; background-color: #6667ab; border-radius: 4px; position: absolute; left: 0; bottom: 0; transform: scaleX(0); transform-origin: left; transition: tr..

TEXT OVERFLOW What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchang..

.blob { width: 150px; height: 150px; animation: hue-animation 5s alternate infinite; } @keyframes hue-animation { 100% { filter: hue-rotate(360deg); } }

K * { margin: 100px auto; } .card { background: #5ce1e6; font-size: 50px; width: 100px; height: 100px; border-radius: 4px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 7px 0 rgb(211,247,248), 0 6px 15px 0 rgb(189, 243, 245); animation: rotate 5s cubic-bezier(.54, .13, .30, .87) } @keyframes rotate { 0% {transform: rotateY(0turn)} 100% {transform: rotateY(10turn)..

Learn More .button { display: inline-block; color: #3c67e3; text-decoration: none; padding: 20px 50px; border: 3px solid #3c67e3; border-radius: 10px; } .button:hover { animation: pulsate 1s ease-in-out; } @keyframes pulsate { 0% { box-shadow: 0 0 25px #5ddcff, 0 0 50px #4e00c2; } }