<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="web/js/jquery.1.11.3.min.js"></script>
<title>css3 动画</title>
<style>
.news-list-box {
height: 120px;
width: 500px;
padding: 20px 0;
border-bottom: 1px solid #f2f2f2;
position: relative;
}
.list-line {
position: absolute;
content: '';
left: 50%;
bottom: 0;
width: 0;
background: #1ec800;
height: 1px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
transition: all 1s ease;
}
</style>
</head>
<body>
<div class="news-list-box" οnmοuseοver="show()" οnmοuseοut="hide()">
鼠标在上
<div class="list-line"></div>
</div>
</body>
</html>
<script type="text/javascript">
function show() {
$(".list-line").css("width", "100%");
$(".list-line").css("left", "0");
}
function hide() {
$(".list-line").removeAttr("style");
}
</script>
css3 实现一个改变元素属性实现的动画效果
最新推荐文章于 2024-08-26 19:16:26 发布