我想做一个网页效果，就是刷新页面图片透明度慢慢改变
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
html,body,div{
padding: 0;
margin: 0;
}
.heads{
width: 100%;
height: 60px;
background-color: white;
position: fixed;
}
.bigbox img{
width: 100%;
top: 0px;
}
.img1{
width: 100%
top:0px;
height: 1500px;
overflow: hidden;
position: absolute;
position: relative;
left: 100px;
top: 100px;
/*transition: all all 1.5s cubic-bezier(0.25, 0.1, 0.71, 1.26) 0s;*/
opacity: 0.5;
}
.img1 img{
/*position: absolute;
height: 0px;
width: 100%;*/
}
.v{
height: 550px;
width: 100%;
background-color: white;
position: absolute;
top: 1200px;
}
.x{
height: 550px;
width: 100%;
background-color: white;
position: absolute;
top: 2700px;
}
</style>
<body>
<div class="heads">
</div>
<div class="bigbox">
<div class="img1">
<img src="C:\Users\unyu\Desktop\text\img\water_3840.jpg">
</div>
<!-- <div class="img2">
<img src="C:\Users\unyu\Desktop\text\img\rain_3840.jpg">
</div> -->
<div class="v">
<div class="text1"></div>
</div>
<div class="x">
<div class="text2"></div>
</div>
</div>
<script>
//let img1 = document.getElementById('img1');
window.onload = function() {
//img1.style.top=1000 + "px";
document.getElementById(img1).style.opacity=1;
}
</script>
</body>
</html>
sunsay2回答
-
聪明的汤姆
推荐使用css3的animationimg { animation: fade-in 0.5s ease-in; } @keyframes fade-in { from { opacity: 0 } to { opacity: 1 } }望采纳！ -
JohnTito
css添加动画也行
随时随地看视频慕课网APP
Html5
JavaScript
Html/CSS