首页前端开发CSSCSS3使用transition实现的鼠标悬停淡入淡出的效果

CSS3使用transition实现的鼠标悬停淡入淡出的效果

时间2024-05-23 23:56:03发布访客分类CSS浏览84
导读:摘要: css3已经被应用到很多网站了,对于创建动态交互的网站是非常有益的。今天就分享一个使用transition实现的鼠标悬停淡阴淡出的效果。 代码: 复制代码 代码如下: Document div.demo { float...

摘要:
css3已经被应用到很多网站了,对于创建动态交互的网站是非常有益的。今天就分享一个使用transition实现的鼠标悬停淡阴淡出的效果。

代码:

复制代码 代码如下:




Document

div.demo {
float: left;
border:1px solid #ccc;
}
div.demo i {
cursor: pointer;
height: 50px;
transition: opacity 2s;
width: 50px;
background: #000;
float: left;
margin: 5px;
opacity: 0;
}
div.demo i:hover {
opacity: 1;
transition-duration: 0s;
}
















声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!


若转载请注明出处: CSS3使用transition实现的鼠标悬停淡入淡出的效果
本文地址: https://pptw.com/jishu/666651.html
springboot中properties的用法是什么 常用前端CSS命名规范随手记整理

游客 回复需填写必要信息