slider html css
<!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" />
<style>
/* ///headers profile for the css//// */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
text-decoration: none;
}
/* slider body */
.background {
height: 100vh;
width: 100vw;
position: relative;
background-color: rgb(100, 100, 100);
}
.divmain {
/* height: 500px;
width: 80%; */
height: 100%;
width: 100%;
position: absolute;
top: 50%;
left: 50%;
background-color: #fff;
transform: translate(-50%, -50%);
background-image: url(../images/pexels-1.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
box-shadow: 2px 4px 6px 6px rgb(0, 0, 0);
animation: slider 15s infinite linear;
}
h1 {
position: absolute;
color: rgb(0, 0, 0);
text-align: center;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 5rem;
font-weight: 800;
}
.glow {
font-size: 80px;
color: #fff;
text-align: center;
animation: glow 1s ease-out infinite alternate;
}
.mask {
background-color: rgba(0, 0, 0, 0.459);
height: 100%;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
@keyframes glow {
from {
text-shadow: 0 0 10px rgb(108, 238, 255), 0 0 20px rgb(108, 238, 255), 0 0 30px #ccc, 0 0 40px #ccc, 0 0 50px #ccc, 0 0 60px #ccc, 0 0 70px #ccc;
}
to {
text-shadow: 0 0 20px rgb(108, 238, 255), 0 0 30px aqua, 0 0 40px aqua, 0 0 50px aqua, 0 0 60px aqua, 0 0 70px aqua, 0 0 80px aqua;
}
}
@keyframes slider {
0% {
background-image: url(../images/pexels-1.jpg);
}
25% {
background-image: url(../images/pexels-4.jpg);
}
50% {
background-image: url(../images/pexels-2.jpg);
}
80% {
background-image: url(../images/pexels-3.jpg);
}
}
</style>
</head>
<body>
<section class="background">
<div class="divmain">
<div class="mask">
<h1 class="glow">This is a slider</h1>
</div>
</div>
</section>
</body>
</html>