Django 포스팅
[CSS] 최신 트렌드를 반영한 이미지 애니메이션 효과 디자인 모음
Doyeon0430 | 2023년 07월 01일
이번시간에는 이미지에 마우스를 올릴 때 반응하는 애니메이션 효과를 소개하겠습니다.
CSS에 호버 기능을 사용했으며 최신 디자인 트렌드를 반영해 제작했습니다.
이미지에 다양한 효과를 넣어 동적인 텍스트를 보여주겠습니다.
-
이미지 애니메이션 효과 - 사라지는 텍스트 디자인
-
이미지 애니메이션 효과 - 180도 회전하는 텍스트 디자인
-
이미지 애니메이션 효과 - 확대시키는 텍스트 디자인
-
이미지 애니메이션 효과 - 갈라지는 텍스트 디자인
1. 이미지 애니메이션 효과 - 사라지는 텍스트 디자인
첫 번째는 이미지에 마우스를 가져다 대면 배경이 사라지고 텍스트가 나타나는 애니메이션 효과입니다.
서서히 나타나면서 사라지도록 transition에 ease-in-out으로 타이밍 함수를 입력했습니다.
filter에 brightness를 넣으면 이미지 앞에 텍스트를 강조할 수 있습니다.
2. 이미지 애니메이션 효과 - 180도 회전하는 텍스트 디자인
두 번째는 이미지에 마우스를 가져다 대면 180도 회전해서 텍스트를 보여주는 애니메이션 효과입니다.
rotateY를 사용해 180도로 뒤집고 텍스트가 나타나게 넣어줬습니다.
transform-style에 preserve-3d를 입력해서 3D 효과를 생성해줬습니다.
3. 이미지 애니메이션 효과 - 확대시키는 텍스트 디자인
세 번째는 이미지에 마우스를 가져다 대면 이미지를 확대하면서 텍스트를 나타내는 애니메이션 효과입니다.
첫 번째 이미지 애니메이션 효과와 비슷한 방식으로 scale을 추가했습니다.
transition에 opacity와 filter를 넣어 자연스러운 모션을 보여줍니다.
4. 이미지 애니메이션 효과 - 갈라지는 텍스트 디자인
네 번째는 이미지에 마우스를 가져다 대면 위랑 아래로 갈라지고 텍스트가 나타나는 애니메이션 효과입니다.
before과 after를 만들어주고 overflow를 hidden으로 설정해서 감춰줍니다.
clip-path에 polygon으로 직사각형에 각도를 조절할 수 있습니다.
댓글 (14)
Anthonylib
Dear Sir,
Discover the future of earning through our groundbreaking AI-powered Passive Income System! This innovative solution offers you an effortless way to generate passive income by leveraging the power of Artificial Intelligence to identify and capitalize on lucrative opportunities in real-time. Whether you're new to passive income or looking to diversify your portfolio, our system is designed to maximize returns with minimal effort on your part. Experience the simplicity of setting up, the thrill of watching your earnings grow, and the peace of mind that comes with secure, AI-driven investments. Don't miss out on this chance to transform your financial future. Contact us now to learn more and embark on your journey to financial freedom with AI!
learn More: https://hornoselectricos.online/PayPerCallAI/
Best regards,
Bill Cooper.
24/02/08 21:48 |
Anthonylib
Dear Sir,
Discover the future of earning through our groundbreaking AI-powered Passive Income System! This innovative solution offers you an effortless way to generate passive income by leveraging the power of Artificial Intelligence to identify and capitalize on lucrative opportunities in real-time. Whether you're new to passive income or looking to diversify your portfolio, our system is designed to maximize returns with minimal effort on your part. Experience the simplicity of setting up, the thrill of watching your earnings grow, and the peace of mind that comes with secure, AI-driven investments. Don't miss out on this chance to transform your financial future. Contact us now to learn more and embark on your journey to financial freedom with AI!
learn More: https://hornoselectricos.online/PayPerCallAI/
Best regards,
Bill Cooper.
24/02/08 21:48 |
Anthonylib
Dear Sir,
Discover the future of earning through our groundbreaking AI-powered Passive Income System! This innovative solution offers you an effortless way to generate passive income by leveraging the power of Artificial Intelligence to identify and capitalize on lucrative opportunities in real-time. Whether you're new to passive income or looking to diversify your portfolio, our system is designed to maximize returns with minimal effort on your part. Experience the simplicity of setting up, the thrill of watching your earnings grow, and the peace of mind that comes with secure, AI-driven investments. Don't miss out on this chance to transform your financial future. Contact us now to learn more and embark on your journey to financial freedom with AI!
learn More: https://hornoselectricos.online/PayPerCallAI/
Best regards,
Bill Cooper.
24/02/08 21:48 |
EdwardSkale
Did you know about the new AI capabilities?
Use them for your business before your competitors do.
https://www.youtube.com/watch?v=cz2A9q9PVuU
24/02/10 19:37 |
EdwardSkale
Did you know about the new AI capabilities?
Use them for your business before your competitors do.
https://www.youtube.com/watch?v=cz2A9q9PVuU
24/02/10 19:37 |
EdwardSkale
Did you know about the new AI capabilities?
Use them for your business before your competitors do.
https://www.youtube.com/watch?v=cz2A9q9PVuU
24/02/10 19:37 |
RandyPyday
It's Finally Possible To Get Top Quality Buyer Clicks For Just Mere Pennies!
See Some Of Our Customer Success Stories Below.
https://www.youtube.com/watch?v=nYSUrBJ0RMk
24/02/13 00:01 |
RandyPyday
It's Finally Possible To Get Top Quality Buyer Clicks For Just Mere Pennies!
See Some Of Our Customer Success Stories Below.
https://www.youtube.com/watch?v=nYSUrBJ0RMk
24/02/13 00:01 |
RandyPyday
It's Finally Possible To Get Top Quality Buyer Clicks For Just Mere Pennies!
See Some Of Our Customer Success Stories Below.
https://www.youtube.com/watch?v=nYSUrBJ0RMk
24/02/13 00:02 |
GeorgeMow
Hack] Unique A.I. App Makes Us $635/Day
https://www.youtube.com/watch?v=z0aiLF3Sz7E
24/02/15 18:44 |
RonaldDot
FlipBooks are a great addition
to any passive income strategy. Because once you create a FlipBook, market it, share it & Earn it, it can technically sell itself.
Learn More https://www.youtube.com/watch?v=A9ai7ey85dE
10835
24/03/17 16:22 |
RonaldDot
FlipBooks are a great addition
to any passive income strategy. Because once you create a FlipBook, market it, share it & Earn it, it can technically sell itself.
Learn More https://www.youtube.com/watch?v=A9ai7ey85dE
10835
24/03/17 16:22 |
RonaldDot
FlipBooks are a great addition
to any passive income strategy. Because once you create a FlipBook, market it, share it & Earn it, it can technically sell itself.
Learn More https://www.youtube.com/watch?v=A9ai7ey85dE
10835
24/03/17 16:22 |
간편 댓글 작성
