В этой статье я покажу как создать анимированную CSS открытку на 14 февраля. При создании CSS открытки используются keyframes анимация и свойство transform CSS.
Подготавливаем изображения.
- Распахнутое окно.
Раму распахнутого окна можно элементарно нарисовать в Фотошопе, можно скачать на фотостоке.
Берём любое изображение раскрытого окна и открываем его в Фотошопе.
Вырезаем раму, остальное удаляем.
Берём изображение прозрачного облака и вставляем его в «распахнутое окно».
Сохраняем файл в формате png под названием rama.
- Амур. Картинку ангела или амура можно скачать на любом фотостоке или нарисовать самим. Картинка тоже должна быть в формате png.
- Букет. Где взять изображение букета, я думаю вопросов нет. Вырезаем букет, удаляем фон, и сохраняем картинку в формате png.
- Сердце с надписью рисуем в фотошопе.
- Фон стены также рисуем в фотошопе.
Пишем коды.
В index.html делаем разметку.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css" />
<title>CSS открытка на 14 февраля</title>
</head>
<body>
<div class="wrapper">
<div id="amur">
<img src="images/angel2.png" />
</div>
<div id="fade">
<img src="images/fiore.png" />
</div>
<div id="heart">
<img src="images/heart.png" />
</div>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css" />
<title>CSS открытка на 14 февраля</title>
</head>
<body>
<div class="wrapper">
<div id="amur">
<img src="images/angel2.png" />
</div>
<div id="fade">
<img src="images/fiore.png" />
</div>
<div id="heart">
<img src="images/heart.png" />
</div>
</div>
</body>
</html>
В style.css пишем стили.
body{
background:#B65F34 url(images/fon.jpg) fixed;
}
.wrapper {
margin: 0 auto;
width: 1000px;
margin-top: 0;
height: 720px;
overflow: hidden;
background: #109dff url(images/rama.png) no-repeat;
animation-name: fon;
animation-duration: 7s;
box-shadow: 0px 0px 15px #000;
-webkit-box-shadow: 0px 0px 10px #000;
-moz-box-shadow: 0px 0px 10px #000;
}
@keyframes fon {
0% {background: #040d63}
100% {background: #109dff ;
height: 720px;}
}
#amur img{
margin-left: 450px;
margin-top: 300px;
transform:scale(1.5);
-webkit-transform:scale(1.5);
-moz-transform:scale(1.5);
-o-transform:scale(1.5);
opacity: 0;
animation-name: amur;
animation-duration: 7s;
animation-iteration-count: 1;
}
@keyframes amur {
0% {
margin-left: 900px;
margin-top:0px;
transform:scale(0);
-webkit-transform:scale(0);
-moz-transform:scale(0);
-o-transform:scale(0);
}
50%{
opacity:1;
}
100%{
margin-left: 450px;
margin-top: 300px;
transform:scale(1.5);
-webkit-transform:scale(1.5);
-moz-transform:scale(1.5);
-o-transform:scale(1.5);
opacity: 0;}
}
#fade img{
position: relative;
margin-left: 250px;
margin-top: -450px;
animation-name: fade;
animation-duration: 7s;
animation-iteration-count: 1;
}
@keyframes fade {
0% {
opacity: 0;
-webkit-transform:scale(0);
-moz-transform:scale(0);
-o-transform:scale(0);
}
50% {
opacity: 0
}
100%{
opacity:1;
-webkit-transform:scale(1);
-moz-transform:scale(1);
-o-transform:scale(1);}
}
#heart img {
position: relative;
margin-left: 350px;
margin-top: -500px;
animation-name: heart;
animation-duration: 9s;
animation-iteration-count: 1;
}
@keyframes heart {
0% {
opacity: 0;
-webkit-transform:scale(0);
-moz-transform:scale(0);
-o-transform:scale(0);
}
40% {
-webkit-transform:scale(1);
-moz-transform:scale(1);
-o-transform:scale(1);
}
50% {
opacity: 0;
-webkit-transform:scale(0.5);
-moz-transform:scale(0.5);
-o-transform:scale(0.5);
}
60% {
-webkit-transform:scale(1);
-moz-transform:scale(1);
-o-transform:scale(1);
}
70% {
-webkit-transform:scale(0.5);
-moz-transform:scale(0.5);
-o-transform:scale(0.5);
}
80% {
-webkit-transform:scale(1);
-moz-transform:scale(1);
-o-transform:scale(1);
}
90% {
-webkit-transform:scale(0.5);
-moz-transform:scale(0.5);
-o-transform:scale(0.5);
}
100%{opacity:1;
-webkit-transform:scale(1);
-moz-transform:scale(1);
-o-transform:scale(1);}
}
background:#B65F34 url(images/fon.jpg) fixed;
}
.wrapper {
margin: 0 auto;
width: 1000px;
margin-top: 0;
height: 720px;
overflow: hidden;
background: #109dff url(images/rama.png) no-repeat;
animation-name: fon;
animation-duration: 7s;
box-shadow: 0px 0px 15px #000;
-webkit-box-shadow: 0px 0px 10px #000;
-moz-box-shadow: 0px 0px 10px #000;
}
@keyframes fon {
0% {background: #040d63}
100% {background: #109dff ;
height: 720px;}
}
#amur img{
margin-left: 450px;
margin-top: 300px;
transform:scale(1.5);
-webkit-transform:scale(1.5);
-moz-transform:scale(1.5);
-o-transform:scale(1.5);
opacity: 0;
animation-name: amur;
animation-duration: 7s;
animation-iteration-count: 1;
}
@keyframes amur {
0% {
margin-left: 900px;
margin-top:0px;
transform:scale(0);
-webkit-transform:scale(0);
-moz-transform:scale(0);
-o-transform:scale(0);
}
50%{
opacity:1;
}
100%{
margin-left: 450px;
margin-top: 300px;
transform:scale(1.5);
-webkit-transform:scale(1.5);
-moz-transform:scale(1.5);
-o-transform:scale(1.5);
opacity: 0;}
}
#fade img{
position: relative;
margin-left: 250px;
margin-top: -450px;
animation-name: fade;
animation-duration: 7s;
animation-iteration-count: 1;
}
@keyframes fade {
0% {
opacity: 0;
-webkit-transform:scale(0);
-moz-transform:scale(0);
-o-transform:scale(0);
}
50% {
opacity: 0
}
100%{
opacity:1;
-webkit-transform:scale(1);
-moz-transform:scale(1);
-o-transform:scale(1);}
}
#heart img {
position: relative;
margin-left: 350px;
margin-top: -500px;
animation-name: heart;
animation-duration: 9s;
animation-iteration-count: 1;
}
@keyframes heart {
0% {
opacity: 0;
-webkit-transform:scale(0);
-moz-transform:scale(0);
-o-transform:scale(0);
}
40% {
-webkit-transform:scale(1);
-moz-transform:scale(1);
-o-transform:scale(1);
}
50% {
opacity: 0;
-webkit-transform:scale(0.5);
-moz-transform:scale(0.5);
-o-transform:scale(0.5);
}
60% {
-webkit-transform:scale(1);
-moz-transform:scale(1);
-o-transform:scale(1);
}
70% {
-webkit-transform:scale(0.5);
-moz-transform:scale(0.5);
-o-transform:scale(0.5);
}
80% {
-webkit-transform:scale(1);
-moz-transform:scale(1);
-o-transform:scale(1);
}
90% {
-webkit-transform:scale(0.5);
-moz-transform:scale(0.5);
-o-transform:scale(0.5);
}
100%{opacity:1;
-webkit-transform:scale(1);
-moz-transform:scale(1);
-o-transform:scale(1);}
}
Скачать исходники.