为了账号安全,请及时绑定邮箱和手机立即绑定

我想做一个网页效果,就是刷新页面图片透明度慢慢改变

我想做一个网页效果,就是刷新页面图片透明度慢慢改变

sunsay 2018-10-16 20:25:57
<!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>
查看完整描述

2 回答

?
聪明的汤姆

TA贡献112条经验 获得超33个赞

推荐使用css3的animation

img {
  animation: fade-in 0.5s ease-in;
}

@keyframes fade-in {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

望采纳!

查看完整回答
2 反对 回复 2018-10-17
?
JohnTito

TA贡献2条经验 获得超0个赞

css添加动画也行

查看完整回答
反对 回复 2018-10-17
  • 2 回答
  • 0 关注
  • 1459 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信