<!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>Slider VU BWN</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.slider{
background-image: url("images/pic_1.jpg");
background-size: cover;
background-repeat: no-repeat;
box-shadow: 0.3rem 0.3em 0.7rem 0.7rem rgb(151, 145, 145);
width: 50rem;
height: 20rem;
margin: auto;
margin-top: 4rem;
animation: eagle 10s infinite;
}
.slider:hover{
background-image: url("images/pic_1.jpg");
background-size: cover;
background-repeat: no-repeat;
box-shadow: 0.3rem 0.3em 0.7rem 0.7rem rgb(121, 235, 87);
width: 50rem;
height: 20rem;
margin: auto;
margin-top: 4rem;
animation-play-state: paused;
}
@keyframes eagle {
0%{
background-image: url("images/pic_1.jpg");
background-size: cover;
}
20%{
background-image: url("images/pic_2.jpg");
background-size: cover;
}
40%{
background-image: url("images/pic_3.jpg");
background-size: cover;
}
60%{
background-image: url("images/pic_4.jpg");
background-size: cover;
}
80%{
background-image: url("images/pic_5.jpg");
background-size: cover;
}
}
.title{
color: rgb(73, 13, 13);
font-size: 2rem;
margin-left: 12rem;
}
</style>
</head>
<body>
<div class="title">THIS IS SLIDER IN CSS ON VU BWN YOUTUBE CHANNGEL KEEP WATCHING!</div>
<div class="slider"></div>
</body>
</html>
0 Comments
If you have any queries please drop in your comments.