728x90 keyframes4 [SCSS] 지나가는 전광판 만들기 슬라이드 팝업창 생성하고 수정하기 HTML 놓치면 후회할 단종제품 💖80% 할인💖 SCSS// pop-up 슬라이드 팝업창.slide-pop { letter-spacing: 2px; font-size: 12px; position: relative; background-color: $main_color; display: inline-block; width: 100%; white-space: nowrap; .marquee-container { display: inline-block; animation: marquee 10s linear infinite; } .marquee .. 2024. 7. 2. [CSS] keyframes 속성 사용 @keyframes CSS에서 복잡한 애니메이션을 만들기 위해 사용된다.@keyframes animation-name { from { /* 초기 상태 */ } to { /* 최종 상태 */ }}/* 또는 */@keyframes animation-name { 0% { /* 초기 상태 */ } 100% { /* 최종 상태 */ }} @keyframes 규칙은 애니메이션의 이름과 함께 정의되며,각 단계는 애니메이션의 진행 비율(0%부터 100%까지) 또는 키워드(from, to)를 사용하여 정의할 수 있습니다.애니메이션 속성들 애니메이션을 적용하기 위해 다음과 같은 CSS 속성을 사용합니다..element { animation-name: animation-name; an.. 2024. 6. 30. css : keyframes 남들과 다른 웹사이트 만들기 첫번째 웹사이트에 애니메이션 효과를 어떻게 줄까? | css : keyframes 남들과 다른 웹사이트 만들기 첫번째 (youtube.com) 전체를 의미하는 섹션 하나 추가해주기.우선 전체 섹션에다가 색깔(이미지) 입혀줌백그라운드 이미지의 url 을 들고오게끔 함. 그냥 이미지와 달리background 이미지는안에 내용이 있어야 보여진다. 인위적으로 높이를 줘서 섹션이 보이도록 하기 그러면 배경화면 이미지가 보이게 된다.근데 틈이 있어서 살짝 거슬림= body 태그의 기본 스타일 때문.- 이걸 지워주면 된다.이미지 하나만으로 스크롤이 안되기 때문에 body 자체 사이즈를 늘려줌.배경화면 이미지를 가만히 있게 만들고 싶은 경우,fixed 스타일을 뒤에다가 주면 된다.= 이미지 고정시키기. - 스크롤 안 따라감... 2024. 6. 30. [2-2] 반응형 웹 사이트 구축하기 - 애니메이션 돌아가는 막대기 doorline 스타일 지정// 막대기 돌려주기 - keyframes 활용 - 만들고 해당 속성에 부여// keyframes 작성 방법 다양 - from 과 to 활용// 첫 번째 상태와 마지막 상태 지정// from 과 to 말고도 0% 와 100%로 치환하여 사용 가능.// 회전하니까 rotate 사용 - 0degree 에서 360degree 까지 360도 돌아가게@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}Keyfrmaes 를 먼저 생성해주고해당 속성에 부여한다.// - keyframes 작성해주고 animation 지.. 2024. 4. 24. 이전 1 다음 728x90
