css实现百叶窗拖动往下拉打开效果代码
代码语言:html
所属分类:拖放
代码描述:css实现百叶窗拖动往下拉打开效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
@layer demo-stuff, container-stuff;
@layer container-stuff {
*, *:after, *:before {
pointer-events: none;
}
.container {
pointer-events: all;
container-type: size;
}
@container (min-height: 75px) {
.blinds {
--open: 0;
}
}
@container (min-height: 100px) {
.peter {
--peter: 0;
}
}
@container (min-height: 80.5px) {
.blinds {
--open: 0.1;
}
}
@container (min-height: 103px) {
.peter {
--peter: 0.1;
}
}
@container (min-height: 86px) {
.blinds {
--open: 0.2;
}
}
@container (min-height: 106px) {
.peter {
--peter: 0.2;
}
}
@container (min-height: 91.5px) {
.blinds {
--open: 0.3;
}
}
@container (min-height: 109px) {
.peter {
--peter: 0.3;
}
}
@container (min-height: 97px) {
.blinds {
--open: 0.4;
}
}
@container (min-height: 112px) {
.peter {
--peter: 0.4;
}
}
@container (min-height: 102.5px) {
.blinds {
--open: 0.5;
}
}
@container (min-height: 115px) {
.peter {
--peter: 0.5;
}
}
@container (min-height: 108px) {
.blinds {
--open: 0.6;
}
}
@container (min-height: 118px) {
.peter {
--peter: 0.6;
}
}
@container (min-height: 113.5px) {
.blinds {
--open: 0.7;
}
}
@container (min-height: 121px) {
.peter {
--peter: 0.7;
}
}
@container (min-height: 119px) {
.blinds {
--open: 0.8;
}
}
@container (min-height: 124px) {
.peter {
--peter: 0.8;
}
}
@container (min-height: 124.5px) {
.blinds {
--open: 0.9;
}
}
@container (min-height: 127px) {
.peter {
--peter: 0.9;
}
}
@container (min-height: 130px) {
.blinds {
--open: 1;
}
}
@container (min-height: 130px) {
.peter {
--peter: 1;
}
}
}
@layer demo-stuff {
* {
box-sizing: border-box;
transform-style: preserve-3d;
}
:root {
--height: 300px;
--width: calc(0.6 * var(--height));
--glass: rgba(207, 229, 252, 0.5);
--shimmer: rgba(255, 255, 255, 0.95);
--w-1: #546043;
--w-2: #373c2f;
--f-1: #251b0e;
--f-2: #372915;
--f-3: #5c4424;
--f-4: #6e522b;
--i-1: #574638;
--b-1: #b5bea7;
--b-4: #bfc7b3;
--b-2: #6a7557;
--b-3: #353b2b;
}
h1 {
font-size: 100px;
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0