This question already has answers here:
Is there a CSS parent selector?
(33 answers)
What does the "~" (tilde/squiggle/twiddle) CSS selector mean?
(3 answers)
Is there a "previous sibling" selector?
(30 answers)
Closed 4 years ago.
I have a very long image that I want to animate (translate)
found some code that helped me to make an animation but not sure is it possible to merge it with hover on another DIV where are arrows
is it possible to do that without any JS?
here is CODEPEN
and code so far:
.wrapper {
overflow: hidden;
position: relative;
}
.arrow-left {
position: absolute;
top: 0;
height: 100%;
background: linear-gradient(to right, blue, transparent);
width: 200px;
}
.arrow-left:hover~.sliding-background {
animation-direction: reverse;
}
.arrow-right {
position: absolute;
top: 0;
right: 0;
height: 100%;
background: linear-gradient(to left, red, transparent);
width: 200px;
}
.sliding-background {
background: url("https://upload.wikimedia.org/wikipedia/commons/6/62/Element-haeufigkeit.svg");
height: 500px;
width: 3000px;
animation: slide 8s linear;
}
#keyframes slide {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-1000px, 0, 0px);
}
}
<div class="wrapper">
<div class="sliding-background"></div>
<div>
<img class="arrow-left" src="https://www.materialui.co/materialIcons/hardware/keyboard_arrow_left_black_144x144.png" />
<img class="arrow-right" src="https://www.materialui.co/materialIcons/hardware/keyboard_arrow_right_black_144x144.png" />
</div>
</div>
Related
This question already has answers here:
Create wavy borders in CSS for top and bottom borders
(2 answers)
Closed 8 months ago.
This post was edited and submitted for review 8 months ago and failed to reopen the post:
Original close reason(s) were not resolved
I'm trying to make a wavy effect on the border of where one section meets another on a page (see pic below). What's the best approach to take here? The waves should be roughly equal in size.
EDIT: to the person who flagged this as 'already answered', the effect in your linked question looks nothing like this one. That effect cannot be used to make the low wide sloping waves in my image.
Please try this
body {
background: #333;
}
.wrapper {
width: 500px;
height: 500px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 5px;
background-image: linear-gradient(to top, #accbee 0%, #e7f0fd 100%);
overflow: hidden;
}
.wave {
width: 1000px;
height: 1025px;
position: absolute;
top: -25%;
left: 50%;
margin-left: -500px;
margin-top: -500px;
border-radius: 35%;
background: rgba(255, 255, 255, .75);
animation: wave 15s infinite linear;
}
#keyframes wave {
from {
transform: rotate(0deg);
}
from {
transform: rotate(360deg);
}
}
<div class="wrapper">
<div class="wave"></div>
</div>
This question already has answers here:
Center triangle at bottom of div full width responsively
(6 answers)
Create bottom responsive arrow [duplicate]
(1 answer)
Closed 1 year ago.
I am working upon creating a HTML page that will have text written under shape, see pic for the reference. To draw this shape, I am using following:
#chevron {
position: relative;
text-align: center;
padding: 12px;
margin-bottom: 6px;
height: 60px;
width: 100%;
}
#chevron:before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 51%;
background: red;
transform: skew(0deg, 6deg);
}
#chevron:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 50%;
background: red;
transform: skew(0deg, -6deg);
}
<div style="width: 100%">
<div id="chevron">
</div>
</div>
However, the shape is pretty different than what I am trying to draw.
Here is the desired result:
You could use clip-path this website is great to get the hang of it
in your case you would need something like this :
clip-path: polygon(100% 0, 100% 15%, 50% 25%, 0 15%, 0 0);
This question already has answers here:
Transition background-color via slide animation
(2 answers)
Closed 3 years ago.
I'd like to make a div's (just containing text) background slide in from left to right, how can i accomplish this?
I can make it fade in using css transition but cannot figure out how to make it slide in.
.container{
display:inline;
padding:10px;
transition: background-color 2s;
}
.container:hover{
background-color:lightcoral;
}
<div class='container'>
some text here
</div>
<style>
div {
height: 40px;
width: 70%;
background: black;
margin: 50px auto;
border-radius: 5px;
position: relative;
}
#rect {
animation-name: slide;
animation-duration: 4s;
}
#keyframes slide {
0% {
left: 0px;
}
50% {
left: 50px;
}
100% {
left: 50px;
}
}
</style>
<div id="rect"></div>
You can try using a keyframes animation like this one. Adapted from: https://www.freecodecamp.org/learn/responsive-web-design/applied-visual-design/create-movement-using-css-animation
This question already has answers here:
Shape with a slanted side (responsive)
(3 answers)
Closed 3 years ago.
I've attached a picture to show the exact layout. The line in the photo is only there to show where the colors should change.
Here is some code I have tried but doesn't look how I want.
.block {
background-color: black;
left: -50;
height: 150px;
width: 100%;
transform: rotate(-40deg);
}
<body>
<div class="block">
</div>
</body>
You can use pseudo element with skew transformation :
body {
height: 100vh;
margin: 0;
background: yellow;
}
body:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 300px;
background: #000;
transform: skew(-30deg);
transform-origin:top;
}
To keep the same visual on resize, set a big fixed height for the pseudo element and center it:
html {
background: yellow;
}
html:before {
content: "";
position: fixed;
top: calc(50% - 1000px);
left: 0;
width: 500px;
height:2000px;
background: #000;
transform: skew(-15deg);
transform-origin:top;
}
Use a linear gradient at an angle
body {
margin:0;
}
div {
height: 100vh;
background: linear-gradient(105deg, black 25%, yellow 25%)
}
<div></div>
.left-sidebar {
position: absolute;
width: 20%;
background: #000;
transform: skewY(5px);
}
.content {
background: #fff;
}
The property that "curves" the div is this property in CSS transform: skew(X,Y).Try that, hope it helps.
But I suggest that you create 2 div side-by-side in order to get the desired effect.
This question already has answers here:
Stopping a CSS3 Animation on last frame
(8 answers)
Closed 6 years ago.
The Div reappeared after the animation stops playing, how do you stop the div from returning to the original place?
#wrapper {
background-color: #999;
position: fixed;
height: 100%;
width: 100%;
}
#wrapper .section{
position: absolute;
top: 0;
width: 51%;
height: 100%;
background: #222222;
}
#wrapper .section.section-left{
left:0;
animation: move 1.5s 1;
}
#wrapper .section.section-right{
right:0;
animation: move 1.5s 1;
}
#keyframes move{
0% {width: 51%;}
100% {width:0%;}
}
HTML code:
<div id="wrapper">
<div class="section section-left"></div>
<div class="section section-right"></div>
</div>
You can add, animation-fill-mode: forwards; to #wrapper .section.section-left and #wrapper .section.section-right
Codepen example