纯css3鼠标悬停感知移动效果
Posted java大数据
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了纯css3鼠标悬停感知移动效果相关的知识，希望对你有一定的参考价值。
我们在建设web前端的时候，经常会用到一些tab的特效，导航更是会经常用到鼠标悬停的特效，图片一般都会附带有鼠标悬停的文字介绍内容，下面给大家分享一个鼠标悬停的效果，可以感知鼠标的移动轨迹哦！
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>纯Css定向感知悬停</title>
<style>
/* The magic */
.col {
overflow: hidden;
position: relative;
}
.slide {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
/*
Visibility delay gives the previously hovered element time to slide out before disappearing.
Remove the `visibility` transition to slide in current element without sliding out previous element
*/
-webkit-transition: all 0.275s ease-in-out, visibility 0s 0.275s;
transition: all 0.275s ease-in-out, visibility 0s 0.275s;
visibility: hidden;
will-change: transform;
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
.row:hover ~ .row .slide {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
.row:hover .slide {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
.row:hover .col:hover ~ .col .slide {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.row:hover .col:hover .slide {
-webkit-transform: none;
transform: none;
visibility: visible;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
/* Pen styling */
* {
box-sizing: border-box;
}
body {
background: #fefefe;
color: #333;
font: 14px /1.5 "Fira Sans", sans-serif;
}
h1 {
font-size: 2.5rem;
font-weight: 300;
margin: 1.5em 0.5rem 1em;
text-align: center;
}
.container {
margin: 0 auto;
padding: 2rem;
max-width: 1200px;
}
.row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.col {
color: #fff;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-height: 260px;
position: relative;
}
.col h2 {
font-weight: 300;
font-size: 1.33333rem;
line-height: 1.25;
margin: 0;
position: absolute;
bottom: 1.5rem;
right: 1.5rem;
z-index: 0;
}
.col:nth-child(2) {
min-width: 20%;
}
.col:nth-child(4) {
min-width: 33%;
}
.col:nth-child(3) + .col:nth-child(3) {
min-width: 50%;
}
.photo-container {
background: #0f0523 50% 50% / cover;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-transition: 1s;
transition: 1s;
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
}
.photo-container::before {
background: -webkit-linear-gradient(transparent, rgba(67, 17, 51, 0.5), #000320);
background: linear-gradient(transparent, rgba(67, 17, 51, 0.5), #000320);
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.col:hover .photo-container {
-webkit-transform: scale(1.25);
transform: scale(1.25);
}
.slide {
background: rgba(25, 1, 21, 0.8);
padding: 0 1.5rem;
}
</style>
</head>
<body>
<h1>鼠标悬停感知移动特效</h1>
<div class="container">
<div class="row">
<div class="col">
<div class="photo-container" style="background-image:url(img/1.jpg)"></div>
<h2>康诺科技</h2>
<div class="slide">
<p>康诺科技</p>
</div>
</div>
<div class="col">
<div class="photo-container" style="background-image:url(img/2.jpg)"></div>
<h2>康诺科技</h2>
<div class="slide">
<p>康诺科技</p>
</div>
</div>
<div class="col">
<div class="photo-container" style="background-image:url(img/3.jpg)"></div>
<h2>康诺科技</h2>
<div class="slide">
<p>康诺科技</p>
</div>
</div>
<div class="col">
<div class="photo-container" style="background-image:url(img/4.jpg)"></div>
<h2>康诺科技</h2>
<div class="slide">
<p>康诺科技</p>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="photo-container" style="background-image:url(img/5.jpg)"></div>
<h2>康诺科技 </h2>
<div class="slide">
<p>康诺科技</p>
</div>
</div>
<div class="col">
<div class="photo-container" style="background-image:url(img/6.jpg)"></div>
<h2>康诺科技 </h2>
<div class="slide">
<p>康诺科技</p>
</div>
</div>
<div class="col">
<div class="photo-container" style="background-image:url(img/7.jpg)"></div>
<h2>康诺科技 </h2>
<div class="slide">
<p>康诺科技</p>
</div>
</div>
<div class="col">
<div class="photo-container" style="background-image:url(img/8.jpg)"></div>
<h2>康诺科技 </h2>
<div class="slide">
<p>康诺科技</p>
</div>
</div>
<div class="col">
<div class="photo-container" style="background-image:url(img/9.jpg)"></div>
<h2>康诺科技 </h2>
<div class="slide">
<p>康诺科技</p>
</div>
</div>
<div class="col">
<div class="photo-container" style="background-image:url(img/10.jpg)"></div>
<h2>康诺科技 </h2>
<div class="slide">
<p>康诺科技</p>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="photo-container" style="background-image:url(img/11.jpg)"></div>
<h2>康诺科技 </h2>
<div class="slide">
<p>康诺科技</p>
</div>
</div>
<div class="col">
<div class="photo-container" style="background-image:url(img/12.jpg)"></div>
<h2>康诺科技</h2>
<div class="slide">
<p>康诺科技</p>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="photo-container" style="background-image:url(img/13.jpg)"></div>
<h2>康诺科技</h2>
<div class="slide">
<p>康诺科技</p>
</div>
</div>
</div>
</div>
</body>
</html>
以上是关于纯css3鼠标悬停感知移动效果的主要内容，如果未能解决你的问题，请参考以下文章