Форум программистов
 
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

Вернуться   Форум программистов > Web > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail


Донат для форума - использовать для поднятия настроения себе и модераторам

А ещё здесь можно купить рекламу за 15 тыс руб в месяц! ) пишите сюда - alarforum@yandex.ru

Ответ
 
Опции темы
Старый 25.01.2019, 21:26   #1
AntonCH
Форумчанин
 
Регистрация: 28.11.2017
Сообщений: 50
Репутация: -9
По умолчанию css3 анимация

Объект: шестиугольник. Происходит наклон по оси X, при этом
меняется прозрачность. После окончания анимация повторяется еще 3 раза.
Шестиугольник нарисовать получилось, а как сделать анимацию?
Код:
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title></title> 
    <link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="d16" align="center">
    <h4>HEX</h4>
</div>
</body>
</html>
Код:
@keyframes move{
from {transform: rotateX(30deg);}
to { transform: rotateX(60deg);}
}
.d16 {
margin: 20px 0; width: 100px; height: 55px;
background: #F1CCAE;
position: relative;
animation-name: move;
}
.d16:before, .d16:after {
content: "";
width: 0; height: 0;
position: absolute; left: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;}
.d16:before {
top: -25px;
border-bottom: 25px solid #F1CCAE;}
.d16:after {
bottom: -25px;
border-top: 25px solid #F1CCAE;}
AntonCH вне форума   Ответить с цитированием
Старый 25.01.2019, 23:13   #2
Naive
Раздолбайских Дел
Профессионал
 
Аватар для Naive
 
Регистрация: 22.05.2009
Адрес: Екатеринбург
Сообщений: 3,785
Репутация: 2322
По умолчанию

https://jsfiddle.net/naiveMan/Lkj96zb0/3/
так штоле?
__________________
Работаю. В этот раз за деньги.
Жду ваши искренние спасибы на яндекс-кошелек: 410011068154587
Naive вне форума   Ответить с цитированием
Ответ

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
JavaScript CSS3 AnnaRomer Работа на постоянной основе - Вакансии 1 19.05.2016 21:14
Непонятное css3 serken HTML и CSS 1 08.07.2012 13:20
CSS3 меню Silverstone HTML и CSS 0 01.04.2012 00:01
HTML5 и CSS3 ZvEr_HaCkEr HTML и CSS 6 03.01.2011 23:21


11:51.


Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.

Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru