Создайте дизайн молнии
Я пытаюсь воссоздать символ молнии от The Flash (DC Comics) (или знак на футболке, которую носит Sheldon Cooper из The Big Bang Theory ) в CSS.
Этот символ будет действовать как система звездного рейтинга, но вместо этого будет - "система рейтинга молний".
Однако, поскольку я пытаюсь свести HTML к минимуму, я бы хотел, чтобы в основном это был только стиль CSS.
Я дошел до стадии:
position: relative;
margin: 0 auto;
}
.circ:hover{
background:gray;
}
.circ:hover .bolt{
background:gold;
}
.circ {
height: 50%;
width: 50%;
background: white;
border: 5px solid black;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow:0 0 10px 2px black;
}
.bolt {
position: absolute;
top: 5%;
left: 50%;
height: 70%;
width: 30%;
background: yellow;
border: 2px solid black;
border-bottom: none;
transform: perspective(200px) skewX(-10deg) rotateX(15deg);
}
.bolt:before {
content: "";
position: absolute;
top: 90%;
left: 20%;
height: 50%;
width: 100%;
background: inherit;
border: 2px solid black;
transform: ;
}
/*
.bolt:after{
content:"";
position:absolute;
top:-40%;left:20%;
height:50%;
width:100%;
background:inherit;
transform:perspective(50px) skewX(-10deg) rotateX(45deg);
}*/ <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="wrap">
<div class="circ">
<div class="bolt"></div>
</div>
</div> Но не знаю, как дальше продолжать отсюда.
Я попытался использовать свойство perspective, хотя я не думаю, что у меня уже есть до сих пор обработка по этому свойству - в основном потому, что я немного запутался относительно того, что perspective делает со свойствами :before и :after, когда они применяются к родительскому элементу.
Выбрал для этого CSS, так как белый фон и цвет молнии будут меняться при щелчке, и ещё потому, что я знаю, как это сделать с помощью CSS.
Знаю, что SVG может быть лучшим вариантом здесь, но я не смог изучить SVG из-за ограничений по времени, поэтому предпочел бы использовать «то, что я знаю, как использовать», то есть CSS.
Перевод вопроса: Create a lightning bolt design (like The Flash)@jbutler483
Здесь вы найдете информацию по SVG:
Circle
Polygon
Пример кода
svg {
background-color: red;
}<svg width="100px" height="200px" viewBox="0 0 100 150">
<circle fill="white" stroke="black" cx="50" cy="75" r="50"></circle>
<polygon stroke="gray" fill="yellow" points="100,0 67,50 90,45 47,100 70,95 0,150 27,110 12,113 50,70 30,73 100,0" />
</svg>Решение с css
::before и ::after элементы на молнии. drop-shadow в контейнере молнии.
body {
background-color: red;
}
.container {
-webkit-filter: drop-shadow(2px 2px 0px gray);
}
.circle {
display: inline-block;
border-radius: 50%;
background-color: white;
border: 5px solid black;
border-color: black;
}
.lightning {
position: relative;
margin: 50px;
width: 30px;
height: 50px;
transform-origin: 50% 50%;
transform: skewX(-30deg) skewY(-30deg) rotate(10deg);
background-color: yellow;
}
.lightning:before {
position: absolute;
border-style: solid;
border-width: 0 0 40px 30px;
border-color: transparent transparent yellow transparent;
top: -39px;
left: -17px;
content: "";
}
.lightning:after {
position: absolute;
border-style: solid;
border-width: 0 0 40px 30px;
border-color: transparent transparent transparent yellow;
bottom: -39px;
right: -17px;
content: "";
}<div class="circle">
<div class="container">
<div class="lightning"></div>
</div>
</div>Перевод ответа:Create a lightning bolt design @Persijn
Однозначно svg тут 100%-ое решение, но предложу еще свой кривой css вариант) :
* {
box-sizing: border-box;
}
html,
body,
.wrap {
margin: 0;
width: 100%;
height: 100%;
}
.wrap {
/* display: flex;
align-items: center;
align-content: center;
justify-content: center; */
max-width: 500px;
width: 100%;
margin: 2rem auto;
}
.z {
position: relative;
width: 300px;
height: 300px;
margin: 0 auto;
}
.lg {
position: absolute;
transform: skewX(-50deg) rotate(-40deg) translate(-78%, -82%);
z-index: 2;
top: 50%;
left: 50%;
}
.lightning-border{
background: #d4c6cb;
width: 42px;
height: 130px;
left: 50.5%;
}
.lightning{
background: #fbe028;
width: 35px;
height: 120px;
}
.lg:before,
.lg:after {
content: '';
position: absolute;
}
.lightning:before {
top: -130px;
left: -20px;
border-bottom: 150px solid #fbe028;
border-left: 30px solid transparent;
border-right: 10px solid transparent;
}
.lightning:after {
top: 90px;
left: 15px;
border-top: 150px solid #fbe028;
border-left: 10px solid transparent;
border-right: 30px solid transparent;
}
.lightning-border:before {
top: -140px;
left: -24px;
border-bottom: 172px solid #d4c6cb;
border-left: 38px solid transparent;
border-right: 16px solid transparent;
}
.lightning-border:after {
top: 88px;
left: 14px;
border-top: 172px solid #d4c6cb;
border-left: 16px solid transparent;
border-right: 38px solid transparent;
}
.circle {
width: 180px;
height: 180px;
background: #fff;
border: 3px solid #000;
border-radius: 50%;
position: absolute;
z-index: 1;
left: 50%;
top: 50%;
margin: -90px 0 0 -90px;
}
body {
background: #e63737;
}<div class="wrap">
<div class="z">
<div class="lg lightning-border"></div>
<div class="lg lightning"></div>
<div class="circle"></div>
</div>
</div>codepen
P.S: Bazzzzzinga! ;)
Disclaimer: Я рекомендую SVG для этих целей, но это не означат, что мы не должны получать удовольствие от CSS. Используйте это для обучения, но не для реализации.
Вот метод для получения формы с помощью всего одного элемента, плюс пара псевдоэлементов, и некоторых background linear-gradients. Форма может масштабироваться без каких-либо искажений.
Пояснение того, как была получена форма:
Белый круг с черной рамкой является обычным кругом CSS, созданным с использованием
border-radiusдля псевдоэлемента:after.Добавлен еще один псевдоэлемент -
:before, который искажается вдоль обеих осейXиY, чтобы придать частям молнии нужный вид.Молния фактически создается путем укладки нескольких линейных
градиентов друг на друга. Она включает в себя 6 градиентных
изображений, где 3 для внутренней желтой части молнии, а другие 3 для серых границ.Размер фоновых изображений (градиентов) определяется размером молнии, и каждый из них позиционируется таким образом, что они рисуют молнию подобно её внешнему виду.
Центральная часть молнии фактически имеет только один сплошной цвет, но все еще производится с использованием градиента, потому что мы не можем контролировать размер сплошного цвета фона.
.lightning {
position: relative;
height: 200px;
width: 200px;
border-radius: 50%;
margin: 50px auto;
}
.lightning:after,
.lightning:before {
position: absolute;
content: '';
height: 100%;
width: 100%;
top: 0%;
left: 0%;
}
.lightning:after {
background: white;
border: 2px solid;
border-radius: 50%;
z-index: -1;
}
.lightning:before {
background: linear-gradient(transparent 0%, yellow 0%), linear-gradient(to top left, yellow 43%, gray 43%, gray 44%, transparent 44%), linear-gradient(to top left, transparent 56%, gray 56%, gray 57%, yellow 57%), linear-gradient(transparent 0%, gray 0%), linear-gradient(to top left, gray 51%, transparent 51%), linear-gradient(to top left, transparent 49%, gray 49%);
background-size: 20% 40%, 22% 42%, 22% 42%, 23% 42%, 23% 42%, 23% 42%;
background-position: 50% 50%, 32% 5%, 70% 100%, 50% 50%, 33% 7%, 69% 98%;
background-repeat: no-repeat;
backface-visibility: hidden;
transform: skewY(-30deg) skewX(-30deg);
z-index: 2;
}
/* Just for demo */
body {
background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
.lightning {
transition: all 1s;
}
.lightning:hover {
transform: scale(1.5);
}<!-- Script used only for avoidance of prefixes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="lightning"></div>Пример с анимацией молнии:
.lightning {
position: relative;
height: 200px;
width: 200px;
border-radius: 50%;
margin: 50px auto;
}
.lightning:after, .lightning:before {
position: absolute;
content: '';
height: 100%;
width: 100%;
top: 0%;
left: 0%;
}
.lightning:after {
background: white;
border: 2px solid;
border-radius: 50%;
z-index: -1;
}
.lightning:before {
background: linear-gradient(transparent 0%, yellow 0%), linear-gradient(to top left, yellow 43%, gray 43%, gray 44%, transparent 44%), linear-gradient(to top left, transparent 56%, gray 56%, gray 57%, yellow 57%), linear-gradient(transparent 0%, gray 0%), linear-gradient(to top left, gray 51%, transparent 51%), linear-gradient(to top left, transparent 49%, gray 49%);
background-size: 20% 40%, 22% 42%, 22% 42%, 23% 42%, 23% 42%, 23% 42%;
background-position: 50% 50%, 32% 5%, 70% 100%, 50% 50%, 33% 7%, 69% 98%;
background-repeat: no-repeat;
backface-visibility: hidden;
transform: skewY(-30deg) skewX(-30deg);
z-index: 2;
}
/* Just for demo */
body {
background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
.lightning {
transition: all 1s;
}
.lightning:hover:before {
animation: boltstrike 1s;
}
@-webkit-keyframes boltstrike {
25% {
transform: translateX(-5%) translateY(5%) skewY(-30deg) skewX(-30deg);
}
50% {
transform: translateX(7.5%) translateY(-7.5%) skewY(-30deg) skewX(-30deg);
}
100% {
transform: skewY(-30deg) skewX(-30deg);
}
}
@keyframes boltstrike {
25% {
transform: translateX(-5%) translateY(5%) skewY(-30deg) skewX(-30deg);
}
50% {
transform: translateX(5%) translateY(-5%) skewY(-30deg) skewX(-30deg);
}
100% {
transform: skewY(-30deg) skewX(-30deg);
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="lightning"></div>Ссылка на демо в полный экран с анимацией и изменением цвета.
Перевод ответа: Create a lightning bolt design (like The Flash) @Harry
-
21:54
-
06:25
Современные инструменты для криптотрейдинга: как технологии помогают принимать решения
-
06:53
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
-
20:42
-
09:21
Основные этапы разработки сайта для стоматологической клиники
-
12:26
-
10:30
-
18:43
Продвижение своими сайтами как стратегия роста и независимости
-
22:46
- Почему SERVER_ADDR имеет не тот IP 50350 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 31958 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 26336 visits
- Как через css изменить цвет png изображения? 11775 visits
- Blob video url download 11324 visits
- Php curl запрос через прокси с авторизацией 10732 visits
- Работа с captcha vk api 9528 visits
© "hostciti.net" 14.4.2026 | 06:20