CSS+HTML动手实战（一）鼠标悬停效果 |
您所在的位置：网站首页 › jquery设置鼠标样式 › CSS+HTML动手实战（一）鼠标悬停效果 |
|
CSS+HTML动手实战（一）鼠标悬停效果
前言（一）鼠标悬停实现翻转完整代码：
（二）鼠标悬停实现闪光完整代码：结语
前言
最近学习完了CSS+HTML，想做几个项目练练手，经朋友告知，可以写代码记录，所以在此进行代码的另类备份以及记录实际动手时发现的问题。（新手向记录，望大佬们海涵！）（每个实战后都附有完整代码） （一）鼠标悬停实现翻转通过CSS3中的属性transition实现某个属性发生改变时，产生一个过渡效果，过渡，即属性变换的过程产生一定延迟，并非生分的直接变化，能产生一定的视觉美感（bushi）。 首先设置一个三层的div嵌套，最外层div用于装下实现本次翻转效果的其余div，第二层div可以提供一个拥有两个面的立体空=间，实现翻转的视觉效果，第三层两个div为第二层div的两个面。 First Page Back Page 然后为每一个div加上宽高，背景色等基本属性,并将两个需要翻转的div设置为绝对定位，使其脱离文档流（否则两个div的位置会不重叠，翻转时位置产生变化） .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; } 最后为两个最内层的div设置过渡效果，实现鼠标悬浮时翻转。如下，完整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); } 完整代码： Flip测试 .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); } First Page Back Page （二）鼠标悬停实现闪光原理同上，利用的是transition的过渡效果。 首先创建一个div，将其当成产生变化的背景 触摸就会闪光 接着为这个div设置宽高，背景色等基础属性 .shin{ display: inline-block; width: 160px; height: 80px; background-color: antiquewhite; display: flex; flex-direction: row; justify-content: center; align-items: center; } 设置完div基础属性后，我们需要用到CSS中的伪类after（after伪类还可以用于解决高度塌陷问题），将after伪类设置成闪光效果中的那道光。 为了实现类似光闪烁的效果，可以将after伪类设置为绝对定位，使其脱离文档流，提高层级，达到覆盖div的效果，同时为了不影响鼠标不悬浮时的视觉效果，将after伪类初始位置设置在界面外（left: -50px;） .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%; } 完整代码： Shin .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%; } 触摸就会闪光 结语这次其实也主要是为了尝试写博客，选择的项目也是非常小白的，主要是练练手和练习博客的写法，下次必须有进步！ |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |