Rumah > Artikel > hujung hadapan web > Fade out transition effect using CSS3_html/css_WEB-ITnose
Fade out transition effect using CSS3_html/css_WEB-ITnose
- WBOYasal
- 2016-06-24 11:50:55777semak imbas
摘要：
css3已经被应用到很多网站了，对于创建动态交互的网站是非常有益的。今天就分享一个使用transition实现的鼠标悬停淡阴淡出的效果。
代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> 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; } </style></head><body> <div class="demo"> <div> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> </div> </div></body></html> 效果：
鼠标悬过就可以看到效果了
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：css background属性_html/css_WEB-ITnoseArtikel seterusnya：css权重_html/css_WEB-ITnose