How to height of span without expanding the page? - html

So I made an animation of a so called "starfield".
They are made of a couple of small, rotating, radial gradients.
Now when they rotate, you can clearly see where they stop/end. Increasing the height of the background fixes this, but it also increases the entire page height.
Is there anyway to increase the background height, but keep it centered in the page?
Here's the codepen: https://codepen.io/twanmulder/pen/GNLRWo
<!doctype html>
<html>
<head></head>
<body>
<div class="starfield">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</body>
<html>


position: absolute on .starfield and overflow: hidden on body (or the parent of .starfield).
body, html {
display: block;
width: 100%;
height: 100%;
background: #000;
}
body {
overflow: hidden;
}
.starfield {
position: absolute;
display: block;
width: 100%;
height: 100%;
overflow: hidden;
-webkit-animation: fadein 15s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 15s; /* Firefox < 16 */
-ms-animation: fadein 15s; /* Internet Explorer */
-o-animation: fadein 15s; /* Opera < 12.1 */
animation: fadein 15s;
}
.starfield > * {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.starfield > * {
background-size: 200px 200px;
background-image: radial-gradient(2px 2px at 40px 60px, #ccc, rgba(0,0,0,0)),
radial-gradient(2px 2px at 20px 50px, #ddd, rgba(0,0,0,0)),
radial-gradient(2px 2px at 30px 100px, #eee, rgba(0,0,0,0)),
radial-gradient(2px 2px at 40px 60px, #fff, rgba(0,0,0,0)),
radial-gradient(2px 2px at 110px 90px, #ccc, rgba(0,0,0,0)),
radial-gradient(2px 2px at 190px 150px, #ddd, rgba(0,0,0,0));
background-repeat: repeat;
}
.starfield > * {
transform-origin: 50% 50%;
animation-name: starfieldRotate;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.starfield > *:nth-child(1){
animation-duration: 25s;
animation-delay: -15;
}
.starfield > *:nth-child(2){
animation-duration: 35s;
animation-delay: -50s;
}
.starfield > *:nth-child(3){
animation-duration: 50s;
}
.starfield > *:nth-child(4){
animation-duration: 70s;
}
.starfield > *:nth-child(5){
animation-duration: 120s;
}
#keyframes starfieldRotate {
from {transform:rotate(0deg);}
to {transform: rotate(360deg);}
}
<div class="starfield">
<span></span>
<span></span>
<span></span>
<span></span>
</div>

Related

I want to make automatic image slider in HTML, I tried but that doesn't work?

I want to make an image slider of width:100% and height 365%
I tried this but its not working.`
<style>
.slide{
width: 100%;
height: 370px;
border: 2px solid orange;
animation-name: slide1;
animation-duration: 8s;
animation-iteration-count: infinite;
}
#keyframes slide1{
0%{
/* background-color: orange; */
background-image: url("3.jpg");
}
25%{
background-image: url("a2.img");
}
75%{
background-image: url("a3.img");
}
100%{
background-image: url("a4.img");
}
}
</style>
and in the body If I add that much I hope that it should work
<body>
<div class="slide">
</div>

Try this.
I think you've missed animation-timing-function.
.slide {
width: 100%;
height: 370px;
border: 2px solid orange;
background-repeat: no-repeat;
background-size: contain;
animation-name: slide1;
animation-duration: 8s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
#keyframes slide1 {
0% {
background-image: url("https://images.unsplash.com/photo-1633113215844-b2ddc0411724?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60");
}
25% {
background-image: url("https://images.unsplash.com/photo-1637709569303-f7cda15a4d3a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw0fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60");
}
75% {
background-image: url("https://images.unsplash.com/photo-1637717256696-a0204d03a8fe?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60");
}
100% {
background-image: url("https://images.unsplash.com/photo-1633113215844-b2ddc0411724?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60");
}
}
<body>
<div class="slide"></div>
</body>

css insert image inside linear-gradient half part

I have a css background animation that separate the screen into 2 color part, div 1 left is black and div 2 right is white. However I want to make the div 2 right white part to become a image background while black part remain.
How do I insert the image cover into the right white part without affect the left black part
this is the example image cover I would like to cover in div 2
below is my code
body,
html {
margin: 0;
padding: 0;
}
.bg {
min-height: 100vh;
animation: BgAnimation;
-webkit-animation: BgAnimation;
-moz-animation: BgAnimation;
background: linear-gradient(106deg, #313131 50%, white 50.1%);
animation-duration: 1.3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
background-size: 200% 200%;
}
#keyframes BgAnimation {
0% {
background-position: 0% 0%;
}
100% {
background-position: 50% 50%;
}
}
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#wrapper {
display: flex;
}
#left {
flex: 0 0 65%;
color: white;
margin-left: 10%;
margin-top: 20%;
animation: fadein 3s;
}
#right {
flex: 1;
margin-right: 5%;
margin-top: 20%;
font-size: 21px;
text-align: center;
animation: fadein 6s;
-moz-animation: fadein 6s; /* Firefox */
-webkit-animation: fadein 6s; /* Safari and Chrome */
-o-animation: fadein 6s;
}
<body>
<div class="bg">
<div id="wrapper">
<div id="left">1 div</div>
<div id="right">2 div</div>
</div>
</div>
</body>

make your gradient black/transparent and put the image below it:
body {
margin: 0;
}
.bg {
min-height: 100vh;
background:
linear-gradient(106deg, #313131 50%, transparent 50.1%),
url(https://i.stack.imgur.com/bPLa1m.jpg) right;
animation: BgAnimation 1.3s forwards;
background-size: 200% 200%,80% auto;
}
#keyframes BgAnimation {
0% {
background-position: 0% 0%,right;
}
100% {
background-position: 50% 50%,right;
}
}
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#wrapper {
display: flex;
}
#left {
flex: 0 0 65%;
color: white;
margin-left: 10%;
margin-top: 20%;
animation: fadein 3s;
}
#right {
flex: 1;
margin-right: 5%;
margin-top: 20%;
font-size: 21px;
text-align: center;
animation: fadein 6s;
}
<div class="bg">
<div id="wrapper">
<div id="left">1 div</div>
<div id="right">2 div</div>
</div>
</div>

Line drawing animation left, down, lef with pure css

I'm using css transition to drawing a line, it run or loading from right to left, and then down, and continue to load to left:
point 1------point 2
|
|
|
---------point 3
this is my css:
.transitionLine {
height:0px;
width:1px;
border:10px solid #ef4e4e;
-webkit-animation: increase 3s;
-moz-animation: increase 3s;
-o-animation: increase 3s;
animation: increase 3s;
animation-fill-mode: forwards;
}
#keyframes increase {
/*load to left*/
30% {
width: 500px;
}
/*load down*/
60% {
border-radius: 3px;
width: 1000px;
}
/*load to left*/
100% {
border-radius: 3px;
width: 1500px;
}
}
<div class="transitionLine"></div>
my css seem not break line to load down and left, how to fix the problem ?

You can achieve this effect as per my snippet.
I have used Two keyframes and an after property to add bottom line
.transitionLine {
height: 0px;
width: 1px;
border-top: 10px solid #ef4e4e;
border-right: 10px solid #ef4e4e;
position: relative;
-webkit-animation: increase 3s;
-moz-animation: increase 3s;
-o-animation: increase 3s;
animation: increase 3s;
animation-fill-mode: forwards;
}
.transitionLine:after {
content: '';
display: block;
height: 0px;
width: 1px;
border-top: 10px solid #ef4e4e;
border-right: 10px solid #ef4e4e;
-webkit-animation: increase2 3s;
-moz-animation: increase2 3s;
-o-animation: increase2 3s;
animation: increase2 3s;
animation-fill-mode: forwards;
position: absolute;
left: 100%;
bottom: 0;
}
#keyframes increase {
/*load to left*/
30% {
width: 200px;
height: 0px;
}
31% {
width: 200px;
height: 1px;
}
/*load down*/
60% {
height: 100px;
width: 200px;
}
/*load to left*/
100% {
height: 100px;
width: 200px;
}
}
#keyframes increase2 {
60% {
height: 0px;
width: 0px;
}
/*load to left*/
100% {
height: 0px;
width: 200px;
}
}
<div class="transitionLine"></div>

You can use gradient to draw lines and you will need only one keyframe:
.transitionLine {
width:300px;
height:100px;
background-image:
linear-gradient(#ef4e4e,#ef4e4e),
linear-gradient(#ef4e4e,#ef4e4e),
linear-gradient(#ef4e4e,#ef4e4e);
background-size:
0% 5px,
5px 0%,
0% 5px;
background-position:
top left,
top center,
150px 100%;
background-repeat:no-repeat;
animation: increase 3s;
animation-fill-mode: forwards;
}
#keyframes increase {
30% {
background-size:
50% 5px,
5px 0%,
0% 5px;
}
/*load down*/
60% {
background-size:
50% 5px,
5px 100%,
0% 5px;
}
/*load to left*/
100% {
background-size:
50% 5px,
5px 100%,
50% 5px;
}
}
<div class="transitionLine"></div>
That you can easily scale to any number of lines:
.transitionLine {
width:300px;
height:100px;
background-image:
linear-gradient(#ef4e4e,#ef4e4e),
linear-gradient(#ef4e4e,#ef4e4e),
linear-gradient(#ef4e4e,#ef4e4e),
linear-gradient(#ef4e4e,#ef4e4e),
linear-gradient(#ef4e4e,#ef4e4e);
background-size:
5px 0%,
0% 5px,
5px 0%,
0% 5px,
5px 0%;
background-position:
bottom left,
top left,
top center,
150px 100%,
right bottom;
background-repeat:no-repeat;
animation: increase 3s;
animation-fill-mode: forwards;
}
#keyframes increase {
20% {
background-size:
5px 100%,
0% 5px,
5px 0%,
0% 5px,
5px 0%;
}
40% {
background-size:
5px 100%,
50% 5px,
5px 0%,
0% 5px,
5px 0%;
}
60% {
background-size:
5px 100%,
50% 5px,
5px 100%,
0% 5px,
5px 0%;
}
80% {
background-size:
5px 100%,
50% 5px,
5px 100%,
50% 5px,
5px 0%;
}
100% {
background-size:
5px 100%,
50% 5px,
5px 100%,
50% 5px,
5px 100%;
}
}
<div class="transitionLine"></div>

.transitionLine {
height:0px;
width:1px;
border:10px solid #ef4e4e;
-webkit-animation: increase 1s;
-moz-animation: increase 1s;
-o-animation: increase 1s;
animation: increase 1s;
animation-fill-mode: forwards;
}
.transitionLine:before{
height: 0px;
content: " ";
width: 0px;
border: 10px solid #ef4e4e;
-webkit-animation: increaseA 1s;
-moz-animation: increaseA 1s;
-o-animation: increaseA 1s;
animation: increaseA 1s;
animation-fill-mode: forwards;
margin: -10px 0 0 510px;
animation-delay: 1s;
display: inline-block;
opacity: 0;
}
.transitionLine:after{
height: 0px;
content: " ";
width: 0px;
border: 10px solid #ef4e4e;
-webkit-animation: increaseB 1s;
-moz-animation: increaseB 1s;
-o-animation: increaseB 1s;
animation: increaseB 1s;
animation-fill-mode: forwards;
margin: 0px 0 0 510px;
animation-delay: 2s;
display: inline-block;
opacity: 0;
}
#keyframes increase {
0% {
width: 0px;
}
100% {
width: 500px;
}
}
#keyframes increaseA {
0% {
height: 0px;
opacity: 1;
}
100% {
height: 500px;
opacity: 1;
}
}
#keyframes increaseB {
0% {
width: 0px;
opacity: 1;
}
100% {
width: 500px;
opacity: 1;
}
}
<div class="transitionLine"></div>

How to change position of a sphere overtime using css

I am new to CSS and still don't get a lot of stuff! Using only CSS animations I have to create a spinning animation over a roulette.I have to create a sphere and as a background use a roulette img. My question is how can I change the position of the sphere every 10% of the animation, so it can make a full circle around the roulette.
This is the img I am using as a background: http://www.casinoanswers.com/wp-content/uploads/2010/03/american-roulette-wheel.gif
HTML:
<div id="roulette">
<figure class="circle"></figure>
</div>
CSS:
#roulette{
background-image: url("american-roulette-wheel.gif");
width:395px;
height:400px;
margin:0;
}
.circle {
position:fixed;
top:84px;
left:190px;
border-radius: 50%;
height: 30px;
width: 30px;
margin:0;
background: radial-gradient(circle at 10px 10px, #5cabff, #000);
}
Thank you!

By placing your ball/circle image inside a container div and rotating that div, you can create the illusion of the ball traveling around the background. You will have to play with positioning to get it exact, and it might be cool to rotate the ball as well as the container div.
<div id="roulette">
<div class="circleContainer">
<figure class="circle"></figure>
</div>
</div>
#roulette{
background-image: url(http://www.casinoanswers.com/wp-content/uploads/2010/03/american-roulette-wheel.gif);
width:395px;
height:400px;
margin:0;
}
.circle {
border-radius: 50%;
height: 30px;
width: 30px;
margin:0;
background: radial-gradient(circle at 10px 10px, #5cabff, #000);
}
#-webkit-keyframes spinnerRotate
{
from{-webkit-transform:rotate(0deg);}
to{-webkit-transform:rotate(360deg);}
}
#-moz-keyframes spinnerRotate
{
from{-moz-transform:rotate(0deg);}
to{-moz-transform:rotate(360deg);}
}
#-ms-keyframes spinnerRotate
{
from{-ms-transform:rotate(0deg);}
to{-ms-transform:rotate(360deg);}
}
.circleContainer{
height: 250px;
top: 80px;
position: fixed;
left: 190px;
-webkit-animation-name: spinnerRotate;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spinnerRotate;
-moz-animation-duration: 5s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spinnerRotate;
-ms-animation-duration: 5s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
}
https://jsfiddle.net/2gat1m5y/1/

How to animate the progress element with CSS3?

I have a progress element like so:
body {
background: grey;
}
progress[value] {
-webkit-appearance: none;
appearance: none;
height: 25px;
width: 95%;
position: relative;
top: 10px;
right: 50%;
left: 2.5%;
}
progress[value]::-webkit-progress-bar {
background-color: rgba(255,255,255,0.2);
border-radius: 50px;
border: solid;
border-width: 0px;
border-color: rgba(255,255,255,0.1);
}
progress[value]::-webkit-progress-value {
background-image: repeating-linear-gradient(
45deg,
#fff,
#fff 10px,
#f9f9f9 10px,
#f9f9f9 20px
);
border-radius: 50px;
-moz-animation-name: move;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease;
-moz-animation-duration: 0.4s;
-moz-animation-delay: 1.5s;
-moz-animation-fill-mode: forwards;
-webkit-animation-name: move;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 0.4s;
animation-delay: 1.5s;
animation-name: move;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-delay: 1.5s;
animation-play-state: running;
}
#keyframes move {
0% {
background-position: 0 0;
}
100% {
background-position: 50px 50px;
}
}
<progress max="100" value="80"></progress>
And I have used CSS animations, however for some reason they do not work. I want the stripes to move horizontally, infinitely. Is there any reason to why this doesn't work?

Note - <progress> is not well supported by IE. See this for a complete guide to make it work across browsers. Below demo is the simplified animation without <progress> element.
body {
background-color: #666;
}
div {
background-color: #999;
border-radius: 30px;
height: 30px;
}
div > div {
background-image: repeating-linear-gradient(-45deg, #fff, #fff 10px, #ccc 10px, #ccc 20px);
background-size: 28px 30px;
animation: progress 2s linear infinite;
width: 50%;
}
#keyframes progress {
0% { background-position: 0 0; }
100% { background-position: 28px 0; }
}
<div><div></div></div>