Hello i tried out everything but don´t find the error.
I have a css gradient-animation running on my background and would like to put a mask over it. The mask consists of a circle in the centre of the screen.
I would like that the animation running in the background is only visible inside the circle.
This is my code so far:
#charset "utf-8";
body {
margin: 0;
background: #ffffff;
overflow: hidden;
}
.background {
background: linear-gradient(-45deg, #f2e167, #c0a1d3, #dce0a8);
background-size: 400% 400%;
animation: gradient 7s ease infinite;
height: 100vh;
width: 100vw;
z-index:-2;
}
.mask1 {
mask-image: url(assets/images/mask.svg);
mask-repeat: no-repeat;
}
#keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MAE</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="mask1">
<div class="background"></div>
</div>
</body>
</html>
The animation is running fine but i don´t see the mask.
Thanks for any help.
Something like this?
#charset "utf-8";
body {
margin: 0;
background: #ffffff;
overflow: hidden;
}
.background {
background: linear-gradient(-45deg, #f2e167, #c0a1d3, #dce0a8);
background-size: 400% 400%;
animation: gradient 7s ease infinite;
height: 100vh;
width: 100vw;
z-index:-2;
}
.mask1 {
-webkit-mask-image: radial-gradient(circle, black 50%, rgb(0 0 0 / 0%) 50%);
}
#keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
<div class="mask1">
<div class="background"></div>
</div>
Related
In trying to clone the flickr homepage I've become stuck trying to get the background images to transition just as they do on the flickr homepage.
I tried using keyframes instead of javascript and the transition-duration and animation-duration properties.
the following is a distillation of the problem in code.
html document
<!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>flickr_test</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
</body>
</html>
css document
body {
background-color: rgb(61, 61, 61);
background-image: url(./test_images/computers.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
animation: changePhoto 100s ease-in-out forwards infinite;
}
#keyframes changePhoto {
0% {
background-image: url(./test_images/engineer.jpg);
}
10% {
background-image: url(./test_images/lion.jpg);
}
20% {
background-image: url(./test_images/horse.jpg);
}
30% {
background-image: url(./test_images/mountains.jpg);
}
40% {
background-image: url(./test_images/forest.jpg);
}
50% {
background-image: url(./test_images/computers.jpg);
}
60% {
background-image: url(./test_images/northernLights.jpg);
}
70% {
background-image: url(./test_images/stars.jpg);
}
80% {
background-image: url(./test_images/fern.jpg);
}
90% {
background-image: url(./test_images/fish.jpg);
}
100% {
background-image: url(./test_images/meditation.jpg);
}
}
I suggest you to use js to make smother transitions by adding
body {
transition: all ease .4s
}
or
body {
transition: all ease 5s
}
that could works for what you want, so for experience I highly suggest you to use JS
You can do this with pure CSS - but the keyframes will change if the number of images changes so for a real situation you may want to use some JS to calculate the %s required in the keyframes
This simple snippet though just takes your layout of 10 images and says let's have the whole thing lasting for 50seconds - each image taking a percentage of their alloted 5 seconds to go from opacity 0 to opacity 1 and the same percentage to go from opacity 1 to opacity 0
We need an interlacing of the images coming and going and you can't do that on all common browsers with just one set of keyframes because some browsers don't try to animate the opacity of changing backgrounds (I found Chrome does but Firefox doesn't).
Therefore we put half the images into keyframes changing the background of the body's before pseudo element, and the other half onto the after pseudo element. And we offset the start (so it starts part way through) of one set so as to get the overlapping.
<!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>flickr_test</title>
<link rel="stylesheet" href="test.css">
<style>
#keyframes changePhoto1 {
0% {
background-image: url(https://picsum.photos/id/10/400/300);
opacity: 0;
}
1%,
9% {
background-image: url(https://picsum.photos/id/10/400/300);
opacity: 1;
}
10% {
background-image: url(https://picsum.photos/id/10/400/300);
opacity: 0;
}
19% {
background-image: url(https://picsum.photos/id/12/400/300);
opacity: 0;
}
20%,
29% {
background-image: url(https://picsum.photos/id/12/400/300);
opacity: 1;
}
30% {
background-image: url(https://picsum.photos/id/12/400/300);
opacity: 0;
}
39% {
background-image: url(https://picsum.photos/id/14/400/300);
opacity: 0;
}
40%,
49% {
background-image: url(https://picsum.photos/id/14/400/300);
opacity: 1;
}
50% {
background-image: url(https://picsum.photos/id/14/400/300);
opacity: 0;
}
59% {
background-image: url(https://picsum.photos/id/16/400/300);
opacity: 0;
}
60%,
69% {
background-image: url(https://picsum.photos/id/16/400/300);
opacity: 1;
}
70% {
background-image: url(https://picsum.photos/id/16/400/300);
opacity: 0;
}
79% {
background-image: url(https://picsum.photos/id/18/400/300);
opacity: 0;
}
80%,
89% {
background-image: url(https://picsum.photos/id/18/400/300);
opacity: 1;
}
90% {
background-image: url(https://picsum.photos/id/18/400/300);
opacity: 0;
}
100% {
background-image: url(https://picsum.photos/id/10/400/300);
opacity: 0;
}
}
#keyframes changePhoto2 {
0% {
background-image: url(https://picsum.photos/id/11/400/300);
opacity: 0;
}
1%,
9% {
background-image: url(https://picsum.photos/id/11/400/300);
opacity: 1;
}
10% {
background-image: url(https://picsum.photos/id/11/400/300);
opacity: 0;
}
19% {
background-image: url(https://picsum.photos/id/13/400/300);
opacity: 0;
}
20%,
29% {
background-image: url(https://picsum.photos/id/13/400/300);
opacity: 1;
}
30% {
background-image: url(https://picsum.photos/id/13/400/300);
opacity: 0;
}
39% {
background-image: url(https://picsum.photos/id/15/400/300);
opacity: 0;
}
40%,
49% {
background-image: url(https://picsum.photos/id/15/400/300);
opacity: 1;
}
50% {
background-image: url(https://picsum.photos/id/15/400/300);
opacity: 0;
}
59% {
background-image: url(https://picsum.photos/id/17/400/300);
opacity: 0;
}
60%,
69% {
background-image: url(https://picsum.photos/id/17/400/300);
opacity: 1;
}
70% {
background-image: url(https://picsum.photos/id/17/400/300);
opacity: 0;
}
79% {
background-image: url(https://picsum.photos/id/19/400/300);
opacity: 0;
}
80%,
89% {
background-image: url(https://picsum.photos/id/19/400/300);
opacity: 1;
}
90% {
background-image: url(https://picsum.photos/id/19/400/300);
opacity: 0;
}
100% {
background-image: url(https://picsum.photos/id/11/400/300);
opacity: 0;
}
}
body {
width: 100vw;
height: 100vh;
background-image: url(https://picsum.photos/id/11/400/300);
background-position: center;
background-size: cover;
margin: 0;
}
body::after,
body::before {
content: '';
width: 100%;
height: 100%;
background-color: rgb(61, 61, 61);
background-repeat: no-repeat;
rbackground-attachment: fixed;
background-position: center;
background-size: cover;
animation: changePhoto1 50s linear forwards infinite;
position: fixed;
margin: 0;
}
body::after {
animation: changePhoto2 50s linear forwards infinite;
animation-delay: -5s;
}
</style>
</head>
<body>
</body>
</html>
I'm a novice and in the process of creating a site in HTML and CSS. My problem is that I put an animation scrolling an image to infinity behind a transparent text (not completely transparent) but I would also like to have the possibility of making this text rainbow. These two animations work perfectly independently but once I put them in the same code, the background image remains static, the text is no longer centered but on the left, and the rainbow text works well. So I would like some help to get everything working properly at the same time.
The HTML :
body {
margin: 0;
font-family: arial;
padding: 0;
background-color: black;
}
.text-container h1{
font-size: 120px;
color: rgba(255,255,255,.1);
background-image: url("Images/istockphoto-922764830-612x612.jpg");
background-size: 300px;
background-repeat: repeat-x;
-webkit-background-clip: text;
animation: animate1 20s linear infinite;
animation: animate2 6s linear 0s infinite;
}
#keyframes animate1 {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
#keyframes animate2 {
from {
color: rgba(102,102,255,.1);
}
10% {
color: rgba(0,153,255,.1);
}
50% {
color: rgba(0,255,0,.1);
}
75% {
color: rgba(255,51,153,.1);
}
100% {
color: rgba(102,102,255,.1);
}
.text-container {
margin-top: 0%;
text-align: center;
}
<html>
<head>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="text-container">
<h1>test</h1>
</div>
</body>
</html>
Yes, it's impossible, you are overriding the animation property.
You can try one of two things:
Use the color animation on the text-container
Combine the animations into one
Like Konrad says, you could combine animations, I made this snippet with your code:
.text-container h1{
font-size: 120px;
color: rgba(255,255,255,.1);
background-image: url("http://placekitten.com/400/400");
background-size: 300px;
background-repeat: repeat-x;
-webkit-background-clip: text;
animation: animate1 20s linear infinite;
}
#keyframes animate1{
from {
color: rgba(102,102,255,.1);
background-position: 0 0;
}
10% {
color: rgba(0,153,255,.1);
}
25%{
background-position: 100% 0;
}
50% {
color: rgba(0,255,0,.1);
background-position: 0 0;
}
75% {
color: rgba(255,51,153,.1);
background-position: 100% 0;
}
100% {
color: rgba(102,102,255,.1);
background-position: 0 0;
}
}
.text-container {
margin-top: 0%;
text-align: center;
}
<html>
<head>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="text-container">
<h1>test</h1>
</div>
</body>
</html>
I want to create a square white box with png image in it. I want png to follow background while the colour of box doesn't affect it.
Here is the sample of the output that I want:
As for now, the white background color couldn't work after I added background colour on div for image. I want the transparent space of png follow body background color.
jsfiddle
I've attached snippet too. Can someone help me to look into it? Thanks in advance!
body {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
}
#keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.wrapper {
text-align: center;
border: 1px solid black;
background-color:white;
}
.title {
margin-top: auto;
width: auto;
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
animation: gradient 15s ease infinite;
-webkit-text-fill-color: transparent;
}
<div class="wrapper">
<div class="title">
<img src="https://img.icons8.com/material/24/000000/print--v1.png"/>
</div>
</div>
You need to consider mask here:
body {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
min-height:100vh;
}
#keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.wrapper {
text-align: center;
border: 1px solid black;
}
.title {
margin-top: auto;
-webkit-mask:
url(https://i.ibb.co/Zcvccd9/print-v1.png) center/contain no-repeat,
linear-gradient(#fff,#fff);
-webkit-mask-composite:destination-out;
mask:
url(https://i.ibb.co/Zcvccd9/print-v1.png) center/contain no-repeat,
linear-gradient(#fff,#fff);
mask-composite:exclude;
background: #fff;
}
.title img {
visibility:hidden;
}
<div class="wrapper">
<div class="title">
<img src="https://i.ibb.co/Zcvccd9/print-v1.png" >
</div>
</div>
Here is the solution:
Step 1: Set position: absolute
Step 2: Set the width of the .title
Step 3: add a transparent color in between other colors in the linear background.
body {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
}
#keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.wrapper {
text-align: center;
background-color:white;
}
.title {
margin-top: auto;
position: absolute;
width: 97vw;
border: 1px solid black;
background: linear-gradient(-45deg, #ee7752, #ffffff, #3456ab00, #23a6d5, #23d5ab);
animation: gradient 15s ease infinite;
}
<div class="wrapper">
<div class="title">
<img src="https://img.icons8.com/material/24/000000/print--v1.png"/>
</div>
</div>
I am trying to overlay an image on top of this css animation. I just want it to sit right in the middle of it. I have tried playing with the z-index and different positions, but I can't seem to get it to show up. I would also like to get the colors to change when the mouse moves over different spots.
body {
margin: 0;
padding: 0;
}
.container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, #FFB6C1 10%, #FF69B4 51%, #FFB6C1 100%);
background-size: cover;
animation: animate 60s linear infinite loop;
}
.clouds {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(https://image.ibb.co/cbYTjf/cloud.png);
animation: animate 60s linear infinite;
z-index:1;
}
.logo{
background-image:url(https://i.vgy.me/7FcUbx.jpg)
z-index: 10;
position:absolute;
}
#keyframes animate {
0% {
background-position: 0px;
}
100% {
background-position: 1063px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Clouds </title>
<link rel="stylesheet" href="clouds.css">
</head>
<body>
<div class= "container">
</div>
<div class="background-color"></div>
<div class="clouds">
<div class="logo">
</div>
</body>
There are a number of ways you could achieve this. I would look into using a pseudo-element for the overlay or something but here is one way to do it.
The main problem that I saw was that you needed to define height and width for the logo.
Codepen if you prefer:
https://codepen.io/zenRyoku/pen/rgWNQo?editors=1100
body {
height: 100vh;
width: 100%;
margin: 0;
padding: 0;
}
.container {
position: relative;
width: 100%;
height: 100%;
background: linear-gradient(to right, #FFB6C1 10%, #FF69B4 51%, #FFB6C1 100%);
background-size: cover;
animation: animate 60s linear infinite loop;
}
.clouds {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('https://image.ibb.co/cbYTjf/cloud.png');
animation: animate 60s linear infinite;
z-index: 1;
}
.logo {
position: absolute;
top: 50%;
left: 50%;
height: 20%;
width: 20%;
background: url('https://i.vgy.me/7FcUbx.jpg') center center / cover;
z-index: 10;
transform: translate(-50%, -50%);
}
#keyframes animate {
0% {
background-position: 0px;
}
100% {
background-position: 1063px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Clouds </title>
<link rel="stylesheet" href="clouds.css">
</head>
<body>
<div class="container">
<div class="clouds"></div>
<div class="logo"></div>
</div>
</body>
You can create the effect by using multiple backgrounds and applying it to the body - note that the background specified first will come on top in the stacking order. See demo below:
body {
margin: 0;
min-height: 100vh;
background: url(https://i.vgy.me/7FcUbx.jpg) center / 100px auto no-repeat,
url(https://image.ibb.co/cbYTjf/cloud.png) right / cover no-repeat,
linear-gradient(to right, #FFB6C1 10%, #FF69B4 51%, #FFB6C1 100%) center / cover no-repeat;
animation: animate 60s linear infinite;
}
#keyframes animate {
to {
background-position: center, left, center;
}
}
I am developing an interactive touchscreen at my work which has four tiles on the main screen that look much like the Windows logo. At the moment they are different static colours and they don't look 'alive' and interactive. I want to make them glow or pulsate slightly in random areas and intervals. I thought about creating a white radial gradient and moving it randomly around the outside of each tile so the tile gradient changed, however, I am not sure how to code this in CSS.
I have tried to adapt some copied code that uses radial gradient animations that cycles through the complete hue gradient. The problem with this is I don't want to change the colours because they form the background for text (which can mess with the contrast). The changes can also be rather dramatic, going from a dark colour to very bright, which again messes with the text contrast.
I have already tried a linear gradient but am not happy with it as it is rather predictable and boring (the same gradient going back and forth).
What I am after ideally would be something like this:
Here is a code snippet of what is currently running:
body,html{
margin:0;
padding:0;
height:100%;
}
.box{
height:100%;
width:100%;
}
.gradDynamic{
position:relative;
}
.gradDynamic:after, .gradDynamic:before{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
content:"";
z-index:-1;
}
.gradDynamic:after{
background:radial-gradient(circle,red,transparent);
background-size:400%;
animation:colorSpin 30s linear infinite;
}
.gradDynamic:before{
background-color:yellow;
}
#keyframes colorSpin{
25%{background-position:0 100%}
50%{background-position:100% 100%}
75%{background-position:100% 0}
100%{filter:hue-rotate(360deg)}
}
<div class="box gradDynamic"></div>
I have achieved the animated background with linear gradient background. Lets try this example and comment for further assistance.
.gradient {
height: 400px;
width: 100%;
background: linear-gradient(180deg, #1846c4, #98b2ff, #1846c4);
background-size: 200% 200%;
-webkit-animation: Animation 8s ease infinite;
-moz-animation: Animation 8s ease infinite;
animation: Animation 8s ease infinite;
}
#-webkit-keyframes Animation {
0% {
background-position: 10% 0%;
}
50% {
background-position: 91% 100%;
}
100% {
background-position: 10% 0%;
}
}
#-moz-keyframes Animation {
0% {
background-position: 10% 0%;
}
50% {
background-position: 91% 100%;
}
100% {
background-position: 10% 0%;
}
}
#keyframes Animation {
0% {
background-position: 10% 0%;
}
50% {
background-position: 91% 100%;
}
100% {
background-position: 10% 0%;
}
}
<div class="gradient"></div>
Updated fiddle.
#demo {
width: 100%;
height: 300px;
position: relative;
background: linear-gradient(to bottom, #3bd6f7 0%, #1539b9 100%);
z-index: 2;
}
#demo:after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
content: "";
z-index: -1;
}
#demo::after {
background-size: 400%;
background-size: 400%;
animation: colorSpin 40s linear infinite;
background: radial-gradient(ellipse at top, rgba(0, 0, 0, 0.1), transparent);
}
#demo::after {
background: radial-gradient(ellipse at bottom, rgba(0, 0, 0, 0.1), transparent);
}
#keyframes colorSpin {
25% {
background-position: 0 100%
}
50% {
background-position: 100% 100%
}
75% {
background-position: 100% 0
}
100% {
filter: hue-rotate(360deg)
}
}
#demo::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to top, #1539b9 0%, #1539b9 100%);
opacity: 0;
animation: bg 2800ms ease-in-out 3s infinite alternate-reverse;
z-index: -1;
}
#keyframes bg {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div id="demo">Demo</div>