前端开发html5+css3 鼠标移走,下划线也跟着走的动画过渡效果
摘要： 前端开发兼容360浏览器 浏览器内核 前端开发 那个浏览器适合前端开发者 html 代码 <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”U……
| 前端开发兼容360浏览器 |
| 浏览器内核 前端开发 |
| 那个浏览器适合前端开发者 |
html 代码
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<title>Document</title>
<style>
ul {
position: relative;
display: inline-block;
border: 1px solid #ddd;
font-size: 0;
box-sizing: border-box;
padding: 0px;
}
ul li {
position: relative;
float: left;
display: inline-block;
height: 50px;
text-align: center;
line-height: 50px;
color: #333;
box-sizing: border-box;
margin: 0px;
padding: 0px;
font-size: 16px;
font-family: ‘Microsoft YaHei’, sans-serif;
}
a {
display: inline-block;
padding: 0 25px;
color: #373d41;
-webkit-transition: color 0.2s;
transition: color 0.2s;
text-decoration: none;
}
a:hover {
}
/* ul li:hover{
border-bottom: 3px solid #00c1de;
} */
.line {
position: absolute;
left: 0px;
height: 3px;
width: 0;
padding: 0;
background-color: #00c1de;
bottom: 0;
-webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.line:after {
visibility: hidden;
display: block;
font-size: 0;
content: ‘ ‘;
clear: both;
height: 0;
}
</style>
<script>
$(function() {
$(‘ul li’).hover(function() {
l = $(‘ul li’).width()
m = $(this).index()
$(‘.line’).css({ width: l, left: l * m })
})
})
</script>
</head>
<body>
<ul>
<li><a href=”###”>首页</a></li>
<li><a href=”###”>页面</a></li>
<li><a href=”###”>页面</a></li>
<li><a href=”###”>页面</a></li>
<li><a href=”###”>页面</a></li>
<li><a href=”###”>页面</a></li>
<a class=”line”></a>
</ul>
</body>
</html>
| web前端开发浏览器兼容 |
| 前端开发浏览器兼容 |
| 360浏览器 前端开发者 |
» 本文链接地址：https://www.rokub.com/6866.html
» 您也可以订阅本站：https://www.rokub.com
近期评论