欢迎来到 王波在线
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nihil, id.
利用html,css,js制作模糊切换页面Demo
利用html,css,js制作模糊切换页面Demo
- html代码:
blur Effect website Demo
bilibili
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Modi,
nesciunt.
网易云课堂
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Modi,
nesciunt.
腾讯课堂
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Modi,
nesciunt.
关于我们
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Perferendis sapiente quam dolor ex distinctio sed quis tenetur
aperiam, quisquam maiores consequatur minus ea velit
exercitationem laboriosam inventore. Aut eveniet earum ratione,
perferendis qui, laborum rerum incidunt exercitationem molestiae
in veritatis.
- Css代码:
body {
height: 1000px;
background-color: rgba(0, 0, 0, 0.9);
margin: 0;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
/* overflow: hidden; */
}
h1 {
margin: 0;
}
p {
line-height: 1.7;
margin: 0;
}
/* header */
.showcase {
display: flex;
justify-content: center;
align-items: center;
}
.showcase::after {
content: '';
height: 100vh;
width: 100%;
background-image: url('../imgs/m.png');
/* background-color: turquoise; */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: block;
/* opacity: 0.3; */
filter: blur(10px);
-webkit-filter: blur(10px);
transition: all 1s;
}
.showcase:hover {
filter: blur(0px);
-webkit-filter: blur(0px);
/* opacity: 0.7; */
}
.showcase:hover.content {
-webkit-filter: blur(3px);
filter: blur(3px);
/* opacity: 0.7; */
transition: all 1s;
}
.content {
position: absolute;
z-index: 1;
text-align: center;
}
.content .title {
font-size: 4rem;
color: #fff;
}
/* services */
.container {
max-width: 1200px;
margin: auto;
overflow: hidden;
padding: 4rem 1rem;
}
.grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
.grid-3 img {
width: 100px;
height: 100px;
}
.center {
text-align: center;
margin: auto;
}
/* about us */
.grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 20px;
}
.bg-light {
background-color: #f4f4f4;
color: #333;
}
.bg-dark {
background-color: #333;
color: #f4f4f4;
}
footer {
padding: 2.2rem;
}
/* 适配iPhone */
@media(max-width:560px) {
.showcase::after {
height: 50vh;
}
.content .title {
font-size: 2rem;
}
.content .text {
display: none;
}
.grid-3,
.grid-2 {
grid-template-columns: 1fr;
}
.grid-3 img {
width: 60px;
height: 60px;
}
.services div {
border-bottom: #333 dashed 1px;
padding: 1.2rem 1rem;
}
}
/* landscape */
@media(max-height:560px) {
.content .text {
display: none;
}
}
最后成果
在web端打开:
- 媒体查询,如果宽度小于560px,下面会改成一列的布局
- 媒体查询,如果宽度小于560px ,下面的小字会隐藏
