Переливающиеся драгоценные камни на CSS3

Разместил: Apocalypse
Опубликовано: 28 декабря 2019

Скачать

Необычная штука, эти ваши украшения и автор данного чуда наверняка потратил кучу времени, чтобы на чистом CSS сделать эту переливающуюся драгоценную красотищу

Для начала посмотрите ДЕМО

Установка:

1#: Перед закрывающим тегом /head вставьте:

<link rel="stylesheet" type="text/css" href="/css/stones.css">

1	<link rel="stylesheet" type="text/css" href="/css/stones.css">

2#: После открывающего тега body вставьте:

<div class="wrap"> <div class="stone--space"> <div class="stone_inner--space"></div> <div class="cut--space"></div> <div class="cut--space"></div> <div class="cut--space"></div> <div class="cut--space"></div> <div class="cut--space"></div> <div class="cut--space"></div> <div class="cut--space"></div> <div class="cut--space"></div> <div class="cut--space"></div> <div class="cut--space"></div> <div class="cut--space"></div> <div class="cut--space"></div> <div class="cut--space"></div> <div class="cut--space"></div> <div class="cut--space"></div> <div class="cut--space"></div> <div class="cut--space"></div> <div class="cut--space"></div> <div class="cut--space"></div> <div class="cut--space"></div> </div> <div class="stone--mind"> <div class="stone_inner--mind"></div> <div class="cut--mind"></div> <div class="cut--mind"></div> <div class="cut--mind"></div> <div class="cut--mind"></div> <div class="cut--mind"></div> <div class="cut--mind"></div> <div class="cut--mind"></div> <div class="cut--mind"></div> <div class="cut--mind"></div> <div class="cut--mind"></div> <div class="cut--mind"></div> <div class="cut--mind"></div> <div class="cut--mind"></div> <div class="cut--mind"></div> <div class="cut--mind"></div> <div class="cut--mind"></div> <div class="cut--mind"></div> <div class="cut--mind"></div> <div class="cut--mind"></div> <div class="cut--mind"></div> </div> <div class="stone--reality"> <div class="stone_inner--reality"></div> <div class="cut--reality"></div> <div class="cut--reality"></div> <div class="cut--reality"></div> <div class="cut--reality"></div> <div class="cut--reality"></div> <div class="cut--reality"></div> <div class="cut--reality"></div> <div class="cut--reality"></div> <div class="cut--reality"></div> <div class="cut--reality"></div> <div class="cut--reality"></div> <div class="cut--reality"></div> <div class="cut--reality"></div> <div class="cut--reality"></div> <div class="cut--reality"></div> <div class="cut--reality"></div> <div class="cut--reality"></div> <div class="cut--reality"></div> <div class="cut--reality"></div> <div class="cut--reality"></div> </div> <div class="stone--power"> <div class="stone_inner--power"></div> <div class="cut--power"></div> <div class="cut--power"></div> <div class="cut--power"></div> <div class="cut--power"></div> <div class="cut--power"></div> <div class="cut--power"></div> <div class="cut--power"></div> <div class="cut--power"></div> <div class="cut--power"></div> <div class="cut--power"></div> <div class="cut--power"></div> <div class="cut--power"></div> <div class="cut--power"></div> <div class="cut--power"></div> <div class="cut--power"></div> <div class="cut--power"></div> <div class="cut--power"></div> <div class="cut--power"></div> <div class="cut--power"></div> <div class="cut--power"></div> </div> <div class="stone--time"> <div class="stone_inner--time"></div> <div class="cut--time"></div> <div class="cut--time"></div> <div class="cut--time"></div> <div class="cut--time"></div> <div class="cut--time"></div> <div class="cut--time"></div> <div class="cut--time"></div> <div class="cut--time"></div> <div class="cut--time"></div> <div class="cut--time"></div> <div class="cut--time"></div> <div class="cut--time"></div> <div class="cut--time"></div> <div class="cut--time"></div> <div class="cut--time"></div> <div class="cut--time"></div> <div class="cut--time"></div> <div class="cut--time"></div> <div class="cut--time"></div> <div class="cut--time"></div> </div> <div class="stone--soul"> <div class="stone_inner--soul"></div> <div class="cut--soul"></div> <div class="cut--soul"></div> <div class="cut--soul"></div> <div class="cut--soul"></div> <div class="cut--soul"></div> <div class="cut--soul"></div> <div class="cut--soul"></div> <div class="cut--soul"></div> <div class="cut--soul"></div> <div class="cut--soul"></div> <div class="cut--soul"></div> <div class="cut--soul"></div> <div class="cut--soul"></div> <div class="cut--soul"></div> <div class="cut--soul"></div> <div class="cut--soul"></div> <div class="cut--soul"></div> <div class="cut--soul"></div> <div class="cut--soul"></div> <div class="cut--soul"></div> </div> </div>

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 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140

