 |
| Masking Text with Blend Modes In Css3 |
<!--***************************************************************************-->
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Masking Text with Blend Modes In Css3</title>
</head>
<body>
<img src="https://www.hdwallpapers.in/walls/small_sea_wave_hdtv_1080p-HD.jpg" />
<h1>HTML5</h1>
</body>
</html>
<style>
body, html { background: #fff; height: 100%; overflow: hidden; font-family: arial; -moz-user-select:none;user-select:none;-webkit-user-select:none; margin:0; padding:0;}
h1 { color: #000; font-size: 20vw; width: 100%; height: 100%; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; mix-blend-mode: screen; -webkit-animation: moveit 10s infinite ease-in-out forwards; animation: moveit 10s infinite ease-in-out forwards; pointer-events: none; }
@-webkit-keyframes moveit {
0% {
-webkit-transform: translate(0%, 0%);
transform: translate(0%, 0%);
}
15% {
-webkit-transform: translate(1.5%, 1.5%);
transform: translate(1.5%, 1.5%);
}
50% {
-webkit-transform: translate(3%, 3%);
transform: translate(3%, 3%);
}
100% {
-webkit-transform: translate(0%, 0%);
transform: translate(0%, 0%);
}
}
@keyframes moveit {
0% {
-webkit-transform: translate(0%, 0%);
transform: translate(0%, 0%);
}
15% {
-webkit-transform: translate(1.5%, 1.5%);
transform: translate(1.5%, 1.5%);
}
50% {
-webkit-transform: translate(3%, 3%);
transform: translate(3%, 3%);
}
100% {
-webkit-transform: translate(0%, 0%);
transform: translate(0%, 0%);
}
}
h1 { color: #000; font-size: 20vw; width: 100%; height: 100%; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; mix-blend-mode: screen; -webkit-animation: moveit 10s infinite ease-in-out forwards; animation: moveit 10s infinite ease-in-out forwards; pointer-events: none; }
@-webkit-keyframes moveit {
0% {
-webkit-transform: translate(0%, 0%);
transform: translate(0%, 0%);
}
15% {
-webkit-transform: translate(1.5%, 1.5%);
transform: translate(1.5%, 1.5%);
}
50% {
-webkit-transform: translate(3%, 3%);
transform: translate(3%, 3%);
}
100% {
-webkit-transform: translate(0%, 0%);
transform: translate(0%, 0%);
}
}
@keyframes moveit {
0% {
-webkit-transform: translate(0%, 0%);
transform: translate(0%, 0%);
}
15% {
-webkit-transform: translate(1.5%, 1.5%);
transform: translate(1.5%, 1.5%);
}
50% {
-webkit-transform: translate(3%, 3%);
transform: translate(3%, 3%);
}
100% {
-webkit-transform: translate(0%, 0%);
transform: translate(0%, 0%);
}
}
</style>
Hello,
No comments:
Post a Comment