Fade out transition effect using CSS3_html/css_WEB-ITnose
- WBOY原創
- 2016-06-24 11:50:55816瀏覽
摘要：
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> 效果：
鼠标悬过就可以看到效果了
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn