Переливающиеся драгоценные камни на 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

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

• Адаптивная галерея изображений с LightBox эффектом на CSS + jQuery с доработками от Apocalypse

  Разместил: Apocalypse 21 октября 2020

  - Apocalypse 21 октября 2020 Last modified 16 октября 2020

• Анимированные разноцветные пятна при помощи SVG

  Разместил: Apocalypse 19 апреля 2016

  - Apocalypse 19 апреля 2016

• Стеклянные иконки на CSS3

  Разместил: Apocalypse 10 декабря 2018

  - Apocalypse 10 декабря 2018 Last modified 10 декабря 2023

Подписаться

Уведомить о

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

Label

{} [+]

Имя*

Email*

Сайт

Δ

Label

{} [+]

Имя*

Email*

Сайт

Δ

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

Старые

Новые

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

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