Play Buttons & Hovers - я не могу понять, как объединить 2 примера. Есть идеи? - PullRequest
Новая
       16

Play Buttons & Hovers - я не могу понять, как объединить 2 примера. Есть идеи?

0 голосов
/ 30 сентября 2019

Я увидел эту кнопку воспроизведения с хорошим парением и всплывающим окном на веб-сайте и подумал

«О, я хочу скопировать это и разобраться».

Elegant Themes Button

В моих попытках выяснить это и поискать в интернете я увидел это и подумал

"О, мне нравится это какwell "

Пример Codepen

Итак, я создал это, пытаясь как-то объединить 2.

Это мойпопытка слияния 2 примеров

Это HTML 

<a class="play-btn" href="#">
<div class="play-button-container"></div>
</a>

Это CSS 

body {
background: #444;
background-image: url("https://images.theastrocoach.com/2018/03/me-2-1.jpg");
}

a.play-btn {
width: 135px;
height: 135px;
/* background: radial-gradient( rgba(255, 0, 128, 0.8) 60%, rgba(255, 255, 255, 1) 62%); */
background: radial-gradient( rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 1) 62%);
border-radius: 50%;
position: relative;
display: block;
margin: 100px auto;
/*box-shadow: 0px 0px 25px 15px rgba(332, 30, 128, 0.8);*/
box-shadow: 50px 50px 85px 15px rgba(255, 255, 255, 0.0);
}

/* triangle */
.play-btn::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translateX(-40%) translateY(-50%);
transform: translateX(-40%) translateY(-50%);
transform-origin: center center;
width: 0;
height: 0;
/*border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 25px solid #333;*/
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 35px solid #333;
z-index: 100;
-webkit-transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

/* pulse wave */
.play-btn:before {
content: "";
position: absolute;
width: 150%;
height: 150%;
-webkit-animation-delay: 0s;
animation-delay: 0s;
-webkit-animation: pulsate1 2s;
animation: pulsate1 2s;
-webkit-animation-direction: forwards;
animation-direction: forwards;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: steps;
animation-timing-function: steps;
opacity: 1;
border-radius: 50%;
border: 5px solid rgba(255, 255, 255, .75);
top: -30%;
left: -30%;
/* background: rgba(198, 16, 0, 0); */
background: rgba(255, 255, 255, 255);
}

@-webkit-keyframes pulsate1 {
0% {
-webkit-transform: scale(0.6);
transform: scale(0.6);
opacity: 1;
box-shadow: inset 0px 0px 25px 3px rgba(255, 255, 255, 0.75), 0px 0px 25px 10px rgba(255, 255, 255, 0.75);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0;
box-shadow: none;
 }
}

@keyframes pulsate1 {
0% {
-webkit-transform: scale(0.6);
transform: scale(0.6);
opacity: 1;
box-shadow: inset 0px 0px 25px 3px rgba(255, 255, 255, 0.75), 0px 0px 25px 10px rgba(255, 255, 255, 0.75);
}
100% {
-webkit-transform: scale(1, 1);
transform: scale(1);
opacity: 0;
box-shadow: none;

 }
}


 a.play-btn:hover {
 width: 125px;
 height: 125px;
 /* background: radial-gradient( rgba(255, 0, 128, 0.8) 60%, rgba(255, 255, 255, 1) 62%); */
 background: radial-gradient( rgba(255, 255, 255, 1) 60%, rgba(255, 255, 255, 1) 62%);
 border-radius: 50%;
 position: relative;
 display: block;
 margin: 100px auto;
 /*box-shadow: 0px 0px 25px 15px rgba(332, 30, 128, 0.8);*/
 box-shadow: 50px 50px 85px 15px rgba(255, 255, 255, 0.0);
 transition: all 100ms ease;
 }

 .play-button-container {
 width: 135px;
 height: 135px;
 border-radius: 100px;
 -webkit-border-radius: 100px;
 -moz-border-radius: 100px;
 display: -webkit-box;
 display: flex;
 -webkit-box-align: center;
 align-items: center;
 -webkit-box-pack: center;
 justify-content: center;
 background: -webkit-linear-gradient(330deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.2) 100%);
 background: linear-gradient(120deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.2) 100%);
 box-shadow: 0 24px 72px 0 rgba(0,0,0,.5);
 -webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);
 transition: 300ms all cubic-bezier(.4,0,.2,1);
 }

.play-button-container:hover {
 width: 125px;
 height: 125px;
 border-radius: 100px;
 -webkit-border-radius: 100px;
 -moz-border-radius: 100px;
 display: -webkit-box;
 display: flex;
 -webkit-box-align: center;
 align-items: center;
-webkit-box-pack: center;
 justify-content: center;
 background: -webkit-linear-gradient(330deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.2) 100%);
 background: linear-gradient(120deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.2) 100%);
 box-shadow: 0 24px 72px 0 rgba(0,0,0,.5);
 -webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);
 transition: 300ms all cubic-bezier(.4,0,.2,1);
 }

По сути, контейнерный див был помещен туда такЯ мог бы получить черную тень в ее нормальном состоянии, чтобы немного поднять ее со страницы (потому что у кнопки уже есть элемент box-shadow), но когда вы пытаетесь навести курсор мыши, я не знаю, как заставить контейнер поместить его всдвиньте кнопку или просто отключите ее в режиме наведения.

Я надеюсь, что вы, ребята, можете видеть, что я пытаюсь сделать. Я мог бы, вероятно, обойтись без черного свечения и пульсации, когда он находится при наведении.

Если вы смотрите на моем примере Codepen, кнопка лучше просматривается с видом редактора с обеих сторон (так что кнопка находится надчеловек в изображении)

Я действительно не в курсе моего CSS.

Пожалуйста, сообщите.

...