前端开发 css 鼠标滑过More动态特效
摘要：前端开发跟网页设计有啥区别|前端网页开发html5|网页设计前端开发自学网 html 代码 <!doctype html> <html> <head> <meta charset=”utf-8″> <title>前端开发……
前端开发跟网页设计有啥区别|前端网页开发html5|网页设计前端开发自学网
html 代码
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<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;
font-family: arial, verdana, Microsoft YaHei, Tahoma, Simsun, sans-serif;
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>
背景设置为透明色
after宽度为0变到宽度为100%
前端网页开发测试工具|网页开发前端切图|前端开发网页插件
» 本文来自：前端开发者 » 《前端开发 css 鼠标滑过More动态特效》
» 本文链接地址：https://www.rokub.com/4952.html
» 您也可以订阅本站：https://www.rokub.com
近期评论