<div class="wrap"> <div class="stone--space"> <div class="stone_inner--space"></div> <div class="cut--space"></div> <div class="cut--space"></div> <div class="cut--space"></div> <div class="cut--space"></div> <div class="cut--space"></div> <div class="cut--space"></div> <div class="cut--space"></div> <div class="cut--space"></div> <div class="cut--space"></div> <div class="cut--space"></div> <div class="cut--space"></div> <div class="cut--space"></div> <div class="cut--space"></div> <div class="cut--space"></div> <div class="cut--space"></div> <div class="cut--space"></div> <div class="cut--space"></div> <div class="cut--space"></div> <div class="cut--space"></div> <div class="cut--space"></div> </div> <div class="stone--mind"> <div class="stone_inner--mind"></div> <div class="cut--mind"></div> <div class="cut--mind"></div> <div class="cut--mind"></div> <div class="cut--mind"></div> <div class="cut--mind"></div> <div class="cut--mind"></div> <div class="cut--mind"></div> <div class="cut--mind"></div> <div class="cut--mind"></div> <div class="cut--mind"></div> <div class="cut--mind"></div> <div class="cut--mind"></div> <div class="cut--mind"></div> <div class="cut--mind"></div> <div class="cut--mind"></div> <div class="cut--mind"></div> <div class="cut--mind"></div> <div class="cut--mind"></div> <div class="cut--mind"></div> <div class="cut--mind"></div> </div> <div class="stone--reality"> <div class="stone_inner--reality"></div> <div class="cut--reality"></div> <div class="cut--reality"></div> <div class="cut--reality"></div> <div class="cut--reality"></div> <div class="cut--reality"></div> <div class="cut--reality"></div> <div class="cut--reality"></div> <div class="cut--reality"></div> <div class="cut--reality"></div> <div class="cut--reality"></div> <div class="cut--reality"></div> <div class="cut--reality"></div> <div class="cut--reality"></div> <div class="cut--reality"></div> <div class="cut--reality"></div> <div class="cut--reality"></div> <div class="cut--reality"></div> <div class="cut--reality"></div> <div class="cut--reality"></div> <div class="cut--reality"></div> </div> <div class="stone--power"> <div class="stone_inner--power"></div> <div class="cut--power"></div> <div class="cut--power"></div> <div class="cut--power"></div> <div class="cut--power"></div> <div class="cut--power"></div> <div class="cut--power"></div> <div class="cut--power"></div> <div class="cut--power"></div> <div class="cut--power"></div> <div class="cut--power"></div> <div class="cut--power"></div> <div class="cut--power"></div> <div class="cut--power"></div> <div class="cut--power"></div> <div class="cut--power"></div> <div class="cut--power"></div> <div class="cut--power"></div> <div class="cut--power"></div> <div class="cut--power"></div> <div class="cut--power"></div> </div> <div class="stone--time"> <div class="stone_inner--time"></div> <div class="cut--time"></div> <div class="cut--time"></div> <div class="cut--time"></div> <div class="cut--time"></div> <div class="cut--time"></div> <div class="cut--time"></div> <div class="cut--time"></div> <div class="cut--time"></div> <div class="cut--time"></div> <div class="cut--time"></div> <div class="cut--time"></div> <div class="cut--time"></div> <div class="cut--time"></div> <div class="cut--time"></div> <div class="cut--time"></div> <div class="cut--time"></div> <div class="cut--time"></div> <div class="cut--time"></div> <div class="cut--time"></div> <div class="cut--time"></div> </div> <div class="stone--soul"> <div class="stone_inner--soul"></div> <div class="cut--soul"></div> <div class="cut--soul"></div> <div class="cut--soul"></div> <div class="cut--soul"></div> <div class="cut--soul"></div> <div class="cut--soul"></div> <div class="cut--soul"></div> <div class="cut--soul"></div> <div class="cut--soul"></div> <div class="cut--soul"></div> <div class="cut--soul"></div> <div class="cut--soul"></div> <div class="cut--soul"></div> <div class="cut--soul"></div> <div class="cut--soul"></div> <div class="cut--soul"></div> <div class="cut--soul"></div> <div class="cut--soul"></div> <div class="cut--soul"></div> <div class="cut--soul"></div> </div> </div>

Осталось лишь залить CSS файл из прикреплённого архива в папку css

Автор публикации

не в сети 4 дня

Apocalypse

12

Я не понял вашего вопроса, но постараюсь на него ответить...

Комментарии: 393Публикации: 1095Регистрация: 27-08-2018

Метки: CSSCSS3EffectStonesБликиДрагоценностиКамниЭффект

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

• Следующая публикация Солнечное затмение с плывущими облаками на чистом CSS и SVG
• Предыдущая публикация Плавающие масляные пузырьки на SVG и CSS3

Вам может также понравиться...

• Анимированный загрузчик (Spinner) на CSS3

  Разместил: Apocalypse 27 марта 2016

  - Apocalypse 27 марта 2016

• Крутой анимированный индикатор загрузки в виде снежка на CSS3

  Разместил: Apocalypse 22 января 2023

  - Apocalypse 22 января 2023 Last modified 21 января 2023

• Эффект размытия при наведении + описание для изображений на чистом CSS3

  Разместил: Apocalypse 15 февраля 2018

  - Apocalypse 15 февраля 2018 Last modified 2 сентября 2018

Подписаться

Уведомить о

новых последующих комментариях новых ответах на мои комментарии

Label

{} [+]

Имя*

Email*

Сайт

Δ

Label

{} [+]

Имя*

Email*

Сайт

Δ

0 Комментарий

Старые

Новые

Межтекстовые Отзывы

Посмотреть все комментарии