如何用CSS做百叶窗特效

今天就教大家如何用css来实现百叶窗特效

基本原理就是

background-size: cover;

定位的使用

话不多说看代码

下面是HTML的代码

 <div class="cover"><ul class="stacks"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></div>

下面是CSS的代码

.cover {width: 440px;height: 440px;overflow: hidden;position: relative;
}
.cover .stacks{margin: 0;padding: 0;display: flex;flex-direction: row;height: 440px;
}
.cover .stacks li{background-color: #ccc;flex: 1;overflow: hidden;position: relative;transition: 1s transform ease-in-out;z-index: 20;
}
.cover .stacks li::after{content: '';display: block;width: 440px;height: 440px;background-image: url(自己的图片链接或路径);background-size: cover;background-repeat: no-repeat;position: absolute;left: 0;top: 0;
}
.cover .stacks li:nth-child(1){transition-delay: 0.06s;
}
.cover .stacks li:nth-child(2){transition-delay: 0.12s;
}
.cover .stacks li:nth-child(3){transition-delay: 0.18s;
}
.cover .stacks li:nth-child(4){transition-delay: 0.24s;
}
.cover .stacks li:nth-child(5){transition-delay: 0.30s;
}
.cover .stacks li:nth-child(6){transition-delay: 0.36s;
}
.cover .stacks li:nth-child(7){transition-delay: 0.42s;
}
.cover .stacks li:nth-child(8){transition-delay: 0.48s;
}
.cover .stacks li:nth-child(9){transition-delay: 0.54s;
}
.cover .stacks li:nth-child(10){transition-delay: 0.60s;
}
.cover .stacks li:nth-child(2)::after{left: -44px;
}
.cover .stacks li:nth-child(3)::after{left: -88px;
}
.cover .stacks li:nth-child(4)::after{left: -132px;
}
.cover .stacks li:nth-child(5)::after{left: -176px;
}
.cover .stacks li:nth-child(6)::after{left: -220px;
}
.cover .stacks li:nth-child(7)::after{left: -264px;
}
.cover .stacks li:nth-child(8)::after{left: -308px;
}
.cover .stacks li:nth-child(9)::after{left: -352px;
}
.cover .stacks li:nth-child(10)::after{left: -396px;
}
.cover .stacks:hover li{transform: translateY(-600px);
}

效果如图

如何用CSS做百叶窗特效相关推荐

css响应式布局_Web前端新手怎么入门如何用CSS做响应式布局
Web前端新手怎么入门?如何用CSS做响应式布局?很多Web前端新手对响应式布局和自适应布局的概念以及制作方法分不清,简单来说响应式布局相当于流动网格布局,而自适应布局等于使用固定分割点来进行布局.接 ...
window safari 怎么进入响应式_Web前端新手怎么入门如何用CSS做响应式布局
Web前端新手怎么入门?如何用CSS做响应式布局?很多Web前端新手对响应式布局和自适应布局的概念以及制作方法分不清,简单来说响应式布局相当于流动网格布局,而自适应布局等于使用固定分割点来进行布局.接 ...
HTML字母导航栏怎么做,如何用css做导航栏？
如何用css做导航栏? 1.新建一个html文件,在head部分,编写css样式 ○ list-style-type: none;是除掉导航前面默认带的点 ○ li a,li a.active ,li ...
如何用css做一个爱心
摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...
【CSS】如何用css做一个爱心
摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...
如何用css实现百叶窗效果
1.效果图利用纯css实现百叶窗效果效果如下: 2.代码如下: 1.创建一个div 2.设置无序列表,插入事先准备好的图片 <!DOCTYPE html> <html lan ...
如何用CSS做倒计时/圆形进度条效果
前言:有时,我们会见一些圆形的进度条,随着进度条的推进,进行倒计时的变化. 若是只实现一个圆环的话,只用border和border-radius就能画出来. 但是这样的圆环不能动,产生进度条效果的重要 ...
如何用css做一个正方形（自适应屏幕宽度）
DOM结构 <div class="img-container"><div class="img-box"><img src=&q ...
如何用CSS做六边形图片/蜂巢形图集（详解）
目标效果: 要达到蜂巢形的图集展示,实质上就是做六边形图片. 实现思路: 1.一个大div内有两个子div,分别将两个div顺时针和逆时针旋转60度,形成六边形: 2.给三个div加同一个背景,调节背 ...

如何用CSS做百叶窗特效

如何用CSS做百叶窗特效相关推荐

最新文章

热门文章