CSS BEAUTIFUL IMAGE ANIMATION @Dr Tech |HTML| |CSS| |WEBSITE| |TUTORIAL|...

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%;}}

Tags

You May Like

Show more
Error 404: Results Not Found Use Correct /Label or /recent or /random code to Show Posts

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.