html图片对角切换,HTML5 斜向覆盖的图片切换动效

最新推荐文章于 2021-06-10 18:41:14 发布

一只与世无争的狒

最新推荐文章于 2021-06-10 18:41:14 发布

阅读量217

点赞数

文章标签： html图片对角切换

这段CSS代码展示了如何创建一个具有动态背景和三角形切角效果的网页布局。通过使用CSS flexbox、背景图片、渐变混合模式以及clip-path属性，实现了内容区域的垂直布局，并添加了透明纹理作为背景，同时为不同元素定义了不同的三角形切割样式，增强了视觉体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS

语言：

CSSSCSS

确定

body {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-webkit-flex-direction: column;

-ms-flex-direction: column;

flex-direction: column;

background-color: #201515;

position: relative;

}

body:after {

content: "";

background: url(http://www.transparenttextures.com/patterns/dust.png) repeat center center;

opacity: 0.07;

top: 0;

left: 0;

bottom: 0;

right: 0;

position: fixed;

z-index: 100;

pointer-events: none;

}

.angle {

cursor: pointer;

width: 100%;

height: 1000px;

margin-bottom: -400px;

padding: 0;

background-color: #201515;

background-size: cover, auto;

background-attachment: fixed;

background-position: center center;

-webkit-clip-path: polygon(50% 25%, 100% 0%, 100% 50%, 50% 75%, 0% 100%, 0% 50%);

clip-path: polygon(50% 25%, 100% 0%, 100% 50%, 50% 75%, 0% 100%, 0% 50%);

-webkit-transition: all 0.7s ease-in-out;

transition: all 0.7s ease-in-out;

background-blend-mode: lighten;

}

.angle.first {

-webkit-clip-path: polygon(50% 0%, 100% 0%, 100% 50%, 50% 75%, 0% 100%, 0% 0%);

clip-path: polygon(50% 0%, 100% 0%, 100% 50%, 50% 75%, 0% 100%, 0% 0%);

}

.angle.last {

-webkit-clip-path: polygon(50% 25%, 100% 0%, 100% 100%, 50% 100%, 0% 100%, 0% 50%);

clip-path: polygon(50% 25%, 100% 0%, 100% 100%, 50% 100%, 0% 100%, 0% 50%);

}

.arrow {

-webkit-clip-path: polygon(50% 25%, 100% 50%, 100% 100%, 50% 75%, 0% 100%, 0% 50%);

clip-path: polygon(50% 25%, 100% 50%, 100% 100%, 50% 75%, 0% 100%, 0% 50%);

}

.arrow.first {

-webkit-clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 75%, 0% 100%, 0% 0%);

clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 75%, 0% 100%, 0% 0%);

}

.arrow.last {

-webkit-clip-path: polygon(50% 25%, 100% 50%, 100% 100%, 50% 100%, 0% 100%, 0% 50%);

clip-path: polygon(50% 25%, 100% 50%, 100% 100%, 50% 100%, 0% 100%, 0% 50%);

}

.one {

background-image: url(http://images.nationalgeographic.com/wpf/media-live/photos/000/896/cache/table-mountain-fog_89675_990x742.jpg);

}

.two {

background-image: url(http://images.nationalgeographic.com/wpf/media-live/photos/000/883/cache/macaskill-mountain-biking-scotland_88360_990x742.jpg);

}

.three {

background-image: url(http://images.nationalgeographic.com/wpf/media-live/photos/000/895/cache/girl-swimming-underwater_89539_990x742.jpg);

}

.four {

background-image: url(http://images.nationalgeographic.com/wpf/media-live/photos/000/888/cache/sailfish-isla-mujeres-mexico_88866_990x742.jpg);

}

.five {

background-image: url(http://images.nationalgeographic.com/wpf/media-live/photos/000/409/cache/ice-canopy-japan-skerry_40982_990x742.jpg);

}

.six {

background-image: url(http://images.nationalgeographic.com/wpf/media-live/photos/000/816/cache/lava-crater-volcano-hawaii_81648_990x742.jpg);

}