• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Анимированная шапка для сайта в HTML (Анимированная шапка сайта виде с использованием CSS3)
Анимированная шапка для сайта в HTML
Kosten
Дата: Вторник, 2019-10-22, 21:10 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25120
Награды: 57


Красиво по дизайну и по анимации создана анимированная шапка сайта виде пирамид с использованием 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;
}
}

Шапки для сайта можно сделать оригинальными по цветовой гамме, ведь все прописано в стилистике, где даже солнце, которое поднимается, то здесь можно задать скорость.

Демонстрация

Посмотреть остальные анимированные шапки с оригинальным дизайном.
Прикрепления: 6004515.jpg(23.9 Kb) · 3429471.jpg(19.4 Kb) · sadevca.zip(4.2 Kb)
Страна: (RU)
Kosten
Дата: Среда, 2019-10-23, 16:05 | Сообщение 2
Оффлайн
Администраторы
Сообщений:25120
Награды: 57


Еще одна оригинальная анимированная шапка под фоновый эффект, который больше идет для дизайна или для вашего вдохновения. Где задействуем Javascript для создания анимированного фона для больших заголовков сайта.


See the Pen
Crystal Caves
by Kocsten (@kocsten)
on CodePen.




JS
Страна: (RU)
Kosten
Дата: Среда, 2019-10-23, 16:08 | Сообщение 3
Оффлайн
Администраторы
Сообщений:25120
Награды: 57


Чистый CSS градиентный фон анимации

Это нормальный линейный градиент на теле с движущейся анимацией , поэтому я называю его анимированным фоновым градиентом.


See the Pen
Pure CSS Gradient Background Animation
by Kocsten (@kocsten)
on CodePen.


Страна: (RU)
Kosten
Дата: Среда, 2019-10-23, 16:11 | Сообщение 4
Оффлайн
Администраторы
Сообщений:25120
Награды: 57


Это эффект дождя CSS с несколькими вариантами конфигурации. Вы можете выбрать одну каплю или несколько капель. Вы также можете добавлять и удалять эффект всплеска, когда капля дождя падает на землю, и вы также можете добавить фон.


See the Pen
CSS Rain Effect
by Kocsten (@kocsten)
on CodePen.


Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Анимированная шапка для сайта в HTML (Анимированная шапка сайта виде с использованием CSS3)
  • Страница 1 из 1
  • 1
Поиск: