新增第235个小实例:图片切换特效之模糊变清晰
This commit is contained in:
parent
ff384fb261
commit
890cd36dc3
|
@ -242,6 +242,7 @@
|
|||
232. HTML5+CSS3小实例:旋转中的视差效果
|
||||
233. HTML5+CSS3小实例:环形文字加载动画
|
||||
234. HTML5+CSS3+JS小实例:圣诞按钮
|
||||
235. HTML5+CSS3+JS小实例:图片切换特效之模糊变清晰
|
||||
|
||||
#### 赞赏作者
|
||||
![image](https://gitee.com/wyanhui02/html_css_demo/raw/master/images/%E8%B5%9E%E8%B5%8F%E4%BD%9C%E8%80%85/%E8%B5%9E%E8%B5%8F%E7%A0%81.jpg)
|
||||
|
|
Binary file not shown.
After Width: | Height: | Size: 460 KiB |
|
@ -0,0 +1,79 @@
|
|||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.container{
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.layer{
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
.layer .content{
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
.layer .body{
|
||||
position: absolute;
|
||||
width: 25%;
|
||||
text-align: center;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.layer img{
|
||||
position: absolute;
|
||||
height: 90vh;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
}
|
||||
.layer.bottom{
|
||||
background-color: #222;
|
||||
}
|
||||
.layer.bottom .body{
|
||||
color: orange;
|
||||
right: 5%;
|
||||
}
|
||||
.layer.top{
|
||||
background-color: #eee;
|
||||
width: 50vw;
|
||||
z-index: 2;
|
||||
}
|
||||
.layer.top .body{
|
||||
color: #222;
|
||||
left: 5%;
|
||||
}
|
||||
.layer.top img{
|
||||
/* 模糊滤镜+灰度滤镜 */
|
||||
filter: blur(10px) grayscale(0.5);
|
||||
}
|
||||
.handle{
|
||||
position: absolute;
|
||||
width: 8px;
|
||||
height: 100%;
|
||||
background-color: orange;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
z-index: 3;
|
||||
}
|
||||
.skewed .handle{
|
||||
height: 200%;
|
||||
top: 50%;
|
||||
transform: rotate(30deg) translateY(-50%);
|
||||
transform-origin: top;
|
||||
}
|
||||
.skewed .top{
|
||||
transform: skew(-30deg);
|
||||
width: calc(50vw + 1000px);
|
||||
margin-left: -1000px;
|
||||
}
|
||||
.skewed .top .content{
|
||||
transform: skew(30deg);
|
||||
margin-left: 1000px;
|
||||
}
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>图片切换特效之模糊变清晰</title>
|
||||
<link rel="stylesheet" href="235.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container skewed">
|
||||
<div class="layer bottom">
|
||||
<div class="content">
|
||||
<div class="body">
|
||||
<h1>索隆 or 山治</h1>
|
||||
</div>
|
||||
<img src="1.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layer top">
|
||||
<div class="content">
|
||||
<div class="body">
|
||||
<h1>谁是副船长?</h1>
|
||||
</div>
|
||||
<img src="1.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="handle"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<script src="235.js"></script>
|
|
@ -0,0 +1,21 @@
|
|||
// 要操作的元素
|
||||
const container=document.querySelector('.container');
|
||||
const topLayer=container.querySelector('.top');
|
||||
const handle=container.querySelector('.handle');
|
||||
// 初始化skew和delta为0
|
||||
let skew=0,delta=0;
|
||||
|
||||
// 判断container的class中是否包含'skewed'
|
||||
if(container.className.indexOf('skewed')>-1){
|
||||
// 将skew设为1000
|
||||
skew=1000;
|
||||
}
|
||||
|
||||
container.addEventListener('mousemove',function(e){
|
||||
// 计算鼠标移动的距离
|
||||
delta=(e.clientX - window.innerWidth / 2) * 0.5;
|
||||
// 设置handle的左边距
|
||||
handle.style.left=e.clientX + delta + 'px';
|
||||
// 设置topLayer的宽度
|
||||
topLayer.style.width=e.clientX + skew + delta + 'px';
|
||||
})
|
Binary file not shown.
After Width: | Height: | Size: 2.1 KiB |
Loading…
Reference in New Issue