CSS+HTML动手实战（一）鼠标悬停效果
- 前言
- （一）鼠标悬停实现翻转
- 完整代码：
- （二）鼠标悬停实现闪光
- 完整代码：
- 结语
前言
最近学习完了CSS+HTML，想做几个项目练练手，经朋友告知，可以写代码记录，所以在此进行代码的另类备份以及记录实际动手时发现的问题。（新手向记录，望大佬们海涵！）（每个实战后都附有完整代码）
（一）鼠标悬停实现翻转
通过CSS3中的属性transition实现某个属性发生改变时，产生一个过渡效果，过渡，即属性变换的过程产生一定延迟，并非生分的直接变化，能产生一定的视觉美感（bushi）。
- 首先设置一个三层的div嵌套，最外层div用于装下实现本次翻转效果的其余div，第二层div可以提供一个拥有两个面的立体空=间，实现翻转的视觉效果，第三层两个div为第二层div的两个面。
<body>
<div class="out_div">
<div class="contt">
<div class="first_div">First Page</div>
<div class="back_div">Back Page</div>
</div>
</div>
</body>
- 然后为每一个div加上宽高，背景色等基本属性,并将两个需要翻转的div设置为绝对定位，使其脱离文档流（否则两个div的位置会不重叠，翻转时位置产生变化）
<style>
.out_div{
display: inline-block;
width: 160px;
height: 80px;
}
.contt{
display: inline-block;
width: 100%;
height: 100%;
}
.first_div{
position: absolute;
display: inline-block;
width: 100%;
height: 100%;
background-color: aqua;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.back_div{
position: absolute;
display: inline-block;
width: 100%;
height: 100%;
background-color: aquamarine;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
</style>
- 最后为两个最内层的div设置过渡效果，实现鼠标悬浮时翻转。如下，完整style代码：
<style>
.out_div{
display: inline-block;
width: 160px;
height: 80px;
}
.contt{
display: inline-block;
width: 100%;
height: 100%;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.first_div{
position: absolute;
display: inline-block;
width: 100%;
height: 100%;
background-color: aqua;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
transition: transfrom 0.8s;
/*设置backface-visibility属性，使得翻转180度后不显示此div，只有在正面时显示*/
backface-visibility: hidden;
}
.back_div{
position: absolute;
display: inline-block;
width: 100%;
height: 100%;
background-color: aquamarine;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
/* 旋转180使得刚开始看不到这个div */
transform: rotateX(180deg);
/*过渡效果在transfrom属性产生变化时生效，使得transfrom属性变化时间延迟至0.8s*/
transition: transfrom 0.8s;
/*设置backface-visibility属性，使得翻转180度后不显示此div，只有在正面时显示*/
backface-visibility: hidden;
}
.out_div:hover .contt{
transform: rotateX(180deg);
}
</style>
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flip测试</title>
<style>
.out_div{
display: inline-block;
width: 160px;
height: 80px;
}
.contt{
display: inline-block;
width: 100%;
height: 100%;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.first_div{
position: absolute;
display: inline-block;
width: 100%;
height: 100%;
background-color: aqua;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
transition: transfrom 0.8s;
backface-visibility: hidden;
}
.back_div{
position: absolute;
display: inline-block;
width: 100%;
height: 100%;
background-color: aquamarine;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
/* 旋转180使得刚开始看不到这个 */
transform: rotateX(180deg);
transition: transfrom 0.8s;
backface-visibility: hidden;
}
.out_div:hover .contt{
transform: rotateX(180deg);
}
</style>
</head>
<body>
<div class="out_div">
<div class="contt">
<div class="first_div">First Page</div>
<div class="back_div">Back Page</div>
</div>
</div>
</body>
</html>
（二）鼠标悬停实现闪光
原理同上，利用的是transition的过渡效果。
- 首先创建一个div，将其当成产生变化的背景
<div class="shin">触摸就会闪光</div>
- 接着为这个div设置宽高，背景色等基础属性
<style>
.shin{
display: inline-block;
width: 160px;
height: 80px;
background-color: antiquewhite;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
</style>
- 设置完div基础属性后，我们需要用到CSS中的伪类after（after伪类还可以用于解决高度塌陷问题），将after伪类设置成闪光效果中的那道光。
为了实现类似光闪烁的效果，可以将after伪类设置为绝对定位，使其脱离文档流，提高层级，达到覆盖div的效果，同时为了不影响鼠标不悬浮时的视觉效果，将after伪类初始位置设置在界面外（left: -50px;）
<style>
.shin{
display: inline-block;
width: 160px;
height: 80px;
background-color: antiquewhite;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
/*设置为超出时隐藏，可以使得鼠标不悬浮和过渡完后after伪类不会出现在div上层*/
overflow: hidden;
/*设置为相对定位可以使得div变成after伪类的包含块，否则after伪类会把根元素html当成它的包含块，使得光束after伪类变化范围出现错误（变成全屏移动的光束了）*/
position: relative;
}
.shin::after{
content: "";
background-color: #fff;
width: 20px;
/*此处为了模拟的真实，设置的宽度和角度由于div溢出隐藏overflow: hidden的设置，恰好使得旋转后的after伪类显示高度与div一致（实际高度不一致，具体可以删除div的overflow: hidden;属性查看）*/
height: 120px;
transform: rotate(30deg);
left: -50px;
position: absolute;
transition: left 0.8s;
}
.shin:hover::after{
/*当鼠标悬浮时after伪类从左侧出现，并过渡到div的右侧，但由于div设置了overflow: hidden，故超出时，after伪类会被隐藏*/
left:120%;
}
</style>
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shin</title>
<style>
.shin{
display: inline-block;
width: 160px;
height: 80px;
background-color: antiquewhite;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
}
.shin::after{
content: "";
background-color: #fff;
width: 20px;
height: 120px;
transform: rotate(30deg);
left: -50px;
position: absolute;
transition: left 0.8s;
}
.shin:hover::after{
left:120%;
}
</style>
</head>
<body>
<div class="shin">触摸就会闪光</div>
</body>
</html>
结语
这次其实也主要是为了尝试写博客，选择的项目也是非常小白的，主要是练练手和练习博客的写法，下次必须有进步！
