body{
margin: 0;
padding: 0;
background-color: #073146;
}
.box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 350px;
height: 180px;
background-color: #001e2d;
box-sizing: border-box;
overflow: hidden;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
border: 2px solid rgba(0, 0, 0, 0.5);
}
.box::before{
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background-color: rgba(255,255,255,0.1);
transition: 0.5s;
pointer-events: none;
}
.box:hover:before{
left: -50%;
transform: skewX(-5deg);
}
/* this controls the text inside the box */
.box .content{
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border: 2px solid #ffeb3b;
padding: 30px;
text-align: center;
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.5);
}
.box .content h1{
color: white;
font-size: 30px;
margin: 0 0 10px;
padding: 0;
}
.box .content p{
color: white;
}
.box span{
position: absolute;
top: 0;
left: 0;
width: 149%;
height: 100%;
display: block;
box-sizing: border-box;
}
.box span:nth-child(1){
transform: rotate(0deg);
}
.box span:nth-child(2){
transform: rotate(90deg);
}
.box span:nth-child(3){
transform: rotate(180deg);
}
.box span:nth-child(4){
transform: rotate(270deg);
}
/* setting up one line */
.box span:before{
content: '';
position: absolute;
width: 100%;
height: 2px;
background-color: #0093ff;
animation: animate 4s linear infinite;
}
#keyframes animate {
0%{
transform: scaleX(0);
transform-origin: left;
}
50%{
transform: scaleX(1);
transform-origin: left;
}
50.1%{
transform: scaleX(1);
transform-origin: right;
}
100%{
transform: scaleX(0);
transform-origin: right;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="box">
<span></span>
<span></span>
<span></span>
<span></span>
<div class="content">
<h1>Some heaading</h1>
<p>Three border is going perfect but the fourth border is messing up.</p>
</div>
</div>
</body>
</html>
I created this CSS but the problem with my CSS is I am not able to get all four borders on end. I am managed to get 3 borders but the fourth border does not seem to fit properly. I was wondering if someone can guide me on how to arrange all four borders blue color at the end of the card. Could some one please guide or help to get proper animation. I would really appreciate some help on this.
Thank you in advance
Use two animation effects, Because the width and height are different, changing the Angle of the animation line is not on the edge.
body{
margin: 0;
padding: 0;
background-color: #073146;
}
.box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 350px;
height: 180px;
background-color: #001e2d;
box-sizing: border-box;
overflow: hidden;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
border: 2px solid rgba(0, 0, 0, 0.5);
}
.box::before{
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background-color: rgba(255,255,255,0.1);
transition: 0.5s;
pointer-events: none;
}
.box:hover:before{
left: -50%;
transform: skewX(-5deg);
}
/* this controls the text inside the box */
.box .content{
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border: 2px solid #ffeb3b;
padding: 30px;
text-align: center;
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.5);
}
.box .content h1{
color: white;
font-size: 30px;
margin: 0 0 10px;
padding: 0;
}
.box .content p{
color: white;
}
.box span{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
box-sizing: border-box;
}
.box span:nth-child(3){
transform: rotate(180deg);
}
.box span:nth-child(4){
transform: rotate(180deg);
}
/* setting up one line */
.box span:nth-child(odd):before{
content: '';
position: absolute;
width: 100%;
height: 2px;
background-color: #0093ff;
animation: animate 4s linear infinite;
}
.box span:nth-child(even):before{
content: '';
position: absolute;
height: 100%;
width: 2px;
background-color: #0093ff;
animation: animate2 4s linear infinite;
}
#keyframes animate {
0%{
transform: scaleX(0);
transform-origin: left;
}
50%{
transform: scaleX(1);
transform-origin: left;
}
50.1%{
transform: scaleX(1);
transform-origin: right;
}
100%{
transform: scaleX(0);
transform-origin: right;
}
}
#keyframes animate2 {
0%{
transform: scaleY(0);
transform-origin: bottom;
}
50%{
transform: scaleY(1);
transform-origin: bottom;
}
50.1%{
transform: scaleY(1);
transform-origin: top;
}
100%{
transform: scaleY(0);
transform-origin: top;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="box">
<span></span>
<span></span>
<span></span>
<span></span>
<div class="content">
<h1>Some heaading</h1>
<p>Three border is going perfect but the fourth border is messing up.</p>
</div>
</div>
</body>
</html>
.box span:nth-child(2){
transform: rotate(90deg);
right: -170px;
left: auto;
}.box span:nth-child(2){
transform: rotate(90deg);
right: -170px;
left: auto;
}
.box span:nth-child(3){
transform: rotate(180deg);
}
.box span:nth-child(4){
transform: rotate(270deg);
left: -170px;
}
I dont know if this is right or there is any other proper solution but this work for me. Thank you to the commentor to direct me in proper direction. I appreciate it
You need to set the width: property to the animation's full width underneath .box span, and then set its second and fourth nth-child's right: and left properties. Something like:
body {
margin: 0;
padding: 0;
background-color: #073146;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 350px;
height: 180px;
background-color: #001e2d;
box-sizing: border-box;
overflow: hidden;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
border: 2px solid rgba(0, 0, 0, 0.5);
}
.box::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.1);
transition: 0.5s;
pointer-events: none;
}
.box:hover:before {
left: -50%;
transform: skewX(-5deg);
}
/* this controls the text inside the box */
.box .content {
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border: 2px solid #ffeb3b;
padding: 30px;
text-align: center;
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.5);
}
.box .content h1 {
color: white;
font-size: 30px;
margin: 0 0 10px;
padding: 0;
}
.box .content p {
color: white;
}
.box span {
position: absolute;
top: 0;
left: 0;
width: 350px;
height: 100%;
display: block;
box-sizing: border-box;
}
.box span:nth-child(1) {
transform: rotate(0deg);
}
.box span:nth-child(2) {
transform: rotate(90deg);
right: -87px;
left: auto;
}
.box span:nth-child(3) {
transform: rotate(180deg);
}
.box span:nth-child(4) {
transform: rotate(270deg);
left: -87px;
right: auto;
}
/* setting up one line */
.box span::before {
content: '';
position: absolute;
width: 100%;
height: 2px;
background-color: #0093ff;
animation: animate 4s linear infinite;
}
#keyframes animate {
0% {
transform: scaleX(0);
transform-origin: left;
}
50% {
transform: scaleX(1);
transform-origin: left;
}
50.1% {
transform: scaleX(1);
transform-origin: right;
}
100% {
transform: scaleX(0);
transform-origin: right;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="box">
<span></span>
<span></span>
<span></span>
<span></span>
<div class="content">
<h1>Some heaading</h1>
<p>Three border is going perfect but the fourth border is messing up.</p>
</div>
</div>
</body>
</html>
Here is a simplified version where you will need few lines of code. The whole animation can be done using background without extra elements:
body {
margin: 0;
background-color: #073146;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 350px;
background:
linear-gradient(#0093ff 0 0) 0 0,
linear-gradient(#0093ff 0 0) 100% 0,
linear-gradient(#0093ff 0 0) 100% 100%,
linear-gradient(#0093ff 0 0) 0 100%;
background-size:100% 2px,2px 100%;
background-repeat:no-repeat;
background-color: #001e2d;
box-sizing: border-box;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
border: 2px solid rgba(0, 0, 0, 0.5);
overflow:hidden;
animation:animate 2s linear infinite;
}
#keyframes animate{
from {
background-size:0% 2px,2px 0%;
background-position:0 0,100% 0,100% 100%,0 100%;
}
50% {
background-size:100% 2px,2px 100%;
background-position:0 0,100% 0,100% 100%,0 100%;
}
50.1% {
background-size:100% 2px,2px 100%;
background-position:100% 0,100% 100%,0 100%,0 0;
}
100% {
background-size:0% 2px,2px 0%;
background-position:100% 0,100% 100%,0 100%,0 0;
}
}
.box::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background-color: rgba(255, 255, 255, 0.1);
transition: 0.5s;
pointer-events: none;
transform-origin:top;
}
.box:hover:before {
width:50%;
transform: skewX(-5deg);
}
.box .content {
margin:15px;
border: 2px solid #ffeb3b;
padding: 30px;
text-align: center;
color: white;
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.5);
}
.box .content h1 {
font-size: 30px;
margin: 0 0 10px;
}
<div class="box">
<div class="content">
<h1>Some heaading</h1>
<p>Three border is going perfect but the fourth border is messing up.</p>
</div>
</div>
Related question with a similar effect: Drawing border colors during a CSS transition
Related
I am making this rounded scroll down button with an arrow inside. On hover I wanted to apply an animation that makes the arrow go from above to below the rounded div, and it should be hidden when outside the div.
I tried using overflow: hidden but for some reason it doesn't work. Does anyone has a solution for this please?
Codepen: https://codepen.io/RaphaelleD/pen/vYpqxpm
#keyframes tipUp {
0% {
transform: translateY(-10px) rotateZ(225deg);
}
100% {
transform: translateY(100px) rotateZ(225deg);
}
}
#keyframes lineUp {
0% {
transform: translateY(-10px);
}
100% {
transform: translateY(100px);
}
}
.scrolldown {
position: relative;
margin: 0 auto;
}
.scrolldown p {
font-size: 1rem;
font-weight: 600;
padding-bottom: 0.8rem;
text-align: center;
}
.scrolldown__arrow {
width: 6rem;
height: 6rem;
border: 6px solid black;
border-radius: 50%;
margin: 0 auto;
overflow: hidden;
}
.scrolldown__arrow:before {
position: absolute;
display: inline-block;
content: "";
background: black;
width: 10px;
height: 45px;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -5px;
transform: translateY(50px);
}
.scrolldown__arrow:after {
position: absolute;
display: inline-block;
content: "";
width: 22px;
height: 22px;
color: black;
border-top: 9px solid;
border-left: 9px solid;
transform: rotateZ(45deg);
top: 50%;
left: 50%;
margin-top: -30px;
margin-left: -15.5px;
transform: translateY(50px) rotateZ(225deg);
}
.scrolldown__arrow:hover:before {
animation: lineUp 1s cubic-bezier(0, 0.6, 1, 0.4) infinite 0.5s;
}
.scrolldown__arrow:hover:after {
animation: tipUp 1s cubic-bezier(0, 0.6, 1, 0.4) infinite 0.5s;
}
}
}
<body>
<div class="scrolldown">
<p>SCROLL DOWN</p>
<div class="scrolldown__arrow"></div>
</div>
</body>
I believe this is because of position: absolute, which takes the arrow out of the normal flow. In order to kinda preserve it in the flow, I've added position: relative to the arrow parent, and had to adjust top position as well, seems to work as expected:
#keyframes tipUp {
0% {
transform: translateY(-10px) rotateZ(225deg);
}
100% {
transform: translateY(100px) rotateZ(225deg);
}
}
#keyframes lineUp {
0% {
transform: translateY(-10px);
}
100% {
transform: translateY(100px);
}
}
.scrolldown {
position: relative;
margin: 0 auto;
}
.scrolldown p {
font-size: 1rem;
font-weight: 600;
padding-bottom: 0.8rem;
text-align: center;
}
.scrolldown__arrow {
width: 6rem;
height: 6rem;
border: 6px solid black;
border-radius: 50%;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.scrolldown__arrow:before {
position: absolute;
display: inline-block;
content: "";
background: black;
width: 10px;
height: 45px;
top: 25%;
left: 50%;
margin-top: -50px;
margin-left: -5px;
transform: translateY(50px);
}
.scrolldown__arrow:after {
position: absolute;
display: inline-block;
content: "";
width: 22px;
height: 22px;
color: black;
border-top: 9px solid;
border-left: 9px solid;
transform: rotateZ(45deg);
top: 25%;
left: 50%;
margin-top: -30px;
margin-left: -15.5px;
transform: translateY(50px) rotateZ(225deg);
}
.scrolldown__arrow:hover:before {
animation: lineUp 1s cubic-bezier(0, 0.6, 1, 0.4) infinite 0.5s;
}
.scrolldown__arrow:hover:after {
animation: tipUp 1s cubic-bezier(0, 0.6, 1, 0.4) infinite 0.5s;
}
}
}
<body>
<div class="scrolldown">
<p>SCROLL DOWN</p>
<div class="scrolldown__arrow"></div>
</div>
</body>
I was working on a custom design On WordPress website ,
But I'm stuck in a problem and I don't know how to solve it.
The end result is supposed to be like this :
result
but I am getting this result In my end :
img
The problem is that the closing (x) does not appear.
code :
/* Pop Up Animation Ramadan */
#keyframes flipInX {
from {
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
animation-timing-function: ease-in;
opacity: 0
}
40% {
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
animation-timing-function: ease-in
}
60% {
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1
}
80% {
transform: perspective(400px) rotate3d(1, 0, 0, -5deg)
}
to {
transform: perspective(400px)
}
}
#keyframes change_color {
0% {
background: #5ac7da
}
33.33% {
background: #3173bd
}
66.66% {
background: #0d4a8d
}
100% {
background: #5ac7da
}
}
#keyframes run_hari18 {
0% {
transform: translate(0%, 0);
opacity: 0
}
50% {
transform: translate(100%, 0);
opacity: 1
}
100% {
transform: translate(100%, 0);
opacity: 0
}
}
#keyframes sun_movement {
0% {
top: 50px
}
100% {
top: 50px
}
}
#keyframes run_malam18 {
0% {
transform: translate(-20%, 0);
opacity: 0
}
49.99% {
transform: translate(0%, 0);
opacity: 1
}
99.99% {
transform: translate(20%, 0);
opacity: 0
}
100% {
transform: translate(-20%, 0);
opacity: 1
}
}
#keyframes moon_movement {
0% {
transform: translate(-200%, 0);
opacity: 0
}
49.99% {
transform: translate(0%, 0);
opacity: 1
}
99.99% {
transform: translate(200%, 0);
opacity: 0
}
100% {
transform: translate(-200%, 0);
opacity: 1
}
}
/*custom*/
#arlinapuasa2018 {
display: block;
background: #fff;
position: fixed;
top: 25%;
right: 0;
left: 0;
margin: auto;
text-align: center;
max-width: 660px;
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.1), 0 15px 12px rgba(0, 0, 0, 0.12);
z-index: 99;
min-height: 350px;
padding: 20px;
overflow: hidden;
border-radius: 10px;
animation: change_color 7s infinite linear, flipInX 1s linear
}
#arlinapuasa2018 .puasa18 {
position: absolute;
color: #fff;
font-size: 2rem;
font-weight: 400;
padding: 30px;
z-index: 99999;
text-align: center;
margin: auto;
left: 0;
right: 0;
top: 20%
}
#arlinapuasa2018 .puasa18 p {
margin: 20px auto 20px;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2)
}
#arlinapuasa2018 .puasa18 .ramadan2018 {
font-size: 3rem;
font-weight: 700
}
#arlinapuasa2018 a.close-popup {
position: absolute;
bottom: 1px;
right: 1px;
color: #fff;
text-align: center;
border-radius: 100%;
cursor: pointer;
z-index: 999999;
transition: all .3s
}
#arlinapuasa2018 a.close-popup:hover {
color: #fff
}
#arlinapuasa2018 a.close-popup:active {
opacity: 0
}
#arlinapuasa2018 a.close-popup i {
font-family: fontawesome;
font-size: 20px;
font-weight: normal;
font-style: normal;
transform: rotate(270deg);
transition: all .3s
}
#arlinapuasa2018 a.close-popup:hover i {
transform: rotate(360deg)
}
.gunung18 {
width: 400px;
height: 300px;
display: block;
background: #4aad52;
position: absolute;
bottom: -150px;
transform: rotate(45deg);
border-radius: 50px;
z-index: 2;
left: 0;
}
.gunung18.behind {
background: #42a54a;
right: -120px;
bottom: -180px;
z-index: 1
}
.hari18 {
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
animation: run_hari18 7s infinite linear
}
.hari18 .awan18 {
margin: 30px auto;
width: 150px;
height: 70px;
display: block;
background: #e7e7e7;
border-radius: 35px;
border: 10px solid #ffffff;
box-shadow: inset 0 -7px 0 0 #d7d7d7;
position: absolute;
top: 90px;
left: 50px
}
.hari18 .awan18:before {
content: ''', ''';
width: 65px;
height: 35px;
display: block;
background: #e7e7e7;
border-radius: 35px 35px 0 0;
border: 10px solid #ffffff;
border-bottom: 0;
position: absolute;
top: -35px;
left: 20px
}
.hari18 .awan18.invert {
top: 60px;
left: 250px
}
.hari18 .awan18.invert:before {
left: 50px
}
.hari18 .sun {
width: 75px;
height: 75px;
display: block;
background: #fff297;
border-radius: 50%;
box-shadow: inset -5px -5px 0 0 #ddc991;
position: absolute;
top: 50px;
left: 0;
animation: sun_movement 7s infinite linear
}
.malam18 {
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
animation: run_malam18 7s infinite linear
}
.malam18 .bintang18 .star {
width: 5px;
height: 5px;
display: block;
background: #f7f7f7;
border-radius: 50%;
position: absolute
}
.malam18 .bintang18 .star:nth-child(1) {
top: 50px;
left: 50px
}
.malam18 .bintang18 .star:nth-child(2) {
top: 200px;
left: 70px
}
.malam18 .bintang18 .star:nth-child(3) {
top: 100px;
left: 300px
}
.malam18 .bintang18 .star:nth-child(4) {
top: 50px;
left: 220px
}
.malam18 .bintang18 .star:nth-child(5) {
top: 160px;
left: 320px
}
.malam18 .bintang18 .star:nth-child(6) {
top: 150px;
left: 230px
}
.malam18 .bintang18 .star:nth-child(7) {
top: 180px;
left: 400px
}
.malam18 .bintang18 .star:nth-child(8) {
top: 50px;
left: 360px
}
.malam18 .moon {
width: 75px;
height: 75px;
display: block;
background: #d7d7d7;
border-radius: 50%;
box-shadow: inset -5px -5px 0 0 #c7c7c7;
position: absolute;
top: 50px;
left: 100px;
animation: moon_movement 7s infinite linear
}
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.js"></script>
<link rel="stylesheet" href="css.css">
<!-- Start Ramdan -->
<div id='arlinapuasa2018'>
<div class="overflow-hid">
<div class='puasa18'>
<p>كل عام والأمة الأسلامية بخير</p>
<p><span class='ramadan2018'>رمضان كريم</span></p>
</div>
<div class='gunung18'></div>
<div class='gunung18 behind'></div>
<div class='hari18'>
<div class='awan18'></div>
<div class='awan18 invert'></div>
<div class='sun'></div>
</div>
<div class='malam18'>
<div class='bintang18'>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
</div>
<div class='moon'></div>
</div>
</div>
<a class='close-popup' href='#' title='close'><i class='fa fa-times'></i></a>
</div>
<!-- End Ramdan -->
<!-- ramdan js -->
<script type='text/javascript'>
//<![CDATA[
// Ramadan
jQuery(function($) {
$(window).bind("load",function(){
$("#arlinapuasa2018").animate({top:"15%"},1e3),
$("a.close-popup").click(function(){
return $(this).parent().fadeOut(2e3),!2;
})
});
});
</script>
I hope someone here can help me with that .
I just want to be able to cloes tap In this design
You can add
$("#close-popup").click(function() {
$("#arlinapuasa2018").remove();
})
to your code.
and if you don't see the X check if your fontawesome tag works or just replace:
<a class='close-popup' href='#' title='close'><i class='fa fa-times'></i></a>`
with
<a class='close-popup' href='#' title='close'>X</a>`
Or add z-index: 1000; on #close-popup to put in the foreground.
In a 1920*1080 screen, the play button and the waves outside are exactly inside the laptop image screen and everything is fine.
But when I resize the screen width the play button moves independently to the laptop screen and gets out of the screen of the laptop image. it also doesn't change its size so it gets ugly!
How can I make this responsive to the size of the laptop image screen and fix the play button to stay inside the laptop screen?
I tried flexbox but it seems that I need a hand...Please help...
Any Suggestions Would Be Greatly Appreciated...
.videoContainer {
padding-top: 14rem;
}
.video-play-button {
position: relative;
z-index: 10;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
box-sizing: content-box;
display: block;
width: 32px;
height: 44px;
/* background: #fa183d; */
border-radius: 50%;
padding: 18px 20px 18px 28px;
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
}
.video-play-button:before {
content: "";
position: absolute;
z-index: 0;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
display: block;
width: 80px;
height: 80px;
background: #ba1f24;
border-radius: 50%;
}
.video-play-button:after {
content: "";
position: absolute;
z-index: 1;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
display: block;
width: 80px;
height: 80px;
background: #fa183d;
border-radius: 50%;
transition: all 200ms;
}
.video-play-button:hover:after {
background-color: darken(#fa183d, 10%);
}
.video-play-button img {
position: relative;
z-index: 3;
max-width: 100%;
width: auto;
height: auto;
}
.video-play-button span {
display: block;
position: relative;
z-index: 3;
width: 0;
height: 0;
border-left: 32px solid #fff;
border-top: 22px solid transparent;
border-bottom: 22px solid transparent;
}
.video-box-computer {
position: relative;
display: flex;
justify-content: center;
top: 180px
}
.videoImage {
width: 45%;
}
.waves-block {
position: absolute;
float: center;
width: 384px;
width: 24rem;
height: 384px;
height: 24rem;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 1;
}
.waves-block .waves {
position: absolute;
width: 24rem;
height: 24rem;
background: rgb(178, 163, 214, 0.2);
opacity: 0;
border-radius: 320px;
-webkit-animation: waves 3s ease-in-out infinite;
animation: waves 3s ease-in-out infinite;
}
.waves-block .wave-1 {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.waves-block .wave-2 {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.waves-block .wave-3 {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
#keyframes waves {
0% {
-webkit-transform: scale(0.2, 0.2);
transform: scale(0.2, 0.2);
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
50% {
opacity: 0.9;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
}
100% {
-webkit-transform: scale(0.9, 0.9);
transform: scale(0.9, 0.9);
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
}
<section class="videoContainer">
<div class="video-box-computer">
<img class="videoImage" src="http://demo.graygrids.com/themes/beam/imgs/macbook.png">
</div>
<a id="play-videoA" class="video-play-button" href="#">
<span></span>
<div class="waves-block">
<div class="waves wave-1"></div>
<div class="waves wave-2"></div>
<div class="waves wave-3"></div>
</div>
</a>
</section>
I have two different containers one contains a play button with animation effects and the other is just a wave animation.
I can't find a solution to make them one by putting the play button over the wave animation so that we have a play button with a wave effect outside.
/*Video Player*/
.videoContainer {
padding-top: 10rem;
}
.video-play-button {
position: relative;
z-index: 10;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
box-sizing: content-box;
display: block;
width: 32px;
height: 44px;
/* background: #fa183d; */
border-radius: 50%;
padding: 18px 20px 18px 28px;
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
}
.video-play-button:before {
content: "";
position: absolute;
z-index: 0;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
display: block;
width: 80px;
height: 80px;
background: #ba1f24;
border-radius: 50%;
}
.video-play-button:after {
content: "";
position: absolute;
z-index: 1;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
display: block;
width: 80px;
height: 80px;
background: #fa183d;
border-radius: 50%;
transition: all 200ms;
}
.video-play-button:hover:after {
background-color: darken(#fa183d, 10%);
}
.video-play-button img {
position: relative;
z-index: 3;
max-width: 100%;
width: auto;
height: auto;
}
.video-play-button span {
display: block;
position: relative;
z-index: 3;
width: 0;
height: 0;
border-left: 32px solid #fff;
border-top: 22px solid transparent;
border-bottom: 22px solid transparent;
}
.video-overlay {
position: fixed;
width: 100%;
height: auto;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 10px;
background: rgba(0,0,0,0.80);
opacity: 0;
transition: all ease 500ms;
}
.video-overlay.open {
position: fixed;
top: 0;
left: 0;
z-index: 999;
opacity: 1;
}
.video-overlay-close {
position: relative;
z-index: 1000;
top:75px;
right: 75px;
font-size: 40px;
line-height: 1;
font-weight: 400;
color: #fff;
text-decoration: none;
cursor: pointer;
transition: all 200ms;
}
.video-overlay-close:hover {
color: #fa183d;
}
.video-overlay iframe {
position: absolute;
top: 54%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
width: 80%;
height: 80%;
box-shadow: 0 0 15px rgba(0,0,0,0.75);
}
/*=======================================================
VIDEO POP UP:
========================================================*/
.waves-block {
position: relative;
margin-top: 260px;
margin-bottom: 100px;
float: center;
width: 384px;
width: 24rem;
height: 384px;
height: 24rem;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 1;
}
.waves-block .waves {
position: absolute;
width: 384px;
width: 24rem;
height: 384px;
height: 24rem;
background: rgb(178, 163, 214, 0.2);
opacity: 0;
border-radius: 320px;
-webkit-animation: waves 3s ease-in-out infinite;
animation: waves 3s ease-in-out infinite;
}
.waves-block .wave-1 {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.waves-block .wave-2 {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.waves-block .wave-3 {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
#keyframes waves {
0% {
-webkit-transform: scale(0.2, 0.2);
transform: scale(0.2, 0.2);
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
50% {
opacity: 0.9;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
}
100% {
-webkit-transform: scale(0.9, 0.9);
transform: scale(0.9, 0.9);
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
}
<section class="videoContainer">
<a id="play-video" class="video-play-button" href="#">
<span></span>
</a>
<div id="video-overlay" class="video-overlay">
<a class="video-overlay-close">×</a>
</div>
</section>
<div class="waves-block">
<div class="waves wave-1"></div>
<div class="waves wave-2"></div>
<div class="waves wave-3"></div>
</div>
I have tried to change the positions but because of the margins, it was a failure.
Any suggestions would be greatly appreciated.
add the wave to the play-video element
remove the margins from wave element
set wave element to position:absolute; instead of relative
/*Video Player*/
.videoContainer {
padding-top: 10rem;
}
.video-play-button {
position: relative;
z-index: 10;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
box-sizing: content-box;
display: block;
width: 32px;
height: 44px;
/* background: #fa183d; */
border-radius: 50%;
padding: 18px 20px 18px 28px;
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
}
.video-play-button:before {
content: "";
position: absolute;
z-index: 0;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
display: block;
width: 80px;
height: 80px;
background: #ba1f24;
border-radius: 50%;
}
.video-play-button:after {
content: "";
position: absolute;
z-index: 1;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
display: block;
width: 80px;
height: 80px;
background: #fa183d;
border-radius: 50%;
transition: all 200ms;
}
.video-play-button:hover:after {
background-color: darken(#fa183d, 10%);
}
.video-play-button img {
position: relative;
z-index: 3;
max-width: 100%;
width: auto;
height: auto;
}
.video-play-button span {
display: block;
position: relative;
z-index: 3;
width: 0;
height: 0;
border-left: 32px solid #fff;
border-top: 22px solid transparent;
border-bottom: 22px solid transparent;
}
.video-overlay {
position: fixed;
width: 100%;
height: auto;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 10px;
background: rgba(0,0,0,0.80);
opacity: 0;
transition: all ease 500ms;
}
.video-overlay.open {
position: fixed;
top: 0;
left: 0;
z-index: 999;
opacity: 1;
}
.video-overlay-close {
position: relative;
z-index: 1000;
top:75px;
right: 75px;
font-size: 40px;
line-height: 1;
font-weight: 400;
color: #fff;
text-decoration: none;
cursor: pointer;
transition: all 200ms;
}
.video-overlay-close:hover {
color: #fa183d;
}
.video-overlay iframe {
position: absolute;
top: 54%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
width: 80%;
height: 80%;
box-shadow: 0 0 15px rgba(0,0,0,0.75);
}
/*=======================================================
VIDEO POP UP:
========================================================*/
.waves-block {
position: absolute;
float: center;
width: 384px;
width: 24rem;
height: 384px;
height: 24rem;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 1;
}
.waves-block .waves {
position: absolute;
width: 384px;
width: 24rem;
height: 384px;
height: 24rem;
background: rgb(178, 163, 214, 0.2);
opacity: 0;
border-radius: 320px;
-webkit-animation: waves 3s ease-in-out infinite;
animation: waves 3s ease-in-out infinite;
}
.waves-block .wave-1 {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.waves-block .wave-2 {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.waves-block .wave-3 {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
#keyframes waves {
0% {
-webkit-transform: scale(0.2, 0.2);
transform: scale(0.2, 0.2);
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
50% {
opacity: 0.9;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
}
100% {
-webkit-transform: scale(0.9, 0.9);
transform: scale(0.9, 0.9);
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
}
<section class="videoContainer">
<a id="play-video" class="video-play-button" href="#">
<span></span>
<div class="waves-block">
<div class="waves wave-1"></div>
<div class="waves wave-2"></div>
<div class="waves wave-3"></div>
</div>
</a>
<div id="video-overlay" class="video-overlay">
<a class="video-overlay-close">×</a>
</div>
</section>
When hover, I would like to translate an icon but CSS is not be effectible to it.
#humberger {
position: relative;
height: 24px;
width: 24px;
display: inline-block;
box-sizing: border-box;
}
#humberger div {
position: absolute;
left: 0;
height: 4px;
width: 24px;
background-color: #444;
border-radius: 2px;
box-sizing: border-box;
}
#humberger div:nth-of-type(1) {
top: 0;
}
#humberger div:nth-of-type(2) {
top: 10px;
}
#humberger div:nth-of-type(3) {
bottom: 0;
}
#humberger:hover {
div:nth-of-type(1) {
transform: rotate(20deg);
}
div:nth-of-type(2) {
transform: translateX(100px);
background: rgba(255, 255, 255, 0);
}
div:nth-of-type(3) {
transform: rotate(-20deg);
}
}
<div id="humberger">
<div onclick='openNav()'></div>
<div onclick='openNav()'></div>
<div onclick='openNav()'></div>
</div>
<span class='icon-title'>Open</span>
I am expecting the translation like below.
If someone gave me any knowledge to solve this, I would be very happy.
I think your CSS notation is not valid.
Try this structure instead:
#humberger:hover > div:nth-of-type(1){
transform: rotate(20deg);
cursor: pointer;
}
(tested and works)
Plz try this code..
css
#humberger div{
position: absolute;
left:0;
height:4px;
width: 24px;
background-color: #444;
border-radius: 2px;
box-sizing: border-box;
transition: 0.5s all ease 0s;
}
#humberger:hover div {
transition: 0.5s all ease 0s;
}
#humberger div:nth-of-type(1){
top:0;
}
#humberger div:nth-of-type(2) {
top: 10px;
}
#humberger div:nth-of-type(3) {
bottom:0;
}
#humberger:hover div:nth-of-type(1){
transform: rotate(45deg);
top: 10px;
}
#humberger:hover div:nth-of-type(2){
background: rgba(255, 255, 255, 0);
}
#humberger:hover div:nth-of-type(3){
transform: rotate(-45deg);
bottom: 10px;
}
Add transition time & transition-origin and adjust the degree of rotation.
#humberger div{
position: absolute;
left:0;
height:4px;
width: 24px;
background-color: #444;
border-radius: 2px;
box-sizing: border-box;
transition: .2s; /*Add transition time*/
transform-origin: 100% center; /*Add transform origin*/
}
#humberger:hover{
div:nth-of-type(1){
transform: rotate(-55deg); /*Adjust angle*/
}
div:nth-of-type(2){
transform: translateX(100px);
background: rgba(255, 255, 255, 0);
}
div:nth-of-type(3){
transform: rotate(55deg); /*Adjust angle*/
}
}
kindly follow the SASS Structure.
this is the SASS Code for your structure:
#humberger {
position: relative;
height: 24px;
width: 24px;
display: inline-block;
box-sizing: border-box;
div{
position: absolute;
left:0;
height:4px;
width: 24px;
background-color: #444;
border-radius: 2px;
box-sizing: border-box;
transition: all 0.3s;
&:nth-of-type(1){
top:0;
}
&:nth-of-type(2) {
top: 10px;
}
&:nth-of-type(3) {
bottom:0;
}
}
&:hover{
div{
&:nth-of-type(1){
transform: rotate(45deg);
top: 0;
bottom: 0;
margin: auto;
}
&:nth-of-type(2){
transform: translateX(100px);
background: rgba(255, 255, 255, 0);
}
&:nth-of-type(3){
transform: rotate(-45deg);
top: 0;
bottom: 0;
margin: auto;
}
}
}
}
this is the code snippet with normal css.
#humberger {
position: relative;
height: 24px;
width: 24px;
display: inline-block;
box-sizing: border-box;
}
#humberger div {
position: absolute;
left: 0;
height: 4px;
width: 24px;
background-color: #444;
border-radius: 2px;
box-sizing: border-box;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
#humberger div:nth-of-type(1) {
top: 0;
}
#humberger div:nth-of-type(2) {
top: 10px;
}
#humberger div:nth-of-type(3) {
bottom: 0;
}
#humberger:hover div:nth-of-type(1) {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
top: 0;
bottom: 0;
margin: auto;
}
#humberger:hover div:nth-of-type(2) {
-webkit-transform: translateX(100px);
transform: translateX(100px);
background: rgba(255, 255, 255, 0);
}
#humberger:hover div:nth-of-type(3) {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 0;
bottom: 0;
margin: auto;
}
<div id="humberger">
<div onclick='openNav()'></div>
<div onclick='openNav()'></div>
<div onclick='openNav()'></div>
</div>
<span class='icon-title'>Open</span>
the above SASS code is work same like the Snippet.
I hope this answer will helpful to you.
Thank You...