CSS3之图片列表展示特效

在线demo

在线编辑demo

grid、transform 、transition

CSS代码

.main-cons{background: #F7F5F2;padding:100px 0;}.container{width: 80%;margin: 0 auto;display: grid;grid-template-columns: auto auto auto;grid-gap: 60px;}.container .item{position: relative;transform: skew(-10deg);transition: all 0.25s;}.container .item .card{height: 200px;background: #808080;border-radius: 40px;overflow: hidden;position: relative;transition: all 0.25s;}.container .item::before{content: "";position: absolute;left: 0;top: 0;z-index: -1;width: calc(100% - 10px);height: calc(100% - 10px);border-radius: 40px;opacity: 0;border: 2px solid #373f51;transition: all 0.5s 0.05s; }.container .item .card::after{content: " ";display: block;position: absolute;left: 0;top: 0;background: url("http://img.hb.aicdn.com/3f8e4597fdfba9da223f56301bc59a22692d972b112463-N0jS1j_fw658") no-repeat;background-size:cover;background-blend-mode: screen; width: 100%;height: 100%;z-index: 2; transform: skew(10deg) scale(1.2);transition:all 0.2s;background-color: #373f51;}.container .item:hover::before{transform: translate(10px,10px);opacity: 1;}.container .item:hover .card::after{background-blend-mode: normal;}.container .item:hover .card{transform: translate(-10px,-10px);}

HTML代码

<div class="main-cons"><div class="container"><div class="item"><div class="card"></div></div><div class="item"><div class="card"></div></div><div class="item"><div class="card"></div></div><div class="item"><div class="card"></div></div><div class="item"><div class="card"></div></div><div class="item"><div class="card"></div></div><div class="item"><div class="card"></div></div><div class="item"><div class="card"></div></div><div class="item"><div class="card"></div></div></div>
</div>

在线demo

在线编辑demo

CSS3之图片列表展示特效相关推荐

PR模板使用教程线性擦除图片照片展示特效PR模板使用细节教程
PR模板使用教程关于线性擦除图片照片展示特效Premiere模板使用中的细节教程讲解先看更改后的效果,如下图所示调整方式,点击轨道上框选的素材,在效果控件里,选择缩放比例(取消等比缩放的&quo ...
v-for动态图片列表展示以及动态给div添加背景图片
v-for动态图片列表以及动态给div添加背景图片方法效果如下图所示: HTML: <div class="branchWorkshop"><ul>< ...
HTML+CSS+JS实现 ❤️3D万花筒图片相册展示特效❤️
效果演示: 文末获取源码代码目录: 主要代码实现: HTML代码 : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...
HTML+CSS+JS实现 ❤️H5图片列表滑动特效❤️
css使图片有3d效果,利用CSS3实现3D倾斜视差图片展示特效
特效描述:利用CSS3实现 3D倾斜视差图片展示特效.利用CSS3实现3D倾斜视差图片展示特效代码结构 1. HTML代码 Movies Popular Princess Mononoke Sp ...
图片展示html css代码,纯CSS3实现图片展示特效
Web浏览器端的特效越来越让人兴奋,通过CSS和JavaScript,各种意想不到的绚丽效果都能用简单的几句代码完成.本文中要实现的一个纯CSS3的图片展示特效,以前只能用JavaScript实现,可 ...
html如何设置图片循环旋转动画效果,如何使用css3实现图片自动旋转的特效(完整代码)...
在介绍如何使用css3实现旋转图片特效的基础上,重点介绍了具体的步骤.这篇论文内容紧凑,希望大家能有所收获. 在浏览网页的过程中,你会遇到一种特殊的效果,叫做图片旋转:不同的图片会根据时间的变化在同一 ...
新闻列表页flex_使用css3的Flex布局实现列表展示
实现效果图如下: 通过css3样式实现(部分代码): .box{display:flex;flex-wrap:wrap;justify-content:space-between;align-cont ...
HTML5+CSS3学习笔记（三）文档流和盒子模型【附练习：图片列表、左侧导航栏】
HTML5+CSS3学习笔记(三) 本系列更多文章,可以查看专栏 HTML+CSS学习笔记文章目录 HTML5+CSS3学习笔记(三) 一.CSS布局 1. 文档流(块级元素.行内元素.行内块元素) ...
网页特效：用CSS3制作3D图片立方体旋转特效
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

CSS3之图片列表展示特效

CSS代码

HTML代码

CSS3之图片列表展示特效相关推荐

最新文章

热门文章