CSS 키프레임 애니메이션 활용한 실전 퍼블리싱 03(더블 보더 레디어스 애니메이션)
이 글은 인프런의 "HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)" 강좌를 들으며 정리한 내용이다.
사각형 임의로 찌그러뜨리기
슬래시 이용함.
.square span {
position: absolute;
width: inherit;
height: inherit;
border: 1px solid #fff;
border-radius: 40% 60% 65% 35% / 40% 45% 55% 60%;//사각형 찌그러뜨림.
transition: 0.5s;
}애니메이션 역방향 설정
reverse 설정하면 됨
.square span:nth-child(2) {
animation: circle 4s linear infinite;
animation-direction: reverse;
}Author And Source
이 문제에 관하여(CSS 키프레임 애니메이션 활용한 실전 퍼블리싱 03(더블 보더 레디어스 애니메이션)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@seoyoung/CSS-키프레임-애니메이션-활용한-실전-퍼블리싱-03더블-보더-레디어스-애니메이션저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
