[英]Modify animated CSS background-image with opacity slider?
我想通过我的第一个代码片段控制动画CSS背景图像的不透明度。 因此,我想使用第二个代码段中所示的滑块。
这只是一个示例,但是我经常遇到这样的情况:我不知道如何拍摄已经存在的图像并将其用于其他操作。 在这种情况下我该怎么办?
.page-header:after { animation: img1 .85s infinite linear; background-image: url(https://i.imgur.com/LZJVN0S.png); content: ""; z-index: 100; pointer-events: none; height: 300%; left: -50%; opacity: 1; position: fixed; top: -110%; width: 300%; } @keyframes img1 { 0% { background-position: top 150px left 120px, 110px 90px; } 50% { background-position: top 150px left 100px, 362px 90px; } 100% { background-position: top 150px left 120px, 615px 90px; } }
<div class="page-header"></div> <div style="position:absolute; top:0px; left:0px;"></div>
var rangeVal = document.getElementById('rangevalue'); var range = document.getElementById('range'); var updateVal = function(val) { rangeVal.innerHTML = val; rangeVal.style.left = val + '%'; }; updateVal(range.value); var imgP = document.getElementsByClassName("imgP")[0]; range.addEventListener("input", function(value) { imgP.style.opacity = this.value / this.max; });
.imgP { opacity: 1; }
<div class="range" style="position:absolute; top:10px; left:20px"> <input type="range" id="range" value="100" min="0" max="100" step="1" oninput="updateVal(this.value)" style="position:fixed; top:32px; left:8px"> <div id="rangevalue" class="range-thumb"></div> <img class="imgP" height="imageheight" width="imagewidth" src='https://png.icons8.com/nolan/50/000000/percentage.png' style="position:fixed; top:56px; left:18px">
添加.imgP
到.page-header
在HTML(或更换imgP
与page-hader
在JavaScript。)
var rangeVal = document.getElementById('rangevalue'); var range = document.getElementById('range'); var updateVal = function(val) { rangeVal.innerHTML = val; rangeVal.style.left = val + '%'; }; updateVal(range.value); var imgP = document.getElementsByClassName("imgP")[0]; range.addEventListener("input", function(value) { imgP.style.opacity = this.value / this.max; });
.imgP { opacity: 1; } .page-header:after { animation: img1 .85s infinite linear; background-image: url(https://i.imgur.com/LZJVN0S.png); content: ""; z-index: 100; pointer-events: none; height: 300%; left: -50%; opacity: 1; position: fixed; top: -110%; width: 300%; } @keyframes img1 { 0% { background-position: top 150px left 120px, 110px 90px; } 50% { background-position: top 150px left 100px, 362px 90px; } 100% { background-position: top 150px left 120px, 615px 90px; } }
<div class="page-header imgP"></div> <div style="position:absolute; top:0px; left:0px;"></div> <div class="range" style="position:absolute; top:10px; left:20px"> <input type="range" id="range" value="100" min="0" max="100" step="1" oninput="updateVal(this.value)" style="position:fixed; top:32px; left:8px"> <div id="rangevalue" class="range-thumb"></div>
var rangeVal = document.getElementById('rangevalue'); var range = document.getElementById('range'); var updateVal = function(val) { rangeVal.innerHTML = val; rangeVal.style.left = val + '%'; }; updateVal(range.value); var imgP = document.getElementsByClassName("page-header")[0]; range.addEventListener("input", function(value) { imgP.style.opacity = this.value / this.max; });
.page-header:after { animation:img1 .85s infinite linear; background-image: url(https://i.imgur.com/LZJVN0S.png); content: ""; z-index:100; pointer-events:none; height:300%; left:-50%; opacity:1; position:fixed; top: -110%; width: 300%; opacity:1; } @keyframes img1 { 0% {background-position: top 150px left 120px, 110px 90px;} 50% {background-position: top 150px left 100px, 362px 90px;} 100% {background-position: top 150px left 120px, 615px 90px;}
<div class="range" style="position:absolute; top:10px; left:20px;bottom:20"> <input type="range" id="range" value="100" min="0" max="100" step="1" oninput="updateVal(this.value)" style="position:fixed; top:32px; left:8px"> <div id="rangevalue" class="range-thumb"></div> <div class="page-header"></div> <div style="position:absolute; top:0px; left:0px;"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.