How can I make the scroll bar stop? You can see the scroll bar which is on the left. I think there is not any problem with the HTML code but I'm sure there is a problem with the CSS code.
I first thought that it was a problem with the margin or length, but it wasn't.
Here is my CSS & HTML code, How can I fix it? or Where is the problem? -
html {
height: 100%;
}
body {
background-color: black;
}
.trans_box {
width: 180px;
height: 180px;
background-color: green;
vertical-align: middle;
display: inline-block;
position: relative;
top: 200px;
animation: block-rotate 6s linear infinite;
}
#keyframes block-rotate {
0% {transform: rotate(0);}
100% {transform: rotate(360deg);}
}
.part {
position: absolute;
width:180px;
height:180px;
-webkit-border-radius:200px 0 0 0;
-moz-border-radius:200px 0 0 0;
}
#one {
background-color:blue;
top: -70%;
transform: rotate(45deg);
}
#two {
background-color: pink;
transform: rotate(135deg);
left: 70%;
}
#three {
background-color: red;
transform: rotate(-45deg);
left: -70%;
}
#four {
background-color: antiquewhite;
transform: rotate(-135deg);
top: 70%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="mainpage.css">
</head>
<body>
<div style="text-align: center;">
<div class="trans_box">
<div class="part" id="one"></div>
<div class="part" id="two"></div>
<div class="part" id="three"></div>
<div class="part" id="four"></div>
</div>
</div>
</body>
</html>
add body {overflow: hidden;} into your CSS, fixed code is here:
html {
height: 100%;
}
body {
background-color: black;
overflow: hidden;
}
.trans_box {
width: 180px;
height: 180px;
background-color: green;
vertical-align: middle;
display: inline-block;
position: relative;
top: 200px;
animation: block-rotate 6s linear infinite;
}
#keyframes block-rotate {
0% {transform: rotate(0);}
100% {transform: rotate(360deg);}
}
.part {
position: absolute;
width:180px;
height:180px;
-webkit-border-radius:200px 0 0 0;
-moz-border-radius:200px 0 0 0;
}
#one {
background-color:blue;
top: -70%;
transform: rotate(45deg);
}
#two {
background-color: pink;
transform: rotate(135deg);
left: 70%;
}
#three {
background-color: red;
transform: rotate(-45deg);
left: -70%;
}
#four {
background-color: antiquewhite;
transform: rotate(-135deg);
top: 70%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="mainpage.css">
</head>
<body>
<div style="text-align: center;">
<div class="trans_box">
<div class="part" id="one"></div>
<div class="part" id="two"></div>
<div class="part" id="three"></div>
<div class="part" id="four"></div>
</div>
</div>
</body>
</html>
Related
Hello I am trying to have 2 pngs + animations that I would like to have one transitioning into the another. I currently have 2 working animations that are next to each other.
but I would prefer to have them stacked on each other and have one animation transisition to the next. Any ideas on how do this in css I have tried to find css conditional statements but I have not found anything
.animationDiv {
width: 750px;
height: 750px;
display: flex;
margin-left: 80em;
margin-top: 50em;
}
.hash {
z-index: 2;
width: 600px;
height: 600px;
opacity: 0%;
}
.page {
display: flex;
z-index: 3;
width: 600px;
height: 600px;
}
.page:hover {
animation: test 1.75s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 reverse backwards;
}
.hash:hover {
animation: test2 2s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 forwards;
}
#keyframes test2 {
0% {
opacity: 0%;
transform: rotate(-540deg) scale(2);
}
25% {
opacity: 25%;
}
50% {
opacity: 50%;
}
100% {
opacity: 100%;
transform: rotate(0) scale(1);
}
}
#keyframes test {
0% {
opacity: 0%;
transform: rotate(-540deg) scale(0);
}
100% {
opacity: 100%;
transform: rotate(0) scale(1);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Animations</title>
</head>
<body>
<div class="animationDiv">
<img class="page" src="icon.png" />
<img class="hash" src="hash.png" />
</div>
</body>
</html>
I'm trying to animate the paragraph which is inside the section from the bottom page to the top, but it does not work.
How can I resolve this problem?
body {
background: rgb(196, 56, 56);
height: 100%;
width: 100%;
}
section {
position: relative;
}
section p {
color: rgb(235, 197, 31);
animation: 1s slid;
}
#keyframes slid {
0% {
bottom: -100;
opacity: 0;
}
100% {
bottom: 0;
opacity: 1;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="test.css" />
<title>Document</title>
</head>
<body>
<section>
<p>I'm YASER</p>
</section>
</body>
</html>
Please add "position: absolute;" to "span p" style.
And bottom value have to contain "px".
body {
background: rgb(196, 56, 56);
height: 100%;
width: 100%;
}
section {
position: relative;
}
section p {
position: absolute;
color: rgb(235, 197, 31);
animation: 1s slid;
}
#keyframes slid {
0% {
bottom: -100px;
opacity: 0;
}
100% {
bottom: 0;
opacity: 1;
}
}
<body>
<section>
<p>I'm YASER</p>
</section>
</body>
Try with transform:
body {
background: rgb(196, 56, 56);
height: 100%;
width: 100%;
}
section {
position: relative;
}
section p {
color: rgb(235, 197, 31);
animation: 1s slid;
}
#keyframes slid {
0% {
transform: translateY(-100px);
opacity: 0;
}
100% {
transform: translateY(0px);
opacity: 1;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="test.css" />
<title>Document</title>
</head>
<body>
<section>
<p>I'm YASER</p>
</section>
</body>
</html>
I have been trying to make an animation and have almost completed it.
The only problem I'm facing is that the horizontal and vertical scrollbars aren't hiding.
I tried adding overflow:hidden property to parent div i.e. .box but still I'm not able to hide them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
overflow: hidden;
}
.rotor1 {
height: 100vw;
background: rgb(152, 227, 250);
animation: 9.2s keepRotating infinite ease-in-out;
z-index: 3;
}
.rotor2 {
height: 102vw;
background: rgb(204, 238, 248);
border-radius: 30%;
animation: 9.05s keepRotating infinite ease-in-out;
animation-timing-function: linear;
}
.rotor1,
.rotor2 {
width: 110vw;
position: absolute;
top: -78vw;
border-radius: 30%;
animation-timing-function: linear;
}
#keyframes keepRotating {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="box">
<div class="rotor1"></div>
<div class="rotor2"></div>
</div>
</body>
</html>
Is there a way to hide both the horizontal and the vertical scrollbars??
Use overflow: hidden; on body
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body{
overflow: hidden;
}
.box {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
overflow: hidden;
}
.rotor1 {
height: 100vw;
background: rgb(152, 227, 250);
animation: 9.2s keepRotating infinite ease-in-out;
z-index: 3;
}
.rotor2 {
height: 102vw;
background: rgb(204, 238, 248);
border-radius: 30%;
animation: 9.05s keepRotating infinite ease-in-out;
animation-timing-function: linear;
}
.rotor1,
.rotor2 {
width: 110vw;
position: absolute;
top: -78vw;
border-radius: 30%;
animation-timing-function: linear;
}
#keyframes keepRotating {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="box">
<div class="rotor1"></div>
<div class="rotor2"></div>
</div>
</body>
</html>
I'm trying to create a searchlight/ spotlight effect that will highlight some text using CSS animations. Heres a fiddle.
However, my spotlight does not reach up to the top of the page and instead reveals the black background to different degrees throughout the animation.
What I'm trying to achieve looks something like this:
I was wondering if anybody had any ideas as to how to modify my spotlight to vertically fill the entire page?
h1 {
color: green;
position: absolute;
}
body {
background-color: black;
overflow: hidden;
}
.spotlight {
position: relative;
width: 10vw;
height: 0vh;
border-top: 100vh solid rgba(255, 255, 255, 0.25);
border-left: 12vw solid transparent;
border-right: 12vw solid transparent;
background-color: transparent;
-webkit-transform-origin: 50% 100% 0;
z-index: 0;
-webkit-animation: move 7s ease-in-out;
}
#-webkit-keyframes move {
0% {
-webkit-transform: rotate(-30deg) scaleX(0.4);
}
50% {
-webkit-transform: rotate(30deg) scaleX(0.4);
}
100% {
-webkit-transform: rotate(0deg);
}
}
<html>
<head></head>
<body>
<h1>
Some text
</h1>
<div class="spotlight spot1"></div>
</body>
</html>
Simply use display:absolute instead of relative and modify the code a bit ;)
h1 {
color: green;
position: absolute;
z-index: 1;
}
body {
background-color: black;
overflow: hidden;
}
.spotlight {
position: absolute;
width: 10vw;
bottom: -20px;
border-top: 140vh solid rgba(245, 245, 245, 0.493);
border-left: 12vw solid transparent;
border-right: 12vw solid transparent;
background-color: transparent;
transform-origin: 50% 100% 0;
z-index: 0;
opacity: 1;
will-change: auto;
animation: move 7s ease-in-out;
}
#keyframes move {
0% {
transform: rotate(-30deg) scaleX(0.4);
}
50% {
transform: rotate(30deg) scaleX(0.4);
}
100% {
transform: rotate(0deg);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>
Some text
</h1>
<div class="spotlight spot1"></div>
</body>
</html>
I was making a carousel in the vertical direction, but on rotating 180deg of the X-axis, the backside of the carousel seems like its orientation is not proper in the 3D space.
I would prefer that the solution provided contains not just the code, but also reasoning why this is happening.
#container1 {
position: relative;
left: 100px;
width: 200px;
height: 600px;
transform-style: preserve-3d;
transform-origin: 0 300px 0;
perspective-origin: 100px 300px 0;
perspective: 800px;
animation-name: rotate;
animation-duration: 5s;
}
#keyframes rotate {
from {transform: rotateX(0deg);}
to {transform: rotateX(180deg);}
}
#container1 div {
position: absolute;
top: 225px;
width: 150px;
height: 150px;
}
#div1 {
transform: rotateX(0deg) translateZ(130px);
background-color: red;
}
#div2 {
transform: rotateX(60deg) translateZ(130px);
background-color: blue;
}
#div3 {
transform: rotateX(120deg) translateZ(130px);
background-color: green;
}
#div4 {
transform: rotateX(180deg) translateZ(130px);
background-color: brown;
}
#div5 {
transform: rotateX(240deg) translateZ(130px);
background-color: orange;
}
#div6 {
transform: rotateX(300deg) translateZ(130px);
background-color: pink;
}
<html>
<head>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="container1">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
<div id="div6"></div>
</div>
<script src="script.js"></script>
</body>
</html>
The problem is you put perspective in the #container. You should put the perspective in the "stage". Here you can the implementation: JSFiddle