Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

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

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

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 25.01.2019, 20:26   #1
AntonCH
Пользователь
 
Регистрация: 28.11.2017
Сообщений: 58
По умолчанию 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, 22:13   #2
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

https://jsfiddle.net/naiveMan/Lkj96zb0/3/
так штоле?
Alar, верни репу!
Naive вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Непонятное 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 22:21