Я пытаюсь воссоздать символ молнии от 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);
}*/
Но не знаю, как дальше продолжать отсюда. Я попытался использовать свойство perspective, хотя я не знаю, что у меня уже есть ли до сих пор обработка по этому свойству - в основном потому, что я немного запутался относительно того, что perspective делает со свойствами :before и :after, когда они применяются к родительскому элементу.
Выбрал для этого CSS, так как белый фон и цвет молнии будут меняться при щелчке, и ещё потому, что я знаю, как это сделать с помощью CSS.
Знаю, что SVG может быть лучшим вариантом здесь, но я не смог изучить SVG из-за ограничений по времени, поэтому предпочел бы использовать «то, что я знаю, как использовать», то есть CSS.
Перевод вопроса: Create a lightning bolt design (like The Flash)@jbutler483
Ответ
Однозначно 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;
}
codepen
P.S: Bazzzzzinga! ;)
Комментариев нет:
Отправить комментарий