"Живые" фото стали достаточно популярны в последнее время, зачастую прибегают к использованию Gif-анимации, но хорошая картина получится достаточно тяжелой, по этому можно пойти другим путем, и реализовать интересную "живую" фотографию используя при этом исключительно трансформации CSS3.
Разметка HTML
<div class="da-container"> <img class="da-img background" src="изображение" /> <img class="da-img old-woman" src="изображение" /> <img class="da-img dying-girl" src="изображение" /> <img class="da-img standing-girl" src="изображение" /> <img class="da-img pillow" src="изображение" /> <img class="da-img spirit" src="изображение" /> </div>
CSS
.fa-container { left: 290px; position: relative; top: 100px; -webkit-transform-origin: 50% 0 0; -ms-transform-origin: 50% 0 0; transform-origin: 50% 0 0; -webkit-animation: fa-photo 12s ease-in-out 2s infinite alternate; -moz-animation: fa-photo 12s ease-in-out 2s infinite alternate; -ms-animation: fa-photo 12s ease-in-out 2s infinite alternate; -o-animation: fa-photo 12s ease-in-out 2s infinite alternate; animation: fa-photo 12s ease-in-out 2s infinite alternate; } .fa-img { position: absolute; } .fa-img.old-woman { -webkit-transform-origin: 165px 320px 0; -ms-transform-origin: 165px 320px 0; transform-origin: 165px 320px 0; -webkit-animation: fa-oldwoman 5s ease-in-out 2s infinite alternate; -moz-animation: fa-oldwoman 5s ease-in-out 2s infinite alternate; -ms-animation: fa-oldwoman 5s ease-in-out 2s infinite alternate; -o-animation: fa-oldwoman 5s ease-in-out 2s infinite alternate; animation: fa-oldwoman 5s ease-in-out 2s infinite alternate; } .fa-img.spirit { zoom: 1; filter: alpha(opacity=0); opacity: 0; -webkit-transform-origin: 560px 260px 0; -ms-transform-origin: 560px 260px 0; transform-origin: 560px 260px 0; -webkit-animation: fa-spirit 10s linear 6s 1 normal; -moz-animation: fa-spirit 10s linear 6s 1 normal; -ms-animation: fa-spirit 10s linear 6s 1 normal; -o-animation: fa-spirit 10s linear 6s 1 normal; animation: fa-spirit 10s linear 6s 1 normal; } .fa-img.standing-girl { -webkit-transform: translate(0, 0) rotate(0) scale(1, 1) skew(4deg, 0); -ms-transform: translate(0, 0) rotate(0) scale(1, 1) skew(4deg, 0); transform: translate(0, 0) rotate(0) scale(1, 1) skew(4deg, 0); -webkit-transform-origin: 90% 100% 0; -ms-transform-origin: 90% 100% 0; transform-origin: 90% 100% 0; -webkit-animation: fa-standing-girl 8s ease-in-out 2s infinite alternate; -moz-animation: fa-standing-girl 8s ease-in-out 2s infinite alternate; -ms-animation: fa-standing-girl 8s ease-in-out 2s infinite alternate; -o-animation: fa-standing-girl 8s ease-in-out 2s infinite alternate; animation: fa-standing-girl 8s ease-in-out 2s infinite alternate; } /* ************************************* */ /* Animations /* ************************************* */ @-webkit-keyframes fa-photo { 0% { -webkit-transform: translate(0, 0) rotate(0) scale(1, 1) skew(0, 0); -ms-transform: translate(0, 0) rotate(0) scale(1, 1) skew(0, 0); transform: translate(0, 0) rotate(0) scale(1, 1) skew(0, 0); } 100% { -webkit-transform: translate(0, 0) rotate(-4deg) scale(1, 1) skew(0, 0); -ms-transform: translate(0, 0) rotate(-4deg) scale(1, 1) skew(0, 0); transform: translate(0, 0) rotate(-4deg) scale(1, 1) skew(0, 0); } } @-webkit-keyframes fa-oldwoman { 0% { -webkit-transform: translate(0, 0) rotate(0) scale(1, 1) skew(0, 0); -ms-transform: translate(0, 0) rotate(0) scale(1, 1) skew(0, 0); transform: translate(0, 0) rotate(0) scale(1, 1) skew(0, 0); } 100% { -webkit-transform: translate(0, 0) rotate(12deg) scale(1.1, 1) skew(0, -12deg); -ms-transform: translate(0, 0) rotate(12deg) scale(1.1, 1) skew(0, -12deg); transform: translate(0, 0) rotate(12deg) scale(1.1, 1) skew(0, -12deg); } } @-webkit-keyframes fa-spirit { 0% { -webkit-transform: translate(0, 0) rotate(0) scale(1, 1) skew(0, 0); -ms-transform: translate(0, 0) rotate(0) scale(1, 1) skew(0, 0); transform: translate(0, 0) rotate(0) scale(1, 1) skew(0, 0); zoom: 1; filter: alpha(opacity=0); opacity: 0; } 50% { -webkit-transform: translate(-20px, -50px) rotate(12deg) scale(1, 1) skew(0, 0); -ms-transform: translate(-20px, -50px) rotate(12deg) scale(1, 1) skew(0, 0); transform: translate(-20px, -50px) rotate(12deg) scale(1, 1) skew(0, 0); zoom: 1; filter: alpha(opacity=100); opacity: 1; } 90% { -webkit-transform: translate(-30px, -90px) rotate(6deg) scale(1, 1) skew(0, 0); -ms-transform: translate(-30px, -90px) rotate(6deg) scale(1, 1) skew(0, 0); transform: translate(-30px, -90px) rotate(6deg) scale(1, 1) skew(0, 0); zoom: 1; filter: alpha(opacity=70); opacity: 0.7; } 100% { -webkit-transform: translate(-30px, -100px) rotate(6deg) scale(1, 1) skew(0, 0); -ms-transform: translate(-30px, -100px) rotate(6deg) scale(1, 1) skew(0, 0); transform: translate(-30px, -100px) rotate(6deg) scale(1, 1) skew(0, 0); zoom: 1; filter: alpha(opacity=0); opacity: 0; } } @-webkit-keyframes fa-standing-girl { 0% { -webkit-transform: translate(0, 0) rotate(0) scale(1, 1) skew(4deg, 0); -ms-transform: translate(0, 0) rotate(0) scale(1, 1) skew(4deg, 0); transform: translate(0, 0) rotate(0) scale(1, 1) skew(4deg, 0); } 100% { -webkit-transform: translate(0, 0) rotate(0) scale(1, 1) skew(-6deg, 4deg); -ms-transform: translate(0, 0) rotate(0) scale(1, 1) skew(-6deg, 4deg); transform: translate(0, 0) rotate(0) scale(1, 1) skew(-6deg, 4deg); } }
ПРОВЕРЕНО!
| View demo |
|
Понравился материал? Поделитесь с друзьями |
С этим материалом смотрят:
| Feedback: 0 | |