ObjectOne > CSS > Эффекты @keyframes boxshadow
Эффекты @keyframes boxshadow
Интересные эффекты при наличии лишь одного css 3. Элементы, в данном случае разноцветные кружочки передвигаются по горизонтальной поверхности с определённым интервалом и заданным «@keyframes boxshadow» диапазоне.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Минимальный каркас странички</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <style> .block { width: 2em; height: 2em; margin-top: 2em; background: transparent; border-radius: 50%; box-shadow: 2em 0 0 crimson, 4em 0 0 red, 6em 0 0 orangered, 8em 0 0 orange, 10em 0 0 gold, 12em 0 0 yellow, 14em 0 0 greenyellow, 16em 0 0 skyblue, 18em 0 0 steelblue, 20em 0 0 darkmagenta; animation: boxshadow 1s infinite; } @keyframes boxshadow { 50% { box-shadow: 50em 0 0 skyblue, 25em 0 0 yellow, 2em 0 0 crimson, 18em 0 0 steelblue, 6em 0 0 orangered, 10em 0 0 gold, 90em 0 0 red, 20em 0 0 darkmagenta, 8em 0 0 orange, 14em 0 0 greenyellow; } } </style> <div class="container"> <div class="row"> <div class="col-md-2"> <p>Левая колонка</p> </div> <div class="col-md-8"> <div class="block"></div> </div> <div class="col-md-2"> <p>Правая колонка</p> </div> </div> </div> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html> |
Чуть больше инфы и эффектов на кейфреймах
Количество просмотров: 747
| Категория: CSS
| Тэги: @keyframes
