Web/HTML | CSS|JAVASCRIPT14 자바스크립트를 사용하지 않은 슬라이드 이미지 만들기(HTML, CSS) html> lang="en"> class="container"> 2020. 7. 21. transfrom, keyframes 도형 회전하기(HTML, CSS) DOCTYPE html> Document *{ margin: 0; padding: 0; box-sizing: border-box; } .wi{ justify-content: center; align-items: center; width: 100%; height: 100%; top: 50%; left: 50%; background-color: #6e6438; position: absolute; transform: translate(-50%, -50%); display: flex; } .box{ width: 200px; height: 200px; animation: rotate 2.5s infinite; background: linear-gradient(to right, rgb(90, 92, 231) 50%.. 2020. 7. 18. hover, transition를 이용한 버튼 (HTML, CSS) DOCTYPE html> Document *{ margin: 0; padding: 0; box-sizing: border-box; } .container{ display: flex; justify-content: center; align-items: center; height: 100vh; background-color: rgb(54, 52, 42); } .btn{ font-size: 20px; font-weight: bold; letter-spacing: 4px; text-transform: uppercase; padding: 30px 35px; background-color: transparent; color: rgba(68, 177, 26, 0.678); border: 3px solid rgb(25.. 2020. 7. 18. hover, keyframes를 이용한 버튼(HTML, CSS) DOCTYPE html> Document body{ margin: 0; padding: 0; background: #000; } .container { width: 100%; height : 100vh; display:flex; align-items: center; justify-content: center; } button{ position: relative; cursor: pointer; border: none; width: 500px; height: 200px; border-radius: 60px; background: linear-gradient(90deg, #ff00d9, #ff0000, #fda502, #ff00d9); background-size: 300%; color:#fff; font-s.. 2020. 7. 15. 이전 1 2 3 4 다음
