반응형
이미지 시계 방향 회전 css
@keyframes rotate-clockwise {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg); --"역시계로 설정 할 경우 -360"--
}
}
.rotating-image-clockwise {
animation: rotate-clockwise 3s linear infinite;
} --"속도 조절은 3s에서 숫자를 변경"--심장박동 css
@keyframes heartbeat {
0% {
transform: scale(1);
}
25% {
transform: scale(1.2);
}
50% {
transform: scale(1);
}
75% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
} --"숫자 1은 1배 크기(기본크기), 1.2는 1.2배 크기"--
.heartbeat-image {
animation: heartbeat 1s ease-in-out infinite;
} --"속도는 1s에서 숫자 변경"--
<!DOCTYPE html>
<html>
<head>
<title>중앙 겹침 이미지</title>
<style>
.image-container {
position: relative;
width: 200px; /* 이 값을 조정하여 컨테이너의 크기를 조절하세요 */
height: 200px; /* 이 값을 조정하여 컨테이너의 크기를 조절하세요 */
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: auto;
}
.image-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@keyframes rotate-clockwise {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.rotating-image-clockwise {
animation: rotate-clockwise 3s linear infinite;
}
@keyframes rotate-counterclockwise {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}
.rotating-image-counterclockwise {
animation: rotate-counterclockwise 3s linear infinite;
}
@keyframes heartbeat {
0% {
transform: scale(1);
}
25% {
transform: scale(1.2);
}
50% {
transform: scale(1);
}
75% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
.heartbeat-image {
animation: heartbeat 1s ease-in-out infinite;
}
</style>
</head>
<body>
<div class="image-container">
<img src="https://blog.kakaocdn.net/dn/bfqynU/btsDd5ckh67/eTq6qIcQkXlMH3co7doxj0/img.png" class="rotating-image-clockwise">
<img src="https://blog.kakaocdn.net/dn/bvGbVg/btsDfnwNl2y/rURUE1bzTS0OAvewrVprs1/img.png" class="rotating-image-counterclockwise">
<img src="https://blog.kakaocdn.net/dn/lchty/btsDiRDB8DG/3fb9k0VAADDBWVhZjUWQ7k/img.png" class="heartbeat-image">
</div>
</body>
</html>
반응형
사업자 정보 표시
주식회사 엠크릿 | 황정우 | 경남 양산시 양산역로 75, 6층 | 사업자 등록번호 : 621-86-10667 | TEL : 055-364-3363 | Mail : min02299@naver.com | 통신판매신고번호 : 제2017-경남양산-00167호 | 사이버몰의 이용약관 바로가기
'워드프레스' 카테고리의 다른 글
| 워드프레스 아이콘 보이지 않는 문제 해결: Font Awesome CDN 링크 추가 (0) | 2024.01.22 |
|---|---|
| 워드프레스 - 버튼을 누르면 팝업이 나타나게 만들기 (0) | 2024.01.19 |
| 워드프레스에서 맞춤형 스크롤 박스 만들기 (2) | 2024.01.05 |
| 워드프레스 Icon Class 아이콘 클래스 찾아서 넣기 (플러그인 없음) (0) | 2023.04.12 |
| 워드프레스 호스팅어 메일 설정 WordPress SMTP플러그인 사용 (0) | 2023.04.07 |