How to clip a div with svg?
Following is the code for a css animation:
.liquid {
position: absolute;
top: -80px;
left: 0;
width: 200px;
height: 200px;
background: #4973ff;
box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);
transition: 0.5s;
}
.liquid::after,
.liquid::before {
content: "";
width: 200%;
height: 200%;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -75%);
background: #000;
}
.liquid::before {
border-radius: 45%;
background: rgba(20, 20, 20, 1);
animation: animate 5s linear infinite;
}
.liquid::after {
border-radius: 40%;
background: rgba(20, 20, 20, 0.5);
animation: animate 10s linear infinite;
}
#keyframes animate {
0% {
transform: translate(-50%, -75%) rotate(0deg);
}
100% {
transform: translate(-50%, -75%) rotate(360deg);
}
}
<div class="liquid"></div>
How can I embed/ clip the above animation inside a svg image?
Such that you will get a feeling of liquid filling the following image.
Following image :
https://www.flaticon.com/svg/vstatic/svg/3331/3331104.svg?token=exp=1619182384~hmac=11bada25343c186d8f2c99de7afec2f2
(Remember it should be svg)
Possibly this if I'm understanding right.
.element {
clip-path: url(#svgClipPathID);
}
This is a very good article about clip-path:
https://www.sarasoueidan.com/blog/css-svg-clipping/#:~:text=The%20clip%2Dpath%20property%20is%20used%20to%20specify%20a%20clipping,in%20the%20CSS%20Shapes%20module.
Related
I want to animate the waves to go up when i click on the div i cant get the wave to animate when i change the heigt on the animation it self.
.tsx
<div className={styles.circle}>
<div className={styles.wave}></div>
</div>
.css
.circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-190%, -50%);
width: 25%;
height: 60%;
background: #ccc;
box-shadow: 0 0 0 5px #fff;
border-radius: 50%;
overflow: hidden;
}
.wave {
position: relative;
width: 100%;
height: 100%;
background: #4973ff;
border-radius: 50%;
box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);
}
.wave:before,
.wave:after {
content: "";
position: absolute;
width: 200%;
height: 200%;
top: 0;
left: 50%;
transform: translate(-50%, -75%);
background: #000;
}
.wave:before {
border-radius: 45%;
background: rgb(255, 255, 255);
animation: animate 5s linear infinite;
}
.wave:after {
border-radius: 40%;
background: rgb(255, 255, 255, 0.5);
animation: animate 10s linear infinite;
}
#keyframes animate {
0% {
transform: translate(-50%, var(--water)) rotate(0deg);
}
100% {
transform: translate(-50%, var(--water)) rotate(360deg);
}
}
I tried putting translate: transform 2s linear but that didnt work for me eighter do you guys have any idea beaces when i change the
:root {
--water: -90%
}
to
:root {
--water: -80%
}
it will just snap and not animate
I have got a modal sliding up with key frames. I wanted the background rgba I have in the overlay to kick in straight away when the modal starts sliding up but unable to make it work. Here is my code:
.overlay {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.2);
position: fixed;
top: 0;
left: 0;
}
.modal{
margin: auto;
position: fixed;
overflow: scroll;
height: 100%;
animation: slidein 0.3s;
}
#keyframes slidein {
0% {
transform: translateY(400px);
animation-timing-function: ease-out;
}
60% {
transform: translateY(20px);
animation-timing-function: ease-in;
}
80% {
transform: translateY(10px);
animation-timing-function: ease-out;
}
100% {
transform: translateY(0px);
animation-timing-function: ease-in;
}
}
Any help would be appreciated
Probably it is not working because you added height:100%and probably the parent of you overlay has not a fixed height set. Try this insteed:
.overlay {
background-color: rgba(0, 0, 0, 0.2);
position: fixed;
top: 0;
left: 0;
bottom:0;
right:0;
margin:auto;
}
Hi there I want to give this effect to my logo
but somehow I am stuck can you help me please? I want the circles to be show one in after another but only when shown the fourth circle only then the efect can end. Sorry for my english. Please help
html,
body {
color: #2E4453;
font-size: 100%;
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
font-weight: 400;
background-color: #D1C4E9;
}
.open-dev-radar {
position: relative;
width: 100%;
padding-top: 100%;
}
.open-dev-badge {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 90px;
height: 90px;
/* padding: 15px; */
border-radius: 50%;
background-color: #fff;
box-shadow: 1px 2px 7px rgba(0, 0, 0, 0.34);
}
.gt-dev {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.gt-dev:after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
border-radius: 50%;
border: solid 1px rgba(103, 58, 182, 0.74);
background-image: -webkit-radial-gradient(circle farthest-corner, rgba(103, 58, 182, 0) 52%, rgba(103, 58, 182, 0.62) 100%);
background-image: radial-gradient( circle farthest-corner, rgba(103, 58, 182, 0) 52%, rgba(103, 58, 182, 0.62) 100%);
-webkit-animation-duration: 9s;
animation-duration: 9s;
-webkit-animation-name: pulse;
animation-name: pulse;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
opacity: 0;
filter: alpha(opacity=0);
}
.gt-dev:nth-child(4) {
width: 120px;
height: 120px;
}
.gt-dev:nth-child(3) {
width: 190px;
height: 190px;
}
.gt-dev:nth-child(3):after {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.gt-dev:nth-child(2) {
width: 270px;
height: 270px;
}
.gt-dev:nth-child(2):after {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.gt-dev:nth-child(1) {
width: 370px;
height: 370px;
}
.gt-dev:nth-child(1):after {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
#-webkit-keyframes pulse {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
filter: alpha(opacity=0);
}
90% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
filter: alpha(opacity=100);
}
100% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
opacity: 0;
filter: alpha(opacity=0);
}
}
#keyframes pulse {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
filter: alpha(opacity=0);
}
90% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
filter: alpha(opacity=50);
}
100% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
opacity: 0;
filter: alpha(opacity=100);
}
}
<!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>Ripple Animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="gt-dev"></div>
<div class="gt-dev"></div>
<div class="gt-dev"></div>
<div class="gt-dev"></div>
<div class="open-dev-badge"><img src="Loader.svg"></div>
</body>
</html>
I would use a slightly different approach.
As the circles are purely for decoration, not containing information that needs to be interpreted e.g. by a screen reader, I'd have the logo contained entirely within one element and put the background overall color on that element and the circles on its before pseudo element.
Then use a CSS animation to draw the circles with radial-gradient backgrounds one by one.
In this snippet the colors required are defined as CSS variables col1... so you can change them easily if needed. The animation works by setting the colors in the radial gradient background one by one.
.logo {
position: relative;
width: 100vmin;
height: 100vmin;
background-color: #303030;
}
.logo::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
display: inline-block;
--col1: #a5bc1f;
--col2: #99ae21;
--col3: #707d28;
--col4: #4a4f2d;
--c1: var(--col1);
--c2: var(--col2);
--c3: var(--col3);
--c4: var(--col4);
background-image: radial-gradient(var(--c1) 0 10%, var(--c2) 10% 20%, var(--c3) 20% 30%, var(--c4) 30% 40%, transparent 40% 100%);
}
.logo::before {
animation: ripple 4s linear;
}
#keyframes ripple {
0% {
--c2: transparent;
--c3: transparent;
--c4: transparent;
--c1: var(--col1);
}
33.33% {
--c2: var(--col2);
}
66.66% {
--c3: var(--col3);
}
100% {
--c4: var(--col4);
}
}
<div class="logo"></div>
Note: you will want to change the %s in the radial gradient to get the effect you want (or change to px if you want exactly the same widths on any viewport dimensions).
UPDATE: from subsequent comments it transpires that the problem is actually simpler than the solution given above. Rather than each ring appearing in a step, it is required that the rings grow til they reach the required size, then the next ring grows.
We can get this effect by having the multi ring background on a pseudo element all the time (no need to change it dynamically like in the above) and simply increase its size from zero so the rings appear to grow in a continuous way.
.logo {
position: relative;
width: 100vmin;
height: 100vmin;
--col1: #a5bc1f;
--col2: #99ae21;
--col3: #707d28;
--col4: #4a4f2d;
}
.logo::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-image: radial-gradient(var(--col1) 0 10vmin, var(--col2) 10vmin 20vmin, var(--col3) 20vmin 30vmin, var(--col4) 30vmin 40vmin, transparent 40vmin 100vmin);
animation: ripple 4s linear 1;
animation-fill-mode: forwards;
border-radius: 50%;
z-index;
-1;
}
#keyframes ripple {
0% {
width: 0;
height: 0;
}
100% {
width: 100vmin;
height: 100vmin;
}
}
.logo::before {
content: '';
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
background-color: #303030;
z-index: -2;
}
<div class="logo"></div>
I have a css file which makes circle border fill animation perfectly. Its in 100px width and height. But i need only in 50px width and height circle with the same animation. I tried many more times to minimize the size, but the circle not get correctly fix with animation. please help me to smaller this circle.
My need:
Width-50px
Height -50px
border size as per the image file attached -circle border fill sample image
My code
#loading
{
width: 100px;
height: 100px;
margin: 30px auto;
position: relative;
}
.outer-shadow, .inner-shadow
{
z-index: 4;
position: absolute;
width: 100%;
height: 100%;
border-radius: 100%;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.inner-shadow
{
top: 50%;
left: 50%;
width: 80px;
height: 80px;
margin-left: -40px;
margin-top: -40px;
border-radius: 100%;
background-color: #ffffff;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.hold
{
position: absolute;
width: 100%;
height: 100%;
clip: rect(0px, 100px, 100px, 50px);
border-radius: 100%;
background-color: #fff;
}
.fill, .dot span
{
background-color: #f50;
}
.fill
{
position: absolute;
width: 100%;
height: 100%;
border-radius: 100%;
clip: rect(0px, 50px, 100px, 0px);
}
.left .fill
{
z-index: 1;
-webkit-animation: left 1s linear ;
-moz-animation: left 1s linear ;
animation: left 1s linear both;
}
#keyframes left
{
0%{-webkit-transform:rotate(0deg);}
100%{transform:rotate(180deg);}
}
#-webkit-keyframes left
{
0%{-webkit-transform:rotate(0deg);}
100%{-webkit-transform:rotate(180deg);}
}
.right
{
z-index: 3;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(180deg);
}
.right .fill
{
z-index: 3;
-webkit-animation: right 1s linear ;
-moz-animation: right 1s linear ;
animation: right 1s linear both ;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
}
#keyframes right
{
0%{-webkit-transform:rotate(0deg);}
100%{transform:rotate(180deg);}
}
#-webkit-keyframes right
{
0% {transform: rotate(0deg);}
100% {transform: rotate(180deg);}
}
My code in jsfiddle...!
You need to divide by 2 every values involved, even the clip(); ones (fiddle updated)
#loading {
width: 50px;
height: 50px;
margin: 30px auto;
position: relative;
}
.outer-shadow,
.inner-shadow {
z-index: 4;
position: absolute;
width: 100%;
height: 100%;
border-radius: 100%;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.inner-shadow {
top: 50%;
left: 50%;
width: 40px;
height: 40px;
margin-left: -20px;
margin-top: -20px;
border-radius: 100%;
background-color: #ffffff;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.hold {
position: absolute;
width: 100%;
height: 100%;
clip: rect(0px, 50px, 50px, 25px);
border-radius: 100%;
background-color: #fff;
}
.fill,
.dot span {
background-color: #f50;
}
.fill {
position: absolute;
width: 100%;
height: 100%;
border-radius: 100%;
clip: rect(0px, 25px, 50px, 0px);
}
.left .fill {
z-index: 1;
-webkit-animation: left 1s linear;
-moz-animation: left 1s linear;
animation: left 1s linear both;
}
#keyframes left {
0% {
-webkit-transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
#-webkit-keyframes left {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(180deg);
}
}
.right {
z-index: 3;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(180deg);
}
.right .fill {
z-index: 3;
-webkit-animation: right 1s linear;
-moz-animation: right 1s linear;
animation: right 1s linear both;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
}
#keyframes right {
0% {
-webkit-transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
#-webkit-keyframes right {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
.inner-shadow img {
margin-left: 8px;
margin-top: 7px;
}
<div id='loading'>
<div class='outer-shadow'>
</div>
<div class='inner-shadow'>
</div>
<div class='hold left'>
<div class='fill'></div>
</div>
<div class='hold right'>
<div class='fill'></div>
</div>
</div>
edit: in respond to comment #Filipe
How would the change from clip to clip-path be? I tried (also changing rect to inset), but the animation stops working.
Possible example with clip-path instead clip .
#loading {
width: 50px;
height: 50px;
margin: 30px auto;
position: relative;
}
.outer-shadow,
.inner-shadow {
z-index: 4;
position: absolute;
width: 100%;
height: 100%;
border-radius: 100%;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.inner-shadow {
top: 50%;
left: 50%;
width: 40px;
height: 40px;
margin-left: -20px;
margin-top: -20px;
border-radius: 100%;
background-color: #ffffff;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.hold {
position: absolute;
width: 100%;
height: 100%;
clip-path: polygon(50% 0, 0 0, 0 100%, 50% 100%);
border-radius: 100%;
background-color: #fff;
}
.fill,
.dot span {
background-color: #f50;
}
.fill {
position: absolute;
width: 100%;
height: 100%;
border-radius: 100%;
clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
}
.left .fill {
z-index: 1;
-webkit-animation: left 1s linear;
-moz-animation: left 1s linear;
animation: left 1s linear both;
}
#keyframes left {
0% {
-webkit-transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
#-webkit-keyframes left {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(180deg);
}
}
.right {
z-index: 3;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(180deg);
}
.right .fill {
z-index: 3;
-webkit-animation: right 1s linear;
-moz-animation: right 1s linear;
animation: right 1s linear both;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
}
#keyframes right {
0% {
-webkit-transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
#-webkit-keyframes right {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
.inner-shadow img {
margin-left: 8px;
margin-top: 7px;
}
<div id='loading'>
<div class='outer-shadow'>
</div>
<div class='inner-shadow'>
</div>
<div class='hold left'>
<div class='fill'></div>
</div>
<div class='hold right'>
<div class='fill'></div>
</div>
</div>
is this what you expect,hope this will help to you.try this.I only concerned about the circle size of 50 px with inside circle.if this is not the case tell me.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jquery</title>
<style type="text/css">
div.circleone{
width: 50px;
height: 50px;
border-radius: 25px;
box-shadow: 1px 2px 1px black;
}
div.circletwo
{
width: 25px;
height: 25px;
border-radius: 12.5px;
box-shadow: 1px -1px 1px black;
position: relative;
top: 25%;
left: 25%;
}
</style>
</head>
<body>
<div class="circleone">
<div class="circletwo"></div>
</div>
</body>
</html>
I have this pen which tries to emulate an object revolving around something. This works, but it isn't smooth. While revolving it pauses around the left and right edges.
I thought it had something to do with animation-timing-function but can't get the desired result with any of the in-built functions like ease-in-out or linear or a custom cubic-bezier function.
How can I make the animation feel smooth? If there are better ways something like this can be done, feel free to let me know.
.overlay {
background-image: -webkit-repeating-linear-gradient(0deg, transparent, transparent 1%, rgb(255, 255, 255) 2%, rgb(255, 255, 255) 2%);
background-image: repeating-linear-gradient(90deg, transparent, transparent 1%, rgb(255, 255, 255) 2%, rgb(255, 255, 255) 2%);
height: 200px;
position: relative;
width: 40%;
margin: auto;
}
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background: #888;
position: absolute;
z-index: -1;
left: 0;
display: inline-block;
}
.move {
-webkit-animation: moveAndGlow 2s infinite ease-in-out;
animation: moveAndGlow 2s infinite ease-in-out;
}
#-webkit-keyframes moveAndGlow {
25% {
background: #ccc;
-webkit-transform: scale(.5);
transform: scale(.5);
margin-top: 25px;
}
50% {
left: 100%;
margin-left: -100px;
background: #888;
-webkit-transform: scale(1);
transform: scale(1);
margin-top: 0;
}
75% {
background: #000;
-webkit-transform: scale(1.5);
transform: scale(1.5);
margin-top: 25px;
}
}
#keyframes moveAndGlow {
25% {
background: #ccc;
-webkit-transform: scale(.5);
transform: scale(.5);
margin-top: 25px;
}
50% {
left: 100%;
margin-left: -100px;
background: #888;
-webkit-transform: scale(1);
transform: scale(1);
margin-top: 0;
}
75% {
background: #000;
-webkit-transform: scale(1.5);
transform: scale(1.5);
margin-top: 25px;
}
}
<div class="overlay">
<span class="circle move"></span>
</div>
If you want to move you element in a 3d environement, you can use the perspective property and actual 3d rotation.
Right now you are animating on straight lines between positions so simulating a rotation is almost imposible. I built the following example, you will need to tweak the size to fit it into your project but you should get the idea.
Also note that I put the gradient background in a pseudo element so it appear in front of the moving object :
.overlay {
height: 200px;
position: relative;
width: 40%;
margin: auto;
perspective:500px;
margin-top:50px;
}
.overlay:after{
content:'';
position:absolute;
top:-100px; left:-10%;
width:120%; height:100%;
background-image: repeating-linear-gradient(90deg, transparent, transparent 1%, rgb(255, 255, 255) 2%, rgb(255, 255, 255) 2%);
}
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background: #888;
position: absolute;
z-index: -1;
left: 50%;
margin-left:-50px;
transform: rotateY(0deg) translateX(-100px) rotateY(0deg);
display: inline-block;
}
.move {
animation: moveAndGlow 2s infinite linear;
}
#keyframes moveAndGlow {
to{ transform:rotateY(360deg) translateX(-100px) rotateY(-360deg); }
}
<div class="overlay">
<span class="circle move"></span>
</div>
I found this made it smoother
.move {
-webkit-animation: moveAndGlow 2s infinite linear;
animation: moveAndGlow 2s infinite linear;
}
#-webkit-keyframes moveAndGlow {
25% {
background: #ccc;
-webkit-transform: scale(.5);
transform: scale(.5);
margin-top: 25px;
-webkit-animation-timing-function:ease-in;
}
50% {
left: 100%;
margin-left: -100px;
background: #888;
-webkit-transform: scale(1);
transform: scale(1);
margin-top: 0;
-webkit-animation-timing-function:ease-out;
}
75% {
background: #000;
-webkit-transform: scale(1.5);
transform: scale(1.5);
margin-top: 25px;
-webkit-animation-timing-function:ease-in;
}
}