Can you help me?
Currently the red exit button is on the spinning fan, I want to place it below it.
How do I do that in the code? https://jsfiddle.net/aqpoew6d/
I am trying to do this:
Image
.exit {
position: absolute;
top: 200px;
bottom: -47.63px;
margin: auto;
right: 0;
left: 0;
width: 47px;
height: 47px;
cursor: pointer;
border-radius: 100%;
background: transparent;
border: 5px solid red;
box-sizing: border-box;
opacity: 1;
clip-path: circle(50%);
}
.exit::before,
.exit::after {
content: "";
background-color: red;
width: 47px;
height: 5px;
position: absolute;
top: 0px;
left: -5px;
right: 0;
bottom: 0;
margin: auto;
}
.exit::before {
transform: rotate(45deg);
}
.exit::after {
transform: rotate(-45deg);
}
Image
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
background: gray;
}
.containerInitial {
position: absolute;
left: 0;
right: 0;
min-height: 100%;
min-width: 255px;
display: flex;
padding: 8px 8px;
}
.curtainInitial {
flex: 1 0 0;
margin: auto;
max-width: 680px;
border: 21px solid;
border-radius: 12px;
border-color: #000 #101010 #000 #101010;
position: relative;
overflow: hidden;
}
.curtainInitial::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: #0a0a0a;
background: radial-gradient(circle, transparent 0% 48.5%, #0a0a0a 48.5%);
border: 1px solid;
border-color: #000 #101010 #000 #101010;
}
.curtainInitial::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
outline: 1px solid green;
pointer-events: none;
}
.fence {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
background:
linear-gradient(45deg,
#0000 7px,
#0a0a0a 0 7.5px,
#0000 0 10px),
linear-gradient(-45deg,
#0000 7px,
#0a0a0a 0 7.5px,
#0000 0 10px),
linear-gradient(to top, #e10019 0%, #957e00 100%);
background-size: 10px 10px,10px 10px, cover;
filter: drop-shadow(0 0 5px #000);
-webkit-animation: fade 5s infinite;
animation: fade 5s infinite;
clip-path: circle(34.5% at center);
}
.fence>div {
position: absolute;
/*top: 0;*/
left: 0;
right: 0;
/*width: 100%;*/
height: 0.55%;
/*height: 2px;*/
background: black;
}
.fence>div:nth-child(1) {
top: 9.8%;
}
.fence>div:nth-child(2) {
top: 19.2%;
}
.fence>div:nth-child(3) {
top: 28.6%;
}
.fence>div:nth-child(4) {
top: 38%;
}
.fence>div:nth-child(5) {
top: 47.4%;
}
.fence>div:nth-child(6) {
top: 56.8%;
}
.fence>div:nth-child(7) {
top: 66.2%;
}
.fence>div:nth-child(8) {
top: 75.6%;
}
.fence>div:nth-child(9) {
top: 85%;
}
.fence>div:nth-child(10) {
top: 94.4%;
}
.fan svg {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
margin: auto;
}
.cross {
clip-path: circle(34.5% at center);
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
width: 100%;
height: 100%;
background: transparent;
}
.cross::before,
.cross::after {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
background: black;
}
.cross::before
/*horizontal*/
{
height: 2.8%;
}
.cross::after
/*vertical*/
{
width: 1.4%;
}
.ratio-keeper {
position: relative;
height: 0;
padding-top: 56.25%;
margin: auto;
overflow: hidden;
}
.fan svg {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 100%;
height: 100%;
animation: fan-spin 40s infinite linear;
}
#keyframes fan-spin {
0% {
transform: scale(0.98) rotate(0deg);
}
100% {
transform: scale(0.98) rotate(360deg);
}
}
#-webkit-keyframes fade {
0% {
opacity: 0.9;
}
50% {
opacity: 1;
}
100% {
opacity: 0.9;
}
}
#keyframes fade {
0% {
opacity: 0.9;
}
50% {
opacity: 1;
}
100% {
opacity: 0.9;
}
}
iframe {
display: block;
animation: iframe 5s ease-in 5s forwards;
animation-delay: 1s;
opacity: 0;
}
#keyframes iframe {
to {
opacity: 1;
}
}
.embed-youtube iframe,
.embed-youtube .embed-youtube-play,
.embed-youtube .embed-youtube-play::before {
position: absolute;
}
.embed-youtube iframe {
height: 100%;
width: 100%;
top: 0;
left: 0;
}
.exit {
position: absolute;
top: 200px;
bottom: -47.63px;
margin: auto;
right: 0;
left: 0;
width: 47px;
height: 47px;
cursor: pointer;
border-radius: 100%;
background: transparent;
border: 5px solid red;
box-sizing: border-box;
opacity: 1;
clip-path: circle(50%);
}
.exit::before,
.exit::after {
content: "";
background-color: red;
width: 47px;
height: 5px;
position: absolute;
top: 0px;
left: -5px;
right: 0;
bottom: 0;
margin: auto;
}
.exit::before {
transform: rotate(45deg);
}
.exit::after {
transform: rotate(-45deg);
}
<div class="containerInitial ">
<div class="curtainInitial">
<div class="ratio-keeper">
<div class="fence">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="fan">
<svg xmlns="http://www.w3.org/2000/svg" width="70%" height="70%" viewBox="76 130 381 381">
<g id="fan">
<title>Fan</title>
<path fill="#000100" stroke="#000"
d="m166.3352 168.6294c5.5396 2.4448 45.2339 54.394 72.7499 91.0151-9.1901-44.8757-21.7959-109.0279-19.9558-114.796 4.1462-12.9949 33.7039-13.5172 41.5845-13.7579 7.8827-.2415 37.4165-1.5221 42.3488 11.1948 2.1872 5.6436-6.4773 70.4506-12.9142 115.8007 25.2309-38.2323 61.6818-92.5089 67.0612-95.2865 12.119-6.2568 33.3898 14.2749 39.1337 19.6768 5.7424 5.402 27.5341 25.3815 22.0294 37.859-2.4441 5.5389-54.3954 45.2354-91.0172 72.7506 44.8757-9.1901 109.0293-21.7959 114.7974-19.9559 12.9927 4.1442 13.5193 33.7032 13.7586 41.5838.2422 7.8819 1.5221 37.4165-11.192 42.3473-5.6471 2.1894-70.4541-6.4765-115.8049-12.9127 38.2323 25.2323 92.5081 61.6783 95.2871 67.0605 6.2581 12.1175-14.2742 33.3877-19.6776 39.133-5.4027 5.7432-25.3815 27.5341-37.8563 22.0279-5.5396-2.4434-45.2361-54.3961-72.7534-91.0143 9.1901 44.8757 21.7952 109.0287 19.9551 114.7953-4.1434 12.9934-33.7026 13.5157-41.5852 13.7586-7.8799.24-37.4165 1.5221-42.3431-11.1936-2.1887-5.6464 6.4779-70.4541 12.9133-115.8071-25.2323 38.2323-61.6824 92.5124-67.0639 95.2908-12.1169 6.256-33.3891-14.2728-39.1337-19.6754-5.7432-5.4027-27.5313-25.383-22.0251-37.8578 2.4434-5.5396 54.394-45.2339 91.0136-72.7526-44.8764 9.1908-109.0266 21.7944-114.7967 19.9566-12.9934-4.1434-13.5171-33.7025-13.7586-41.5852-.2407-7.8806-1.5221-37.4165 11.1963-42.346 5.6443-2.1879 70.4498 6.4752 115.8 12.9121-38.233-25.2316-92.5081-61.6783-95.2865-67.0612-6.256-12.1169 14.2748-33.3913 19.6768-39.1337 5.4006-5.7438 25.3794-27.5333 37.8584-22.0272z" />
</g>
</svg>
</div>
<div class="cross"></div>
<div class="wrap">
<div class="video video-frame" data-id="CHahce95B1g"></div>
</div>
<div class="video-one"></div>
</div>
<button class="exit" type="button" title="Exit" aria-label="Close"></button>
</div>
</div>
move button outside last div and change bottom on .exit to -257px
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
background: gray;
}
.containerInitial {
position: absolute;
left: 0;
right: 0;
min-height: 100%;
min-width: 255px;
display: flex;
padding: 8px 8px;
}
.curtainInitial {
flex: 1 0 0;
margin: auto;
max-width: 680px;
border: 21px solid;
border-radius: 12px;
border-color: #000 #101010 #000 #101010;
position: relative;
overflow: hidden;
}
.curtainInitial::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: #0a0a0a;
background: radial-gradient(circle, transparent 0% 48.5%, #0a0a0a 48.5%);
border: 1px solid;
border-color: #000 #101010 #000 #101010;
}
.curtainInitial::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
outline: 1px solid green;
pointer-events: none;
}
.fence {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
background:
linear-gradient(45deg,
#0000 7px,
#0a0a0a 0 7.5px,
#0000 0 10px),
linear-gradient(-45deg,
#0000 7px,
#0a0a0a 0 7.5px,
#0000 0 10px),
linear-gradient(to top, #e10019 0%, #957e00 100%);
background-size: 10px 10px,10px 10px, cover;
filter: drop-shadow(0 0 5px #000);
-webkit-animation: fade 5s infinite;
animation: fade 5s infinite;
clip-path: circle(34.5% at center);
}
.fence>div {
position: absolute;
/*top: 0;*/
left: 0;
right: 0;
/*width: 100%;*/
height: 0.55%;
/*height: 2px;*/
background: black;
}
.fence>div:nth-child(1) {
top: 9.8%;
}
.fence>div:nth-child(2) {
top: 19.2%;
}
.fence>div:nth-child(3) {
top: 28.6%;
}
.fence>div:nth-child(4) {
top: 38%;
}
.fence>div:nth-child(5) {
top: 47.4%;
}
.fence>div:nth-child(6) {
top: 56.8%;
}
.fence>div:nth-child(7) {
top: 66.2%;
}
.fence>div:nth-child(8) {
top: 75.6%;
}
.fence>div:nth-child(9) {
top: 85%;
}
.fence>div:nth-child(10) {
top: 94.4%;
}
.fan svg {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
margin: auto;
}
.cross {
clip-path: circle(34.5% at center);
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
width: 100%;
height: 100%;
background: transparent;
}
.cross::before,
.cross::after {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
background: black;
}
.cross::before
/*horizontal*/
{
height: 2.8%;
}
.cross::after
/*vertical*/
{
width: 1.4%;
}
.ratio-keeper {
position: relative;
height: 0;
padding-top: 56.25%;
margin: auto;
overflow: hidden;
}
.fan svg {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 100%;
height: 100%;
animation: fan-spin 40s infinite linear;
}
#keyframes fan-spin {
0% {
transform: scale(0.98) rotate(0deg);
}
100% {
transform: scale(0.98) rotate(360deg);
}
}
#-webkit-keyframes fade {
0% {
opacity: 0.9;
}
50% {
opacity: 1;
}
100% {
opacity: 0.9;
}
}
#keyframes fade {
0% {
opacity: 0.9;
}
50% {
opacity: 1;
}
100% {
opacity: 0.9;
}
}
iframe {
display: block;
animation: iframe 5s ease-in 5s forwards;
animation-delay: 1s;
opacity: 0;
}
#keyframes iframe {
to {
opacity: 1;
}
}
.embed-youtube iframe,
.embed-youtube .embed-youtube-play,
.embed-youtube .embed-youtube-play::before {
position: absolute;
}
.embed-youtube iframe {
height: 100%;
width: 100%;
top: 0;
left: 0;
}
.exit {
position: absolute;
top: 200px;
bottom: -275.63px;
margin: auto;
right: 0;
left: 0;
width: 47px;
height: 47px;
cursor: pointer;
border-radius: 100%;
background: transparent;
border: 5px solid red;
box-sizing: border-box;
opacity: 1;
clip-path: circle(50%);
}
.exit::before,
.exit::after {
content: "";
background-color: red;
width: 47px;
height: 5px;
position: absolute;
top: 0px;
left: -5px;
right: 0;
bottom: 0;
margin: auto;
}
.exit::before {
transform: rotate(45deg);
}
.exit::after {
transform: rotate(-45deg);
}
<div class="containerInitial ">
<div class="curtainInitial">
<div class="ratio-keeper">
<div class="fence">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="fan">
<svg xmlns="http://www.w3.org/2000/svg" width="70%" height="70%" viewBox="76 130 381 381">
<g id="fan">
<title>Fan</title>
<path fill="#000100" stroke="#000"
d="m166.3352 168.6294c5.5396 2.4448 45.2339 54.394 72.7499 91.0151-9.1901-44.8757-21.7959-109.0279-19.9558-114.796 4.1462-12.9949 33.7039-13.5172 41.5845-13.7579 7.8827-.2415 37.4165-1.5221 42.3488 11.1948 2.1872 5.6436-6.4773 70.4506-12.9142 115.8007 25.2309-38.2323 61.6818-92.5089 67.0612-95.2865 12.119-6.2568 33.3898 14.2749 39.1337 19.6768 5.7424 5.402 27.5341 25.3815 22.0294 37.859-2.4441 5.5389-54.3954 45.2354-91.0172 72.7506 44.8757-9.1901 109.0293-21.7959 114.7974-19.9559 12.9927 4.1442 13.5193 33.7032 13.7586 41.5838.2422 7.8819 1.5221 37.4165-11.192 42.3473-5.6471 2.1894-70.4541-6.4765-115.8049-12.9127 38.2323 25.2323 92.5081 61.6783 95.2871 67.0605 6.2581 12.1175-14.2742 33.3877-19.6776 39.133-5.4027 5.7432-25.3815 27.5341-37.8563 22.0279-5.5396-2.4434-45.2361-54.3961-72.7534-91.0143 9.1901 44.8757 21.7952 109.0287 19.9551 114.7953-4.1434 12.9934-33.7026 13.5157-41.5852 13.7586-7.8799.24-37.4165 1.5221-42.3431-11.1936-2.1887-5.6464 6.4779-70.4541 12.9133-115.8071-25.2323 38.2323-61.6824 92.5124-67.0639 95.2908-12.1169 6.256-33.3891-14.2728-39.1337-19.6754-5.7432-5.4027-27.5313-25.383-22.0251-37.8578 2.4434-5.5396 54.394-45.2339 91.0136-72.7526-44.8764 9.1908-109.0266 21.7944-114.7967 19.9566-12.9934-4.1434-13.5171-33.7025-13.7586-41.5852-.2407-7.8806-1.5221-37.4165 11.1963-42.346 5.6443-2.1879 70.4498 6.4752 115.8 12.9121-38.233-25.2316-92.5081-61.6783-95.2865-67.0612-6.256-12.1169 14.2748-33.3913 19.6768-39.1337 5.4006-5.7438 25.3794-27.5333 37.8584-22.0272z" />
</g>
</svg>
</div>
<div class="cross"></div>
<div class="wrap">
<div class="video video-frame" data-id="CHahce95B1g"></div>
</div>
<div class="video-one"></div>
</div>
</div>
</div>
<button class="exit" type="button" title="Exit" aria-label="Close"></button>
Related
When the play image is clicked on it drops to the bottom, how do I prevent that?
To reproduce, click on it, and you will see it dropping down.
Click on it, scroll down and you will see the image has dropped.
How do I get the play image to stay in the same spot without dropping?
code https://jsfiddle.net/Lndptks3/2/
Before clicking on image
After clicking on image
You can see the play image falling down, how do I stop that from happening?
(function iife() {
"use strict";
function show(el) {
el.classList.remove("hide");
}
function hide(el) {
el.classList.add("hide");
}
function coverClickHandler(evt) {
const cover = evt.currentTarget;
hide(cover);
const curtain = document.querySelector(".curtain");
curtain.classList.add("slide");
const thewrap = curtain.parentElement.querySelector(".container");
show(thewrap);
}
const cover = document.querySelector(".jacketa");
cover.addEventListener("click", coverClickHandler);
}());
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
background: #353198;
}
.curtain {
position: relative;
width: 100%;
height: 100%;
}
.curtain.slide {
height: auto;
min-height: 100%;
overflow: hidden;
}
.panel-left,
.panel-right {
position: absolute;
height: 100%;
width: 50%;
top: 0%;
transition: all ease 20s;
}
.panel-left {
left: 0%;
background-color: rgb(91, 96, 106);
}
.panel-right {
left: 50%;
background-color: rgb(229, 211, 211);
}
.curtain.slide .panel-left {
transform: translateX(-100vw);
}
.curtain.slide .panel-right {
transform: translateX(100vw);
}
.outer {
display: table;
height: 100%;
margin: 0 auto;
}
.tcell {
display: table-cell;
vertical-align: middle;
}
.jacketa {
position: absolute;
width: 180px;
height: 180px;
cursor: pointer;
border-radius: 50%;
background: #130e85;
border: 3px solid #f91f6e;
box-sizing: border-box;
}
.jacketa .coversvg {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
cursor: pointer;
}
.jacketa .coversvg {
width: 70px;
height: 75.4px;
fill: none;
stroke-width: 4px;
stroke-miterlimit: 10;
}
.jacketa .coversvg .back {
stroke: #000;
opacity: 0.15;
}
.jacketa .coversvg .front {
stroke: #08f9ff;
stroke-dasharray: 150;
stroke-dashoffset: 1500;
animation: draw 20s infinite linear, flicker-1 2s linear 2s infinite both;
}
#keyframes draw {
100% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
#keyframes flicker-1 {
0%,
100% {
opacity: 1;
}
41.99% {
opacity: 1;
}
42% {
opacity: 0;
}
43% {
opacity: 0;
}
43.01% {
opacity: 1;
}
47.99% {
opacity: 1;
}
48% {
opacity: 0;
}
49% {
opacity: 0;
}
49.01% {
opacity: 1;
}
}
/* split the svg code below */
.split-wrap {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 180px;
height: 180px;
margin: auto;
border-radius: 50%;
box-shadow: 0 0 20px 2px #f9066bf7;
transition: 20s ease;
}
.j1 {
position: absolute;
left: 0;
top: 0;
width: 50%;
height: 100%;
overflow: hidden;
transition: 20s ease;
}
.j2 {
position: absolute;
left: 50%;
top: 0;
width: 50%;
height: 100%;
overflow: hidden;
transition: 20s ease;
}
.j2 .jacketa {
right: 0;
left: auto;
}
.curtain.slide .split-wrap {
box-shadow: 0 0 20px 2px rgba(249, 6, 167, 0);
}
.jacketa {
display: block !important;
}
.container {
height: auto;
}
.curtain.slide .j1 {
transform: translateX(-100vw);
}
.curtain.slide .j2 {
transform: translateX(100vw);
}
.j2 .j1{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
.container {
width: 990px;
height: 990px;
margin: 100px auto;
padding: 25px;
overflow: hidden;
border-radius: 25px;
border: 2px solid #0059dd;
box-sizing: border-box;
background: #000000;
}
.container-top {
position: relative;
height: 310px;
margin: 0 0 45px 0;
border-radius: 25px;
border: 3px solid #0059dd;
box-sizing: border-box;
background: url("https://i.imgur.com/jEMIULl.jpg") no-repeat 0 0;
background-size: cover;
}
.hide {
display: none;
}
<div class="curtain">
<div class="outer">
<div class="tcell">
<div class="container hide">
<div class="container-top">
</div>
</div>
<div class="panel-left"> </div>
<div class="panel-right"> </div>
<div class="split-wrap">
<div class="j1">
<div class="jacketa" title="[ Enjoy The Music ]">
<svg class="coversvg" width="70" height="75.4" viewBox="0 0 47.96 51.66">
<title>[ Enjoy The Music ]</title>
<path class="back" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
<path class="front" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
</svg>
</div>
</div>
<div class="j2">
<div class="jacketa" title="[ Enjoy The Music ]">
<svg class="coversvg" width="70" height="75.4" viewBox="0 0 47.96 51.66">
<title>[ Enjoy The Music ]</title>
<path class="back" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
<path class="front" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
</svg>
</div>
</div>
</div>
</div>
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 1 year ago.
I'm having trouble centering this div class in the middle.
It keeps staying centered at the top, and not the middle.
I can't figure out how to position it in the middle.
How it works is, you click on the play image and it opens up.
The rectangle of the same width and height, should be in the middle.
https://jsfiddle.net/v3rn4tf0/
.wrap {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 25px;
border: 3px solid red;
box-sizing: border-box;
}
(function iife() {
"use strict";
function show(el) {
el.classList.remove("hide");
}
function hide(el) {
el.classList.add("hide");
}
function coverClickHandler(evt) {
const curtain = document.querySelector(".curtain");
curtain.classList.add("slide");
const thewrap = curtain.parentElement.querySelector(".container");
show(thewrap);
}
const cover = document.querySelectorAll('.jacketa');
cover.forEach(function(el) {
el.addEventListener('click', coverClickHandler)
});
}());
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
background: #353198;
}
.curtain {
position: relative;
width: 100%;
height: 100%;
}
.curtain.slide {
height: auto;
min-height: 100%;
overflow: hidden;
}
.panel-left,
.panel-right {
position: absolute;
height: 100%;
width: 50%;
top: 0%;
transition: all ease 10s;
/*background-image: url("https://picsum.photos/600");
background-size: cover;
background-repeat: no-repeat;
background-position: center;*/
overflow: hidden;
}
.panel-left {
left: 0;
/*background-color: rgb(91, 96, 106);*/
}
.panel-right {
right: 0;
/*background-color: rgb(229, 211, 211);*/
}
.panel-left::before,
.panel-right::before {
content: "";
position: absolute;
height: 100%;
width: 200%;
top: 0;
left: 0;
background-image: url("https://picsum.photos/1920/1080");
background-size: auto;
background-repeat: no-repeat;
background-position: 0 0;
}
.panel-right::before {
left: -100%;
}
.curtain.slide .panel-left {
transform: translateX(-100%);
}
.curtain.slide .panel-right {
transform: translateX(100%);
}
.outer {
display: table;
height: 100%;
margin: 0 auto;
}
.tcell {
display: table-cell;
vertical-align: middle;
}
.jacketa {
position: absolute;
top: 40px;
width: 180px;
height: 180px;
cursor: pointer;
border-radius: 50%;
background: #130e85;
border: 3px solid #f91f6e;
box-sizing: border-box;
box-shadow: 0 0 20px 2px #f9066bf7;
display: block !important;
}
.j1 .jacketa {
left: 30px;
}
.j2 .jacketa {
right: 30px;
}
.jacketa .coversvg {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
cursor: pointer;
}
.jacketa .coversvg {
width: 70px;
height: 75.4px;
fill: none;
stroke-width: 4px;
stroke-miterlimit: 10;
}
.jacketa .coversvg .back {
stroke: #000;
opacity: 0.15;
}
.jacketa .coversvg .front {
stroke: #08f9ff;
stroke-dasharray: 150;
stroke-dashoffset: 1500;
animation: draw 20s infinite linear, flicker-1 2s linear 2s infinite both;
}
#keyframes draw {
100% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
#keyframes flicker-1 {
0%,
100% {
opacity: 1;
}
41.99% {
opacity: 1;
}
42% {
opacity: 0;
}
43% {
opacity: 0;
}
43.01% {
opacity: 1;
}
47.99% {
opacity: 1;
}
48% {
opacity: 0;
}
49% {
opacity: 0;
}
49.01% {
opacity: 1;
}
}
.split-wrap {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 240px;
height: 260px;
margin: auto;
border-radius: 50%;
transition: 10s ease;
}
.j1 {
position: absolute;
left: 0;
top: 0;
width: 50%;
height: 100%;
overflow: hidden;
transition: 10s ease;
}
.j2 {
position: absolute;
left: 50%;
top: 0;
width: 50%;
height: 100%;
overflow: hidden;
transition: 10s ease;
}
.curtain.slide .j1 {
left: -500%;
}
.curtain.slide .j2 {
left: 500%;
}
.video-wrapper {
min-width: 40%;
max-width: 640px;
margin: auto;
}
.ratio-keeper {
position: relative;
padding-top: 56.25%;
}
.video-frame {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.container {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 100%;
height: 100%;
}
.wrap {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 25px;
border: 3px solid red;
box-sizing: border-box;
}
.hide {
display: none;
}
<div class="curtain">
<div class="outer">
<div class="tcell">
<div class="container hide ">
<div class="video-wrapper">
<div class="ratio-keeper">
<div class="wrap">
<div class="video video-frame"></div>
</div>
</div>
</div>
</div>
<div class="panel-left"> </div>
<div class="panel-right"> </div>
<div class="split-wrap">
<div class="j1">
<div class="jacketa" title="[ Enjoy The Music ]">
<svg class="coversvg" width="70" height="75.4" viewBox="0 0 47.96 51.66">
<title>[ Enjoy The Music ]</title>
<path class="back" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
<path class="front" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
</svg>
</div>
</div>
<div class="j2">
<div class="jacketa" title="[ Enjoy The Music ]">
<svg class="coversvg" width="70" height="75.4" viewBox="0 0 47.96 51.66">
<title>[ Enjoy The Music ]</title>
<path class="back" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
<path class="front" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
You can try this method:
html,
body {
height: 100%;
}
.centered-item {
/* Positioning */
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 300px;
/* Styling */
padding: 20px;
font-family: "Open Sans", Arial, sans-serif;
color: #FFFFFF;
background: #1f2227;
border-radius: 3px;
}
Demo:
https://jsfiddle.net/caneroncel/f5nuqkmv/1/
I want to build animation like this, but using only css:
I built a triangle, but I can't build a background of moving triangles which will move. See the example in the pictures.
My code:
HTML:
<div class="container">
<div class="triangle up">
</div>
<div class="triangle down-right">
</div>
<div class=" down-right1">
</div>
<div class="triangle down-left">
</div>
</div>
CSS:
.container {
position: relative;
left: 45%;
width: 300px;
height: 250px;
}
.triangle {
position: absolute;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid rgb(165,60,255);
background: linear-gradient(90deg, rgba(165,60,255,1) 0%, rgba(98,0,255,1) 100%);
z-index: 999999;
}
.up {
top: 0;
left: auto;
}
.down-right {
top: 100px;
left: 16.5%;
}
.down-right1 {
top: 105px;
left: 24%;
position: absolute;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #c85e5e;
}
.down-left {
top: 100px;
left: -16.5%;
}
I want this animation to start when the page is loading.
An idea using skew tranformation and box-shadow.
.box {
position: fixed;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 75px;
height: 64.5px;
transition: 0.5s all 0.5s;
transform-origin: 50% 63%;
}
.box::before,
.box::after,
.box i:before,
.box i:after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 8px;
transform-origin: bottom;
transition: 0.5s all;
}
.box::before {
background: #5840bc;
box-shadow: 0px -20px #886df8, 0px -40px #c2b3f8;
transform: skewX(-30deg);
border-bottom-right-radius: 0;
}
.box::after {
background: #5844d9;
box-shadow: -20px 0 #7d69ca, -40px 0 #c7bee9;
transform: skewX(30deg);
border-top-right-radius: 0;
}
.box i:before {
background: #714ffe;
box-shadow: 0px -20px #7c6ade, 0px -40px #c7bee9;
transform: translateY(50%) rotate(120deg) skewX(-30deg);
transform-origin: center;
border-bottom-right-radius: 0;
}
.box i:after {
background: #fff;
z-index: 1;
clip-path: polygon(50% 0, 100% 100%, 0 100%);
border-radius: 0;
}
html:hover .box {
transform: rotate(60deg);
}
html:hover .box::before,
html:hover .box::after,
html:hover .box i:before,
html:hover .box i:after {
box-shadow: 0px 0 transparent, 0px 0 transparent;
}
<div class="box"><i></i></div>
I have this page and want to apply this to it.
.contact {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 70px solid red;
position: relative;
top: 0;
margin-left: 0;
transform: rotate(90deg);
float: right;
}
.contact:after {
content: '';
position: absolute;
left: -50px;
top: 70px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 70px solid red;
}
.contact {
animation: fish 4s linear infinite;
}
#keyframes fish {
0% {
right: 0px;
top: 0px;
}
25% {
right: 200px;
top: 0px;
}
50% {
right: 200px;
top: 200px;
}
75% {
right: 0px;
top: 200px;
}
100% {
right: 0px;
top: 0px;
}
}
.box {height: 50px; width 100px; background-color: black; margin: auto; transform: rotate(90deg);}
<div class="contact"></div>
<div class="box"></div>
The problem is that various other elements on the page have different z-index and I want to send it behind some and in front of others. Can I animate the z-index, as it were? For example 5s into animation z-index 1 would apply, 10s in z-index 3 would apply.
Yes. It's done exactly as you'd expect. Just add z-index into your animation keyframes like so:
.contact {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 70px solid red;
position: relative;
top: 0;
margin-left: 0;
transform: rotate(90deg);
float: right;
}
.contact:after {
content: '';
position: absolute;
left: -50px;
top: 70px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 70px solid red;
}
.contact {
animation: fish 4s linear infinite;
}
#keyframes fish {
0% {
right: 0px;
top: 0px;
}
25% {
right: 200px;
top: 0px;
}
50% {
right: 200px;
top: 200px;
z-index:100;
}
75% {
right: 0px;
top: 200px;
}
100% {
right: 0px;
top: 0px;
}
}
.box {height: 50px; width 100px; background-color: black; margin: auto; transform: rotate(90deg);}
<div class="contact"></div>
<div class="box"></div>
Having trouble diagnosing the cause of the floating pixel in the top left of the div. It only appeared once I added a border-radius.
Looking closely at each corner you can see some fragmenting as it applies the line before applying the radius. Perhaps a different technique all together is required.
CODEPEN
.contest-types {
border: 2px solid #BCCED4;
border-radius: 10px;
color: #1B2437;
padding: 10px;
margin: 20px;
width: 500px;
height: 200px;
background-color: #F9FDFF;
position: relative;
}
.contest-types:before {
content: '';
width: 2px;
height: 2px;
background-color: #5697fc;
position: absolute;
left: -2px;
top: -2px;
display: none;
}
.contest-types:after {
content: '';
position: absolute;
display: block;
background-color: #5697fc;
}
.contest-types:hover {
border: 2px solid #5697FC;
background-color: #FFFFFF;
animation: border 0.5s ease-out 1;
}
.contest-types:hover:after {
border-radius: 10px;
animation: border-after 0.5s ease-in-out 1;
}
.contest-types:hover:before {
display: block;
}
#keyframes border {
0%, 24% {
border-color: #BCCED4;
}
25% {
border-top-color: #5697fc;
}
49% {
border-right-color: #BCCED4;
}
50% {
border-right-color: #5697fc;
}
74% {
border-bottom-color: #BCCED4;
}
75% {
border-bottom-color: #5697fc;
}
99% {
border-left-color: #BCCED4;
}
100% {
border-color: #5697fc;
}
}
#keyframes border-after {
0% {
height: 2px;
width: 0;
top: -2px;
left: -2px;
right: auto;
bottom: auto;
}
24.99% {
width: calc(100% + 2px);
height: 2px;
top: -2px;
left: -2px;
right: auto;
bottom: auto;
}
25% {
width: 2px;
height: 0;
top: -2px;
right: -2px;
left: auto;
bottom: auto;
}
49.99% {
width: 2px;
height: calc(100% + 2px);
top: -2px;
right: -2px;
left: auto;
bottom: auto;
}
50% {
width: 0;
height: 2px;
bottom: -2px;
right: -2px;
top: auto;
left: auto;
}
74.99% {
width: calc(100% + 2px);
height: 2px;
bottom: -2px;
right: -2px;
top: auto;
left: auto;
}
75% {
width: 2px;
height: 0;
bottom: -2px;
left: -2px;
right: auto;
top: auto;
}
100% {
width: 2px;
height: calc(100% + 2px);
bottom: -2px;
left: -2px;
right: auto;
top: auto;
}
}
<div class="contest-types" id="group">
</div>
Use overflow: hidden
.contest-types {
border: 2px solid #BCCED4;
border-radius: 10px;
overflow: hidden;
color: #1B2437;
padding: 10px;
margin: 20px;
width: 500px;
height: 200px;
background-color: #F9FDFF;
position: relative;
}
.contest-types:before {
content: '';
width: 2px;
height: 2px;
background-color: #5697fc;
position: absolute;
left: -2px;
top: -2px;
display: none;
}
.contest-types:after {
content: '';
position: absolute;
display: block;
background-color: #5697fc;
}
.contest-types:hover {
border: 2px solid #5697FC;
background-color: #FFFFFF;
animation: border 0.5s ease-out 1;
}
.contest-types:hover:after {
border-radius: 10px;
animation: border-after 0.5s ease-in-out 1;
}
.contest-types:hover:before {
display: block;
}
#keyframes border {
0%, 24% {
border-color: #BCCED4;
}
25% {
border-top-color: #5697fc;
}
49% {
border-right-color: #BCCED4;
}
50% {
border-right-color: #5697fc;
}
74% {
border-bottom-color: #BCCED4;
}
75% {
border-bottom-color: #5697fc;
}
99% {
border-left-color: #BCCED4;
}
100% {
border-color: #5697fc;
}
}
#keyframes border-after {
0% {
height: 2px;
width: 0;
top: -2px;
left: -2px;
right: auto;
bottom: auto;
}
24.99% {
width: calc(100% + 2px);
height: 2px;
top: -2px;
left: -2px;
right: auto;
bottom: auto;
}
25% {
width: 2px;
height: 0;
top: -2px;
right: -2px;
left: auto;
bottom: auto;
}
49.99% {
width: 2px;
height: calc(100% + 2px);
top: -2px;
right: -2px;
left: auto;
bottom: auto;
}
50% {
width: 0;
height: 2px;
bottom: -2px;
right: -2px;
top: auto;
left: auto;
}
74.99% {
width: calc(100% + 2px);
height: 2px;
bottom: -2px;
right: -2px;
top: auto;
left: auto;
}
75% {
width: 2px;
height: 0;
bottom: -2px;
left: -2px;
right: auto;
top: auto;
}
100% {
width: 2px;
height: calc(100% + 2px);
bottom: -2px;
left: -2px;
right: auto;
top: auto;
}
}
<div class="contest-types" id="group">
</div>
The issue is that the animation is starting in the top left then changing to the square. You can either move the starting point or use overflow hidden to fix it.
.contest-types {
border: 2px solid #BCCED4;
overflow: hidden;
border-radius: 10px;
color: #1B2437;
padding: 10px;
margin: 20px;
width: 500px;
height: 200px;
background-color: #F9FDFF;
position: relative;
}