비전공자 개발일기

.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; } }

Loading Animation .loader-wrapper { width: 60px; height:60px; } .loader { box-sizing: border-box; width: 100%; height: 100%; border: 10px solid #162534; border-top-color: #4bc8eb; border-bottom-color: #f13a8f; border-radius: 50%; animation: rotate 5s linear infinite; } .loader-inner { border-top-color: #36f372; border-bottom-color: #fff; animation-duration: 2.5s; } @keyframes rotate { 0%{ transf..

.toggle-switch, .toggle-switch .toggle-knob { -moz-transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .toggle-switch { height: 30px; width: 55px; display: inline-block; background-color: #ffffff; margin: 2px; margin-bottom: 5px; border-radius: 30px; cursor: pointer; border: solid 1px #d2d6de; box-shadow: inset 1px ..

색깔 이미지 항목명 값 색깔 이미지

특정 클래스 존재 유무에 따른 jQuery 실행문 예시 BOX1 BOX2 BOX3