Веб-мастерская Ларисы ВоронинойCSS открытка на 14 февраля.
WEB-мастерская Ларисы Ворониной logo

CSS открытка на 14 февраля. Фев 12 2017


В этой статье я покажу как создать анимированную CSS открытку на 14 февраля. При создании CSS открытки используются  keyframes анимация  и  свойство transform CSS.

Подготавливаем изображения.

  1. Распахнутое окно.

Раму распахнутого окна можно элементарно нарисовать в Фотошопе, можно скачать на фотостоке.

Берём любое изображение раскрытого окна и открываем его в Фотошопе.

Вырезаем раму, остальное удаляем.

Берём изображение прозрачного облака и вставляем его в «распахнутое окно».

Сохраняем файл в формате png под названием rama.

  1. Амур. Картинку ангела или амура можно скачать на любом фотостоке или нарисовать самим. Картинка тоже должна быть в формате png.
  2. Букет. Где взять изображение букета, я думаю вопросов нет. Вырезаем букет, удаляем фон, и сохраняем картинку в формате png.
  3. Сердце с надписью рисуем в фотошопе.
  4. Фон стены также рисуем в фотошопе.

Пишем коды.

В 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>

В 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);}
}

Рейтинг@Mail.ru