CSS BEAUTIFUL IMAGE ANIMATION @Dr Tech |HTML| |CSS| |WEBSITE| |TUTORIAL|...
HTML And CSS Cooding
August 11, 2022
HTML SOURCE CODE
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="b.css">
</head>
<body>
<div class="container">
<img src="https://images.unsplash.com/photo-1456926631375-92c8ce872def?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="image" class="image">
</div>
</body>
</html>
CSS SOURCE CODE
body,html{
width: 100vw;
height: 100vh;
padding: 0;
margin: 0;
overflow: hidden;}
.container{
animation: animate 2s infinite;
background-image: url('https://images.unsplash.com/photo-1470058869958-2a77ade41c02?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
padding: 0;
margin: 0;
width: 100vw;
height: 100vh;}
.image{
position: absolute;
width: 100%;
height: 100%;
bottom: 0;
z-index: 2;
mix-blend-mode: lighten;}
@keyframes animate{
0%{background-position: 0 100%;}
50%{background-position: 100% 100%;}
100%{background-position: 0 100%;}}
