一 琴键效果:
先看效果:
实现思路:
代码实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
width: 200px;
height: 80px;
margin: 5px auto;
background-color: grey;
font-size: 30px;
line-height: 80px;
text-align: center;
color: #fff;
position: relative;
}
/* 给盒子一个伪类不改变大的HTML结构 */
.box::after {
position: absolute;
content: "";
/* 这里必须定位,后面解释 */
top: 0;
left: 0;
/* 盒子的宽度刚开始是0,鼠标移入在慢慢变大 */
width: 0px;
height: 80px;
background-color: red;
}
/* 鼠标移入时的样式 */
.box.animationRun::after {
width: 200px;
transition: all .6s ease-in-out;
}
/* 鼠标移出时的样式 */
.box.animationBack::after {
width: 0px;
transition: all .6s ease-in-out;
}
</style>
</head>
<body>
<div class="box">活动中心</div>
<div class="box">活动中心</div>
<div class="box">活动中心</div>
<div class="box">活动中心</div>
<div class="box">活动中心</div>
<div class="box">活动中心</div>
</body>
</html>
<script src="./jquery-1.8.3.min.js"></script>
<script>
//鼠标移入时,删除animationBack类,加上animationRun类
$('.box').on('mouseenter',function(){
$(this).removeClass('animationBack').addClass('animationRun');
});
//鼠标移入时,删除animationRun类,加上animationBack类
$('.box').on('mouseleave',function(){
$(this).removeClass('animationRun').addClass('animationBack');
})
</script>一些注意点:
/*
1.关于定位的问题:因为伪类::after是添加在元素内容的后面,相当于
本例就是在文本"活动中心"的后面,为了让伪类盒子从左边开始显示,必须定位到
*/
/*
2.关于伪类选择器,如果div的盒子有多个类,比如:
<div class="box animationBack">活动中心</div>
那么,此时要选中伪类,可以这样:
.box.animationBack::after同时这个优先级比.box::after要高
*/
/*
3.为什么要加一个动画返回的类animationBack,最主要的是transition
是动画到指定的属性,但是返回原始值是没有动画的,是闪回.加上这个类,目的是让鼠标移出也有动画效果.
*/
/*
4.jQuery中this的执行问题,$('.box')on('mouseenter',function(){ }
这里是给所有的box类都加了鼠标移入事件,但是this指向的却是当前移入的div盒子
*/模拟的效果:
修改一个BUG,上面的代码其实可以利用纯CSS实现这种效果,上面的思路是利用加类的方式来实现,但是也可以不用加类,比如:我们直接给box盒子一个伪类hover属性就可以实现了.但是有一个知识点要注意:
/*
translation属性:
写在默认情况下和写在hover里的区别：
写在默认情况下：代表移入移出都有动画效果
写在hover里：代表只有移入有动画效果，移出时是立刻闪现复原
*/比如本例就是写在默认情况下的:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
width: 200px;
height: 80px;
margin: 5px auto;
background-color: grey;
font-size: 30px;
line-height: 80px;
text-align: center;
color: #fff;
position: relative;
}
/* 给盒子一个伪类不改变大的HTML结构 */
.box::after {
position: absolute;
content: "";
/* 这里必须定位,后面解释 */
top: 0;
left: 0;
/* 盒子的宽度刚开始是0,鼠标移入在慢慢变大 */
width: 0px;
height: 80px;
background-color: red;
/* 加在元素里面返回有动画效果 */
/* transition: all .6s ease-in-out; */
}
/* 鼠标移入时的样式 */
.box:hover::after {
width: 200px;
/* 加在hover里面返回没有动画效果,是闪回 */
/* transition: all .6s ease-in-out; */
}
</style>
</head>
<body>
<div class="box">活动中心</div>
<div class="box">活动中心</div>
<div class="box">活动中心</div>
<div class="box">活动中心</div>
<div class="box">活动中心</div>
<div class="box">活动中心</div>
</body>
</html>注意点:
//1.translation属性的注意点
/*2.选择器: .box:hover::after代表的意思是:
找到鼠标移入到盒子上时此时的伪类after里的内容 */
扫一扫
2086
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
