I was making a CSS box design. when I'm done I saw my website keep moving up and down at below, then I saw my background color had 2 but just a little at the bottom. when I try to delete coding #keyframes animate my website was stopping moving and down. can you help me
here my coding at CSS file
.square {
position: relative;
height: 400px;
width: 400px;
display: flex;
justify-content: center;
align-items: center;
}
.square span:nth-child(1) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid rgb(228, 43, 73);
border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
transition: 0.5s;
animation: animate 6s linear infinite;
}
.square:hover span:nth-child(1) {
border: none;
background: rgb(233, 112, 132);
}
.square span:nth-child(2) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid rgb(228, 43, 73);
border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
transition: 0.5s;
animation: animate 4s linear infinite;
}
.square:hover span:nth-child(2) {
border: none;
background: rgb(233, 112, 132);
}
.square span:nth-child(3) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid rgb(228, 43, 73);
border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
transition: 0.5s;
animation: animate2 10s linear infinite;
}
.square:hover span:nth-child(3) {
border: none;
background: rgb(233, 112, 132);
}
#keyframes animate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes animate2 {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
.content1 {
position: relative;
padding: 40px 60px;
color: black;
text-align: center;
transition: 0.5s;
z-index: 1000;
}
<div class="square">
<span></span>
<span></span>
<span></span>
<div class="content1">
<p>“My friend, Elizabeth Shealy, owns this one room spa and I left her little oasis just this morning. If you have ever spotted a coffee shop off the beaten track or a cafe in an unexpected area, you know the feeling of finding a gem that perhaps no
one else in the city knows about. Elizabeth’s nook is that sort of find. Its as if you’re in another part of the world-it has a different kind of feel.”</p>
</div>
</div>
I hope I can get feedback very soon for my assignment
for your case, best way is to control your width and height and reduce value of them or make a box and use overflow:hidden in parent div because borders that you set absolute position for them, they are bigger from your page.
NOTE:
if you want add more content below this code or you have content above it, use overflow-x:hidden for this div, if it dosen't work, use overflow-x:hidden for your body tag.
sorry for my grammar.
body{
/*overflow-x:hidden*/
}
.square{
position: relative;
height: 400px;
width: 400px;/*if using overflow-x for body set width to 100vw or if use overflow:hidden for .square set width to 400px*/
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.square span:nth-child(1){
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid rgb(228, 43, 73);
border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
transition: 0.5s;
animation: animate 6s linear infinite ;
}
.square:hover span:nth-child(1){
border: none;
background: rgb(233, 112, 132);
}
.square span:nth-child(2){
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid rgb(228, 43, 73);
border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
transition: 0.5s;
animation: animate 4s linear infinite;
}
.square:hover span:nth-child(2){
border: none;
background: rgb(233, 112, 132);
}
.square span:nth-child(3){
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid rgb(228, 43, 73);
border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
transition: 0.5s;
animation: animate2 10s linear infinite;
}
.square:hover span:nth-child(3){
border: none;
background: rgb(233, 112, 132);
}
#keyframes animate{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
#keyframes animate2{
0%{
transform: rotate(360deg);
}
100%{
transform: rotate(0deg);
}
}
.content1{
position: relative;
padding: 40px 60px;
color: black;
text-align: center;
transition: 0.5s;
z-index: 1000;
}
<div class="square">
<span></span>
<span></span>
<span></span>
<div class="content1">
<p>“My friend, Elizabeth Shealy, owns this one room spa and I left her little oasis just this morning.
If you have ever spotted a coffee shop off the beaten track or a cafe in an unexpected area, you
know the feeling of finding a gem that perhaps no one else in the city knows about. Elizabeth’s nook is
that sort of find. Its as if you’re in another part of the world-it has a different kind of feel.”</p>
</div>
</div>
Related
this question is newbie but i'm stuck in this thing. I hope someone can help me.
I have this code:
HTML:
<div class='zone11'>
<div class='book11'>
<div class='cover11'></div>
<div class='page11'></div>
<div class='page11'></div>
<div class='page11'></div>
<div class='page11'></div>
<div class='page11'></div>
<div class='last-page11'></div>
<div class='back-cover11'></div>
</div>
</div>
CSS:
.zone11{
height: 700px;
display: flex;
align-items: center;
justify-content: center;
perspective: 1000px;
}
.book11{
display: flex;
align-items: center;
cursor: pointer;
}
.book11:hover .cover11{
transform: rotateX(10deg) rotateY(-180deg);
}
.book11:hover .page11{
transform: rotateX(10deg) rotateY(-180deg);
z-index: 2;
}
.cover11{
z-index: 1;
transition: all 3.5s;
}
.back-cover11{
z-index: -3;
}
.cover11, .back-cover11{
height: 450px;
width: 360px;
background: #3f0035;
border-radius: 2px 20px 20px 2px;
position: absolute;
box-shadow: 1px 1px 10px gray;
transform: rotateX(10deg);
transform-origin: center left;
}
.page11{
height: 430px;
width: 350px;
background: white;
position: absolute;
border-radius: 2px 10px 10px 2px;
transform: rotateX(10deg);
transform-origin: center left;
z-index: -1;
}
.last-page11{
height: 430px;
width: 350px;
background: white;
position: absolute;
border-radius: 2px 10px 10px 2px;
transform: rotateX(10deg);
transform-origin: center left;
z-index: -2;
}
.page11:nth-child(2){
transition-duration: 3s;
}
.page11:nth-child(3){
transition-duration: 2.6s;
}
.page11:nth-child(4){
transition-duration: 2.2s;
}
.page11:nth-child(5){
transition-duration: 1.8s;
}
.page11:nth-child(6){
transition-duration: 1.4s;
}
.book11:hover .page11:nth-child(2){
transition-duration: 6s;
}
.book11:hover .page11:nth-child(3){
transition-duration: 5.6s;
}
.book11:hover .page11:nth-child(4){
transition-duration: 5.2s;
}
.book11:hover .page11:nth-child(5){
transition-duration: 4.8s;
}
.book11:hover .page11:nth-child(6){
transition-duration: 4.4s;
}
Now, this way I have an animation of a book that when you hover, it opens to one page (with 5 pages scrolling before you get there). I want to remove the hover and make sure that it opens and closes on click.
I removed the hover from the classes. For example the cover:
.cover11__open{
transform: rotateX(10deg) rotateY(-180deg);
}
And then in the javascript:
var cover11 = document.querySelector('.cover11');
var book11= document.querySelector('.book11');
book11.addEventListener( 'click', function() {
cover11.classList.toggle('cover11__open');
});
The latter thing has worked on other occasions but it doesn't work here. I also tried something else found on the internet but nothing. Thanks.
You can try adding this to your css:
.book11 .cover11__open {
transform: rotateX(10deg) rotateY(-180deg);
}
.book11__open .page11 {
transform: rotateX(10deg) rotateY(-180deg);
z-index: 2;
}
.book11__open .page11:nth-child(2) {
transition-duration: 6s;
}
.book11__open .page11:nth-child(3) {
transition-duration: 5.6s;
}
.book11__open .page11:nth-child(4) {
transition-duration: 5.2s;
}
.book11__open .page11:nth-child(5) {
transition-duration: 4.8s;
}
.book11__open .page11:nth-child(6) {
transition-duration: 4.4s;
}
and keep every hover removes/commented there is no need for it
and add this too in the javascript instead of the current onclick
book11.addEventListener( 'click', function() {
cover11.classList.toggle('cover11__open');
book11.classList.toggle('book11__open')//this is the added line.
});
basically I just added the classes .cover11__open and .book11__open to the css with the properties given to the hover. now when clicking on the cover these two classes get added/removed. and great animation btw.
i was wondering how to make a circle that transforms into a wider box in html/css.
I have tried this but it does not transform properly
If you guys have any ideas on how to make this, i would really appreaciate it very much thank you!
.circle{
width: 700px;
height:700px;
margin:0 auto;
background-color: #14b1e7;
animation-name: stretch;
animation-duration:6s;
animation-timing-function:ease-out;
animation-delay:0s;
animation-duration:alternate;
animation-iteration-count: 1;
animation-fill-mode:forwards;
animation-play-state: running;
opacity: 100%;
text-align: center;
text-shadow: 5px;
font-size: 60px;
font-weight: bold;
border-radius: 30px;
}
#keyframes stretch {
0%{
transform: scale(.1);
background-color:#14b1e7;
border-radius: 100%;
}
50%{
background-color: #14b1e7;
}
100%{
transform:scale(.7);
background-color: #14b1e7;
}
}
Here's a live example: https://codesandbox.io/s/interesting-https-yhtpoe?file=/src/styles.css
.circle {
width: 100px;
border-radius: 50%;
transition: all 1s;
}
.circle:hover {
border-radius: 0;
width: 200px;
}
In the example, the circle initially has 50% border-radius and 100px width. On hover, border-radius is set to 0 and width to 200px. Because of the transition property, the change is animated.
The transition: all 1s property makes every property change gradually and last for 1 second. Check the docs for more info: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
You can simply change border-radius according to the keyframes.
.animation {
margin: 0 auto;
margin-top: 20px;
width: 100px;
height: 100px;
background-color: black;
border: 1px solid #337ab7;
border-radius: 100% 100% 100% 100%;
animation: circle-to-square 1s .83s infinite cubic-bezier(1,.015,.295,1.225) alternate;
}
#keyframes circle-to-square {
0% {
border-radius:100% 100% 100% 100%;
background:black;
}
25% {
border-radius:75% 75% 75% 75%;
background:black;
}
50% {
border-radius:50% 50% 50% 50%;
background:black;
}
75% {
border-radius:25% 25% 25% 25%;
background:black;
}
100% {
border-radius:0 0 0 0;
background:black;
}
<div class="container animated zoomIn">
<div class="row">
<div class="animation"></div>
</div>
</div>
I am working on the invite page, in which the envelope is shown first and after clicking on envelope it shows content, the problem is that the envelope is not responsive, I am using display:flex for my main page, but the template I used for envelope does not use flex, when I remove it, it works fine but my main page broke down, so is there any way to fix it?:
(the envelope looks like this on mobile screen)
.frame {
width: 550px;
height: 350px;
margin: 50px auto 0;
position: relative;
background: #435d77;
border-radius: 0 0 40px 40px;
}
#button_open_envelope {
width: 180px;
height: 60px;
position: absolute;
z-index: 311;
top: 250px;
left: 208px;
border-radius: 10px;
color: #fff;
font-size: 26px;
padding: 15px 0;
border: 2px solid #fff;
transition: 0.3s;
}
#button_open_envelope:hover {
background: #fff;
color: #2b67cb;
transform: scale(1.1);
transition: background 0.25s, transform 0.5s, ease-in;
cursor: pointer;
}
.message {
position: relative;
width: 580px;
min-height: 300px;
height: auto;
background: #fff;
margin: 0 auto;
top: 30px;
box-shadow: 0 0 5px 2px #333;
transition: 2s ease-in-out;
transition-delay: 1.5s;
z-index: 300;
}
.left,
.right,
.top {
width: 0;
height: 0;
position: absolute;
top: 0;
z-index: 310;
}
.left {
border-left: 300px solid #337efc;
border-top: 160px solid transparent;
border-bottom: 160px solid transparent;
}
.right {
border-right: 300px solid #337efc;
border-top: 160px solid transparent;
border-bottom: 160px solid transparent;
left: 300px;
}
.top {
border-right: 300px solid transparent;
border-top: 200px solid #03a9f4;
border-left: 300px solid transparent;
transition: transform 1s, border 1s, ease-in-out;
transform-origin: top;
transform: rotateX(0deg);
z-index: 500;
}
.bottom {
width: 600px;
height: 190px;
position: absolute;
background: #2b67cb;
top: 160px;
border-radius: 0 0 30px 30px;
z-index: 310;
}
.open {
transform-origin: top;
transform: rotateX(180deg);
transition: transform 0.7s, border 0.7s, z-index 0.7s ease-in-out;
border-top: 200px solid #2c3e50;
z-index: 200;
}
.pull {
-webkit-animation: message_animation 2s 1 ease-in-out;
animation: message_animation 2s 1 ease-in-out;
-webkit-animation-delay: 0.9s;
animation-delay: 0.45s;
transition: 1.5s;
transition-delay: 1s;
z-index: 350;
}
body {
display: flex;
justify-content: center;
align-items: center;
/* height: 100vh;
width: 100%; */
flex-direction: column;
}
<div class="frame">
<div id="button_open_envelope">
Open Invitation
</div>
<div class="message">
<h1>Invitation</h1>
</div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="top"></div>
</div>
The border properties unfortunately don't take responsive percentages, so your .top .left and .right elements will not be responsive. You could instead create those envelope shapes with clip-path and then combined with a few other CSS updates and your envelope will adjust with screen size. Demo included
.frame {
width: 100%;
max-width: 550px;
height: 100%;
max-height: 350px;
margin: 50px auto 0;
position: relative;
background: #435d77;
border-radius: 0 0 40px 40px;
}
#button_open_envelope {
width: 180px;
height: 60px;
position: absolute;
z-index: 311;
bottom: 0;
left: 50%;
border-radius: 10px;
color: #fff;
font-size: 26px;
padding: 15px 0;
border: 2px solid #fff;
transform: translateX(-50%);
transition: 0.3s;
}
#button_open_envelope:hover {
background: #fff;
color: #2b67cb;
transform: translateX(-50%) scale(1.1);
transition: background 0.25s, transform 0.5s, ease-in;
cursor: pointer;
}
.message {
position: relative;
width: 100%;
min-height: 300px;
height: auto;
background: #fff;
margin: 0 auto;
bottom: 0;
box-shadow: 0 0 5px 2px #333;
transition: 2s ease-in-out;
transition-delay: 1.5s;
z-index: 300;
}
.left,
.right,
.top {
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 310;
}
.left {
background: #337efc;
clip-path: polygon(0 0, 0 90%, 50% 50%);
}
.right {
background: #337efc;
clip-path: polygon(100% 0, 100% 90%, 50% 50%);
}
.top {
background: #03a9f4;
clip-path: polygon(0 0, 100% 0, 50% 62.5%);
transition: transform 1s, border 1s, ease-in-out;
transform-origin: top;
transform: rotateX(0deg);
z-index: 500;
}
.bottom {
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
background: #2b67cb;
border-radius: 0 0 30px 30px;
z-index: 310;
}
.open {
transform-origin: top;
transform: rotateX(180deg);
transition: transform 0.7s, border 0.7s, z-index 0.7s ease-in-out;
border-top: 200px solid #2c3e50;
z-index: 200;
}
.pull {
-webkit-animation: message_animation 2s 1 ease-in-out;
animation: message_animation 2s 1 ease-in-out;
-webkit-animation-delay: 0.9s;
animation-delay: 0.45s;
transition: 1.5s;
transition-delay: 1s;
z-index: 350;
}
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
<div class="frame">
<div id="button_open_envelope">
Open Invitation
</div>
<div class="message">
<h1>Invitation</h1>
</div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="top"></div>
</div>
I want to create the letter z in animation.
In such a way that the first part (1) appears without delay with animation from left to right.
When the first part (1) reaches the right, the second part (2) will appear from top to bottom with animation.
When the second part (2) is down, the third part (3) will appear from left to right with animation.
The problem with this animation is that all three parts (1-2-3) appear together, while I want them to appear alternately and late.
Thank you in advance for your cooperation.
#global{
width:200px;
position:relative;
cursor:pointer;
height:200px;
background-color: black;
padding: 1rem;
}
.mask{
position:absolute;
border-radius:2px;
overflow:hidden;
perspective: 1000;
backface-visibility: hidden;
}
.plane{
background:#ffffff;
width:400%;
height:100%;
position:absolute;
transform : translate3d(0px,0,0);
z-index:100;
perspective: 1000;
backface-visibility: hidden;
}
#top .plane{
z-index:2000;
animation: trans1 1s ease-in infinite 0s forwards;
-webkit-animation: trans1 1s ease-in infinite 0s forwards;
}
#middle .plane{
transform: translate3d(0px,0,0);
background: #bbbbbb;
animation: trans2 1s linear infinite 2s forwards;
-webkit-animation: trans2 1s linear infinite 2s forwards;
}
#bottom .plane{
z-index:2000;
animation: trans3 2s ease-out infinite 4s forwards;
-webkit-animation: trans3 2s ease-out infinite 4s forwards;
}
#top{
width:200px;
height:15px;
left:0;
z-index:100;
transform: skew(-15deg, 0);
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
}
#middle{
width:187px;
height:25px;
left:6px;
top:78px;
transform:skew(-15deg, -40deg);
-webkit-transform:skew(-15deg, -40deg);
-moz-transform:skew(-15deg, -40deg);
-ms-transform:skew(-15deg, -40deg);
-o-transform:skew(-15deg, -40deg);
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
}
#bottom{
width:200px;
height:15px;
top:159px;
transform: skew(-15deg, 0);
-webkit-transform: skew(-15deg, 0);
-moz-transform: skew(-15deg, 0);
-ms-transform: skew(-15deg, 0);
-o-transform: skew(-15deg, 0);
border-radius: 20px;
}
#keyframes trans1{
0% {
width: 0%;
left: 0;
}
100% {
width: 100%;
left: 0;
}
}
#keyframes trans2{
0% {
width: 0%;
left: 100%;
}
100% {
width: 100%;
left: 0;
}
}
#keyframes trans3{
0% {
width: 0%;
left: 0;
}
100% {
width: 100%;
left: 0;
}
}
<div id="global">
<div id="top" class="mask">
<div class="plane"></div>
</div>
<div id="middle" class="mask">
<div class="plane"></div>
</div>
<div id="bottom" class="mask">
<div class="plane"></div>
</div>
</div>
This snippet thinks of things slightly differently.
Each line has a 3 second animation with the top one animating to its full width in the first second, ie the first 33.33% of the time, the second animating to its full width in the second second and the third in the third second.
That way aspects such as the lines not being visible to start with are dealt with.
#global {
width: 200px;
position: relative;
cursor: pointer;
height: 200px;
background-color: black;
padding: 1rem;
}
.mask {
position: absolute;
border-radius: 2px;
overflow: hidden;
perspective: 1000;
backface-visibility: hidden;
}
.plane {
background: #ffffff;
width: 400%;
height: 100%;
position: absolute;
transform: translate3d(0px, 0, 0);
z-index: 100;
perspective: 1000;
backface-visibility: hidden;
}
#top .plane {
z-index: 2000;
animation: trans1 3s ease-in infinite forwards;
}
#middle .plane {
transform: translate3d(0px, 0, 0);
background: #bbbbbb;
animation: trans2 3s linear infinite forwards;
}
#bottom .plane {
z-index: 2000;
animation: trans3 3s ease-out infinite forwards;
}
#top {
width: 200px;
height: 15px;
left: 0;
z-index: 100;
transform: skew(-15deg, 0);
border-radius: 20px;
}
#middle {
width: 187px;
height: 25px;
left: 6px;
top: 78px;
transform: skew(-15deg, -40deg);
border-radius: 20px;
}
#bottom {
width: 200px;
height: 15px;
top: 159px;
transform: skew(-15deg, 0);
border-radius: 20px;
}
#keyframes trans1 {
0% {
width: 0%;
left: 0;
}
33.33% {
width: 100%;
left: 0;
}
100% {
width: 100%;
left: 0;
}
}
#keyframes trans2 {
0% {
width: 0%;
left: 100%;
}
33.33% {
width: 0%;
left: 100%;
}
66.66% {
width: 100%;
left: 0;
}
100% {
width: 100%;
left: 0;
}
}
#keyframes trans3 {
0% {
width: 0%;
left: 0;
}
66.66% {
width: 0%;
left: 0;
}
100% {
width: 100%;
left: 0;
}
}
<div id="global">
<div id="top" class="mask">
<div class="plane"></div>
</div>
<div id="middle" class="mask">
<div class="plane"></div>
</div>
<div id="bottom" class="mask">
<div class="plane"></div>
</div>
</div>
Dear people of the Internet,
I have this css & html code to add an scroll indicator to my landing page.
My goal is; As soon as you scroll down, the indicator disappears and only appears again after reloading the page.
My jquery seems not to work, any help much appreciated!
$(window).scroll(function() {
if ($(this).scrollTop()>0)
{
$('.scrolli').fadeOut();
}
});
body{
margin: 0;
padding: 0;
background: #000;
}
.scrolli{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.scrolli span{
display: block;
width: 20px;
height: 20px;
border-bottom: 1px solid #FFF;
border-right: 1px solid #FFF;
transform: rotate(45deg);
margin: -10px;
animation: animate 2s infinite;
}
.scrolli span:nth-child(2){
animation-delay: -0.2s;
}
.scrolli span:nth-child(3){
animation-delay: -0.4s;
}
#keyframes animate{
0%{
opacity: 0;
transform: rotate(45deg) translate(-20px,-20px);
}
50%{
opacity: 1;
}
100%{
opacity: 0;
transform: rotate(45deg) translate(20px,20px);
}
}
<div class="scrolli">
<span></span>
<span></span>
<span></span>
</div>
Your code is fine, it doesn't work because there isn't any available scroll, so $(this).scrollTop() can't ever be greater than zero.
You can see it working by making the body taller:
$(window).scroll(function() {
if ($(this).scrollTop()>0)
{
$('.scrolli').fadeOut();
}
});
body{
margin: 0;
padding: 0;
background: #000;
height: 200vh;
}
.scrolli{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.scrolli span{
display: block;
width: 20px;
height: 20px;
border-bottom: 1px solid #FFF;
border-right: 1px solid #FFF;
transform: rotate(45deg);
margin: -10px;
animation: animate 2s infinite;
}
.scrolli span:nth-child(2){
animation-delay: -0.2s;
}
.scrolli span:nth-child(3){
animation-delay: -0.4s;
}
#keyframes animate{
0%{
opacity: 0;
transform: rotate(45deg) translate(-20px,-20px);
}
50%{
opacity: 1;
}
100%{
opacity: 0;
transform: rotate(45deg) translate(20px,20px);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scrolli">
<span></span>
<span></span>
<span></span>
</div>