목록css3 (310)

비전공자 개발일기

TEXT OVERFLOW & LOADING ANIMATION

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..
HTML _CSS 2022. 4. 17. 01:35
filter() Animation

.blob { width: 150px; height: 150px; animation: hue-animation 5s alternate infinite; } @keyframes hue-animation { 100% { filter: hue-rotate(360deg); } }
HTML _CSS 2022. 4. 16. 00:22
Card Animation

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)..
HTML _CSS 2022. 4. 15. 00:35
Button Purse AniMation

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; } }
HTML _CSS 2022. 4. 14. 00:20
Bell Animation

HTML _CSS 2022. 4. 13. 00:51
Loading Animation

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..
HTML _CSS 2022. 4. 12. 00:27
이전 Prev 1 ··· 36 37 38 39 Next 다음