您正在使用IPV4(35.168.110.128)访问本站 您本次共访问本站 1 次
 用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
[公益]文明驾车我带头,文明行路我带头,礼貌让座我带头      

【腾讯云】多款云产品1折起,买云服务器送免费机器,最长免费续3个月      
[公益] 节省一分零钱 献出一份爱心 温暖世间真情      
2022年 中秋节 21
2022年 国庆节 42
2023年 元 旦 134
2023年 春 节 155
 
本类新增
本类热门文章
您现在的位置:首页 >> 脚本程序 >> 内容
使用CSS实现六边形的图片效果
内容摘要: HTMLdivclass='gallery-container'divclass='gallery'imgsrc='https://picsum.photos/id/1040/300/300'alt='ahouseonamountain'/imgsrc='https://picsum.photos/id/106/300/300'alt='simepinkfl......
HTML

<divclass="gallery-container">

<divclass="gallery">

<img

src="https://picsum.photos/id/1040/300/300"

alt="ahouseonamountain"

/>

<imgsrc="https://picsum.photos/id/106/300/300"alt="simepinkflowers"/>

<img

src="https://picsum.photos/id/136/300/300"

alt="bigrockswithsometrees"

/>

<img

src="https://picsum.photos/id/1039/300/300"

alt="awaterfall,alotoftreeandagreatviewfromthesky"

/>

<imgsrc="https://picsum.photos/id/110/300/300"alt="acoollandscape"/>

<img

src="https://picsum.photos/id/1047/300/300"

alt="insideatownbetweentwobigbuildings"

/>

<img

src="https://picsum.photos/id/1057/300/300"

alt="agreatviewoftheseaabovethemountain"

/>

</div>

</div>

CSS

.gallery-container{

min-height:100vh;

display:grid;

place-content:center;/*水平垂直方向居中*/

background:#aabbfb;

}

.gallery{

--s:150px;/*controlthesize*/

--g:10px;/*controlthegap*/

display:grid;

}

.gallery>img{

grid-area:1/1;/*规定从第一行第一列开始显示项目*/

width:var(--s);

aspect-ratio:1.15;/*宽高比例缩放*/

object-fit:cover;/*保持图片原有比例,会有剪切*/

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

transform:translate(var(--_x,0),var(--_y,0))scale(var(--_t,1));/*对图片进行移动和缩放*/

cursor:pointer;

filter:grayscale(80%);/*灰度滤镜*/

transition:0.2slinear;/*过渡效果*/

}

.gallery>img:hover{

filter:grayscale(0);

z-index:1;

--_t:1.2;

}

.gallery>img:nth-child(1){

--_y:calc(-100%-var(--g));

}

.gallery>img:nth-child(7){

--_y:calc(100%+var(--g));

}

.gallery>img:nth-child(3),

.gallery>img:nth-child(5){

--_x:calc(-75%-0.87*var(--g));

}

.gallery>img:nth-child(4),

.gallery>img:nth-child(6){

--_x:calc(75%+0.87*var(--g));

}

.gallery>img:nth-child(3),

.gallery>img:nth-child(4){

--_y:calc(-50%-0.5*var(--g));

}

.gallery>img:nth-child(5),

.gallery>img:nth-child(6){

--_y:calc(50%+0.5*var(--g));

}

上一篇:JavaScript实现一键复制内容剪贴 下一篇:html网页引入svg图片的4种方式
发布日期:2022/7/27
手机扫二维码直达本页
发布时间:14:02:42
点击:91
录入:壹家怡园
相关文章
Baidu

YiJiaCMS 6.3.1.220701(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,百度云加速提供加速防护
Copyright©2000-2022