首页 > 蚂蚁部落 > 正文

css鼠标悬浮颜色动态填充效果代码实例
2017-09-30 09:12:06   来源:   评论:0 点击:

默认状态下,元素是空白的,当鼠标悬浮的时候,能够以动画方式给元素填充颜色。代码实例如下:[HTML] 纯文本查看 复制代码& 36816;& 34892

默认状态下,元素是空白的,当鼠标悬浮的时候,能够以动画方式给元素填充颜色。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><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伪类选择符一章节。

相关热词搜索:

上一篇:contentWindow和contentDocument用法
下一篇:外部引入的CSS文件名后面的问号的作用是什么

分享到: 收藏
评论排行