<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css百叶窗动画</title>
<style>
html {
box-sizing: border-box;
}
*, *::after, *::before {
box-sizing: inherit;
}
*, *:before, *:after {
box-sizing: border-box;
outline: none;
}
body {
width: 100%;
height: 100vh;
font-family: 'Source Sans Pro', sans-serif;
font-size: 16px;
font-smooth: auto;
font-weight: 300;
line-height: 1.5;
color: #444;
background-color: black;
background-image: url("74ff074d-9789-49c0-abf8-a8ea689e1449.jpg");
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
}
body:before {
position: absolute;
content: '';
width: 100%;
height: 84.25%;
box-shadow: inset 0 0 200px 200px black;
z-index: 1;
}
.string {
position: absolute;
top: -200px;
right: 100px;
width: 3px;
height: 500px;
background-color: white;
box-shadow: 15px 15px 5px rgba(0, 0, 0, 0.3);
transition: top 500ms ease;
cursor: pointer;
z-index: 100;
}
.string:before, .string:after {
position: absolute;
content: '';
left: -8px;
width: 18px;
height: 21px;
background-color: white;
border-radius: 10px;
box-shadow: 15px 15px 5px rgba(0, 0, 0, 0.3);
}
.string:before {
bottom: -20px;
}
.string:after {
bottom: -39px;
}
.wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 84.25%;
box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.2);
transition: height 1000ms ease;
border-top: 30px solid #3E2723;
border-right: 30px solid #3E2723;
border-left: 30px solid #3E2723;
z-index: 10;
}
.wrapper .guides {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
top: 17px;
left: 10%;
width: 2px;
height: 95.5%;
transition: height 1000ms ease;
z-index: 11;
}
.wrapper .guides:nth-of-type(even) {
left: 90%;
}
.wrapper .guides .guide {
position: relative;
width: 2px;
height: 20px;
background-color: rgba(255, 255, 255, 0.4);
transition: all 1000ms ease;
z-index: 999;
}
.wrapper .guides .guide:before {
position: absolute;
content: '';
left: -4px;
width: 10px;
height: 5px;
background-color: rgba(0, 0, 0, 0.3);
border-radius: 50%;
z-index: -10;
}
.wrapper .guides .guide:after {
position: absolute;
content: '';
top: 18px;
left: -4px;
width: 10px;
height: 5px;
background-color: rgba(0, 0, 0, 0.3);
border-radius: 50%;
z-index: -10;
}
.wrapper .blinds {
position: relative;
display: block;
top: 0;
left: 0;
width: 100%;
height: 5%;
margin-bottom: 0;
transform: rotateX(0deg);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
transition: transform 500ms ease;
z-index: 4;
}
.wrapper .blinds:nth-of-type(1) {
background-color: #bf4640;
}
.wrapper .blinds:nth-of-type(2) {
background-color: #bf4d40;
}
.wrapper .blinds:nth-of-type(3) {
background-color: #bf5340;
}
.wrapper .blinds:nth-of-type(4) {
background-color: #bf5940;
}
.wrapper .blinds:nth-of-type(5) {
background-color: #bf6040;
}
.wrapper .blinds:nth-of-type(6) {
background-color: #bf6640;
}
.wrapper .blinds:nth-of-type(7) {
background-color: #bf6c40;
}
.wrapper .blinds:nth-of-type(8) {
background-color: #bf7340;
}
.wrapper .blinds:nth-of-type(9) {
background-color: #bf7940;
}
.wrapper .blinds:nth-of-type(10) {
background-color: #bf8040;
}
.wrapper .blinds:nth-of-type(11) {
background-color: #bf8640;
}
.wrapper .blinds:nth-of-type(12) {
background-color: #bf8c40;
}
.wrapper .blinds:nth-of-type(13) {
background-color: #bf9340;
}
.wrapper .blinds:nth-of-type(14) {
background-color: #bf9940;
}
.wrapper .blinds:nth-of-type(15) {
background-color: #bf9f40;
}
.wrapper .blinds:nth-of-type(16) {
background-color: #bfa640;
}
.wrapper .blinds:nth-of-type(17) {
background-color: #bfac40;
}
.wrapper .blinds:nth-of-type(18) {
background-color: #bfb340;
}
.wrapper .blinds:nth-of-type(19) {
background-color: #bfb940;
}
.wrapper .blinds:nth-of-type(20) {
background-color: #bfbf40;
}
.toggle {
position: absolute;
bottom: 20px;
left: 50px;
margin: 0;
padding: 10px 20px;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 99px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
transition: background-color 125ms linear;
cursor: pointer;
z-index: 99;
}
#toggle {
display: none;
position: absolute;
z-index: 999999;
}
#toggle:checked ~ .toggle {
background-color: white;
}
#toggle:checked ~ .wrapper .blinds {
transform: rotateX(87.75deg);
}
#toggle:checked ~ .wrapper .guides {
top: -10px;
height: 100%;
transition: all 1000ms ease;
}
#toggle:checked ~ .wrapper .guides .guide {
top: 0px;
height: 40px;
transition: all 1000ms ease;
}
#toggle:checked ~ .wrapper .guides .guide:before {
display: none;
}
#toggle:checked ~ .wrapper .guides .guide:after {
display: none;
}
#toggle:checked ~ .string {
top: -50px;
}
.height {
position: absolute;
top: -400px;
right: 130px;
width: 3px;
height: 500px;
background-color: white;
box-shadow: 15px 15px 5px rgba(0, 0, 0, 0.3);
transition: top 500ms ease;
cursor: pointer;
z-index: 100;
}
.height:before, .height:after {
position: absolute;
content: '';
left: -8px;
width: 18px;
height: 21px;
background-color: white;
border-radius: 10px;
box-shadow: 15px 15px 5px rgba(0, 0, 0, 0.3);
}
.height:before {
bottom: -20px;
}
.height:after {
bottom: -39px;
}
#height {
display: none;
}
#height:checked ~ .wrapper {
height: 15%;
transition: height 1000ms ease;
}
#height:checked ~ .wrapper .guides {
height: 80%;
transition: height 1000ms ease;
}
#height:checked ~ .wrapper .guides .guide {
top: 0px;
height: 3px;
transition: all 1000ms ease;
}
#height:checked ~ .height {
top: -20px;
}
#height:not(:checked) ~ .wrapper {
height: 84.25%;
transition: height 1000ms ease;
}
.glares {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 84.45%;
padding: 20px 20px 170px 20px;
z-index: 3;
}
.glares .glare {
position: absolute;
width: 50%;
height: 50%;
}
.glares .glare:before {
position: absolute;
content: '';
top: 3px;
left: 3px;
width: 99%;
height: 98%;
opacity: 0.1;
background: rgba(255, 255, 255, 0.1);
background: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 0%, white 10%, rgba(255, 255, 255, 0) 50%);
}
.glares .glare:nth-of-type(1) {
top: 0;
left: 0;
border-top: 30px solid #3E2723;
border-bottom: 15px solid #3E2723;
border-right: 15px solid #3E2723;
border-left: 30px solid #3E2723;
}
.glares .glare:nth-of-type(2) {
top: 50%;
left: 0;
border-top: 15px solid #3E2723;
border-bottom: 30px solid #3E2723;
border-right: 15px solid #3E2723;
border-left: 30px solid #3E2723;
}
.glares .glare:nth-of-type(3) {
top: 0;
right: 0;
border-top: 30px solid #3E2723;
border-bottom: 15px solid #3E2723;
border-right: 30px solid #3E2723;
border-left: 15px solid #3E2723;
}
.glares .glare:nth-of-type(4) {
top: 50%;
right: 0;
border-top: 15px solid #3E2723;
border-bottom: 30px solid #3E2723;
border-right: 30px solid #3E2723;
border-left: 15px solid #3E2723;
}
.ledge {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 150px;
background: #A1887F;
background: -webkit-linear-gradient(to bottom, #3E2723 5%, #795548 100%);
background: linear-gradient(to bottom, #3E2723, #795548);
overflow: hidden;
z-index: 20;
}
.ledge:before {
position: absolute;
content: '';
top: -50px;
left: -50px;
width: calc(100% + 100px);
height:
纯css3实现的仿窗帘拉开关闭百叶窗动画特效源码.zip （2个子文件） 
132689841108982739 
74ff074d-9789-49c0-abf8-a8ea689e1449.jpg 50KB
index.html 9KB资源评论
易小侠
- 粉丝: 6610
- 资源: 9万+
最新资源
- 算法竞赛中的离散化 概念总结和基本操作全解
- 算法竞赛位运算（简单易懂）
- 常用一维二维 前缀和与差分算法模板总结
- SAR成像算法+后向投影（BP）算法+星载平台实测数据
- 横向循环焦点轮播图横向循环焦点轮播图横向循环焦点轮播图横向循环焦点轮播图横向循环焦点轮播图横向循环焦点轮播图横向循环焦点轮播图横向循环焦点轮播图横向循环焦点轮播图横向循环焦点轮播图横向循环焦点轮播图横
- 基于Java和HTML的留言墙、验证码、计算器基础项目设计源码
- 基于JAVA C/C++的嵌入式设备组网平台物联网框架设计源码
- 基于Java开发的高性能全文检索工具包jsearch设计源码
- 基于多语言技术的pt遨游助手手机版设计源码
- 基于若依框架的染云盘V1.0.2设计源码
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
