html代码图片淡入淡出
导读:HTML代码中,可以通过CSS的transition属性实现图片的淡入淡出效果。 <html> <head> <style> .fade-in-out {...
HTML代码中,可以通过CSS的transition属性实现图片的淡入淡出效果。
html> head> style> .fade-in-out { opacity: 1; transition: opacity 0.5s ease-in-out; } .fade-in-out:hover { opacity: 0.5; } /style> /head> body> img class="fade-in-out" src="your-image-source" alt="your-image-description"> /body> /html>
上述代码首先定义了一个.fade-in-out的类,给与图片opacity属性初始值为1,transition动画效果的时间为0.5s,timing function为ease-in-out。
当鼠标悬停在图片上时,.fade-in-out:hover类将图片的opacity属性改为0.5,实现了图片的淡出效果。
通过CSS的transition属性,我们可以轻松实现HTML代码中的图片淡入淡出效果,让页面更具动感。
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: html代码图片淡入淡出
本文地址: https://pptw.com/jishu/540671.html