Красиво по дизайну и по анимации создана анимированная шапка сайта виде пирамид с использованием CSS3, которые изначально показывают день с переходом на ночь. Что можно разместить как шапку на сайте или сделать блок, который безусловно будет замечен при открытие страницы или сайта.
Также вы можете посмотреть другие шапки, которые выполнены в аналогичном направление, это анимация, которая выполнена на чистом CSS.
Сам переход начнется с такого вида.
И плавно перейдет на другое время суток.
HTML
Код
<div class="animirovan">
<div class="shapkud">Первый</div>
<div class="sdelatud">Второй</div>
<div class="ksacdsam">Третий</div>
<div class="night"></div>
<div class="sun"></div>
<div class="selen"></div>
<div class="catukigas">
<div class="pr1"><div class="shadow"></div></div>
<div class="pr2"><div class="shadow"></div></div>
<div class="pr3"><div class="shadow"></div></div>
</div>
<div class="ground"></div>
</div>
CSS
Код
.animirovan{
width: 895px;
height: 318px;
left: 0;
top: 0;
overflow: hidden;
background: #4FC3F7;
position: relative;
animation: main-layout 40s linear infinite;
}
.ground { /* Полоска земли */
display: block;
position: absolute;
width: 100vw;
height: 40px;
left: 0;
bottom: 0;
background: #F4511E;
z-index: 10;
}
.sun { /* Солнышко */
position: absolute;
width: 150px;
height: 150px;
top: 250px;
left: 750px;
background: #FFF;
border-radius: 50%;
z-index: 1;
animation: main-sun 40s linear infinite;
}
.selen{ /* Луна */
position: absolute;
top: 0;
left: 800px;
width: 80px;
height: 80px;
border-radius: 50%;
background: #fff;
animation: main-selen 40s linear infinite;
}
.selen::before { /* Затемнение для плумесяца */
content: "";
position: absolute;
left: -5px;
top: -5px;
width: 80px;
height: 80px;
border-radius: 50%;
background: #030104;
}
.shapkud,
.sdelatud,
.ksacdsam { /* Слова на пирамидах */
font-family: Impact;
position: absolute;
color: #fff;
transform: rotate(40deg);
z-index: 5;
text-shadow: 1px 1px #050505,
2px 2px #050505,
3px 3px #050505,
4px 4px #050505;
}
.shapkud {
top: 148px;
left: 305px;
font-size: 29px;
letter-spacing: 0.4em;
z-index: 5;
}
.sdelatud {
top: 190px;
left: 630px;
font-size: 29x;
letter-spacing: 0.3em;
z-index: 5;
}
.ksacdsam {
top: 205px;
left: 105px;
font-size: 18px;
letter-spacing: 0.3em;
z-index: 5;
}
.shadow {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 8%;
left: -50%;
background: #333;
transform: rotate(30deg);
}
.catukigas { /* Блоки пирамид */
display: block;
position: absolute;
width: 950px;
height: 300px;
left: 50%;
bottom: 10px;
transform: translate(-50%, 0px);
z-index: 2;
}
.pr1,
.pr2,
.pr3 { /* Грани пирамид */
display: block;
position: absolute;
background: #F4511E;
overflow: hidden;
transform: rotate(45deg) translate(50%, 50%);
}
.pr1 {
width: 500px;
height: 500px;
bottom: 30px;
left: 20%;
z-index: 2;
}
.pr2 {
width: 400px;
height: 400px;
bottom: 0px;
right: 20px;
z-index: 3;
}
.pr3 {
width: 300px;
height: 300px;
bottom: 0;
left: 30px;
z-index: 4;
}
/* Анимации */
@keyframes main-sun{
0% {
transform: translateY(-10px);
background: #FF5F00;
}
25%{
transform: translateY(-260px);
background: #fff;
width:80px;
height:80px;
}
35%{
transform: translateY(-260px);
}
40% {
background: #fff;
}
60%{
transform: translateY(10px);
width:150px;
height:150px;
background: #FF5F00;
}
}
@keyframes main-layout{
0% {
background: #333333;
}
10%{
background: #4FC3F7;
}
40%{
background: #4FC3F7;
}
50% {
background: #333333;
}
55% {
background-image: url(images/129a.jpg);
}
100% {
background-image: url(images/129a.jpg);
}
}
@keyframes main-selen {
0% {
opacity: 0;
}
55% {
opacity: 0;
}
60% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
}
}
Шапки для сайта можно сделать оригинальными по цветовой гамме, ведь все прописано в стилистике, где даже солнце, которое поднимается, то здесь можно задать скорость.
Демонстрация
Посмотреть остальные анимированные шапки с оригинальным дизайном.
