css鼠标悬浮颜色动态填充效果代码实例
分类:实例代码
默认状态下,元素是空白的,当鼠标悬浮的时候,能够以动画方式给元素填充颜色。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> * { padding: 0px; margin: 0px; } a { display: block; width: 302px; height: 52px; border: 1px solid #dfdfdf; line-height: 52px; text-align: center; text-decoration: none; font-size: 14px; background: transparent; transition: all 0.3s ease-out 0s; } a.more:hover { border: 1px solid #236ffb; color: #FFF; } a.more::after { content: ""; display: block; width: 0; height: 52px; background: #236ffb; margin-top: -52px; transition: all 0.6s ease 0s; } a.more:hover::after { width: 302px; height: 52px; } </style> </head> <body> <a href="#" class="more">MORE</a> </body> </html>
上面的代码实现了我们的要求,更多内容可以参阅相关阅读。
相关阅读:
(1).transition可以参阅CSS3 transition一章节。
(2).::after可以参阅CSS E:after/E::after伪对象选择符一章节。
(3).:hover可以参阅CSS E:hover伪类选择符一章节。
css鼠标悬浮颜色动态填充效果代码实例,这样的场景在实际项目中还是用的比较多的,关于css鼠标悬浮颜色动态填充效果代码实例就介绍到这了。
css鼠标悬浮颜色动态填充效果代码实例属于前端实例代码,有关更多实例代码大家可以查看。