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;
text-align: center;
margin: 40px 0 0 0;
color: hsl(0 0% 100%);
letter-spacing: -1px;
position: fixed;
top: 50%;
left: 50%;
transform: translate3d(100%, 0%, 110vmin);
}
body {
min-height: 100vh;
display: grid;
place-items: center;
justify-content: center;
overflow: hidden;
background: rgba(255, 230, 153, 0.5);
font-family: 'Impact', sans-serif;
}
.cuboid {
width: 100%;
height: 100%;
position: relative;
pointer-events: none;
}
.cuboid__side {
pointer-events: none;
}
.cuboid__side:nth-of-type(1) {
height: calc(var(--thickness) * 1px);
width: 100%;
position: absolute;
top: 0;
transform: translate(0, -50%) rotateX(90deg);
}
.cuboid__side:nth-of-type(2) {
height: 100%;
width: calc(var(--thickness) * 1px);
position: absolute;
top: 50%;
right: 0;
transform: translate(50%, -50%) rotateY(90deg);
}
.cuboid__side:nth-of-type(3) {
width: 100%;
height: calc(var(--thickness) * 1px);
position: absolute;
bottom: 0;
transform: translate(0%, 50%) rotateX(90deg);
}
.cuboid__side:nth-of-type(4) {
height: 100%;
width: calc(var(--thickness) * 1px);
position: absolute;
left: 0;
top: 50%;
transform: translate(-50%, -50%) rotateY(90deg);
}
.cuboid__side:nth-of-type(5) {
height: 100%;
width: 100%;
transform: translate3d(0, 0, calc(var(--thickness) * 0.5px));
position: absolute;
top: 0;
left: 0;
}
.cuboid__side:nth-of-type(6) {
height: 100%;
width: 100%;
transform: translate3d(0, 0, calc(var(--thickness) * -0.5px))
rotateY(180deg);
position: absolute;
top: 0;
left: 0;
}
.scene {
transform: translateZ(100vmin) rotateX(-24deg) rotateY(24deg);
}
.window {
height: var(--height);
width: var(--width);
position: relative;
}
.glass {
height: calc(var(--height) * 0.25);
width: 25%;
position: absolute;
top: 0;
right: 0;
background: linear-gradient(var(--i-1), var(--i-1)) 0 0/100% 5% no-repeat,
linear-gradient(var(--i-1), var(--i-1)) 0 0/5% 100% no-repeat,
linear-gradient(var(--i-1), var(--i-1)) 100% 0/5% 100% no-repeat,
linear-gradient(var(--i-1), var(--i-1)) 0 100%/100% 5% no-repeat,
linear-gradient(var(--i-1), var(--i-1)) 0 64%/100% 8% no-repeat,
linear-gradient(
130deg,
transparent 0 15%,
var(--shimmer) 16% 35%,
transparent 36% 40%,
var(--shimmer) 41% 44%,
transparent 45%
),
var(--glass);
}
.frame {
position: absolute;
}
.frame--top {
width: 130%;
height: 5%;
bottom: 100%;
left: 50%;
transform: translate(-50%, 0);
}
.frame--sill {
width: 120%;
height: 5%;
top: 100%;
left: 50%;
background: var(--f-4);
transform: translate3d(-50%, 0, 12px);
}
.frame--left {
width: 10%;
height: 100%;
right: 100%;
top: 0;
}
.frame--right {
width: 10%;
height: 100%;
left: 100%;
top: 0;
}
.peter {
position: absolute;
top: calc(var(--height) * 0.25);
height: 35px;
right: 0%;
transform: translate(-10%, calc((-80 * var(--peter, 0)) * 1%));
}
.peter__container {
height: calc(var(--height) * 0.25);
width: 25%;
position: absolute;
top: 0;
right: 0;
overflow: hidden;
}
.wall {
position: absolute;
height: 200vmax;
width: 200vmax;
background: linear-gradient(
var(--w-1) 52%,
var(--f-1) 52% 53%,
var(--w-2) 53% 100%
),
var(--w-1);
}
.wall--top {
bottom: calc(50% + (var(--height) * 0.5));
left: 50%;
transform: translate3d(-50%, 0, 10px);
background: var(--w-1);
}
.wall--bottom {
top: calc(50% + (var(--height) * 0.5));
left: 50%;
transform: translate3d(-50%, 0, 10px);
background: var(--w-2);
}
.wall--left {
right: calc(50% + (var(--width) * 0.5));
top: 50%;
transform: translate3d(0, -50%, 10px);
}
.wall--right {
left: calc(50% + (var(--width) * 0.5));
top: 50%;
transform: translate3d(0, -50%, 10px);
}
.blinds {
width: 25%;
height: calc(var(--height) * 0.25);
position: absolute;
top: 0;
right: 0;
}
.container {
min-height: 25%;
height: 25%;
width: 100%;
max-height: 130px;
transform: translate3d(0, 0, 12px) scale(4);
position: relative;
overflow: hidden;
resize: vertical;
transform-origin: 100% 0;
clip-path: inset(0 0 0 50%);
-webkit-clip-path: inset(0 0 0 50%);
}
.container:hover:after {
opacity: 0.35;
}
.container:active:after {
opacity: 0;
}
.container:after {
content: "";
position: absolute;
bottom: 0;
right: 0;
height: 16px;
width: 16px;
background: #19a1e6;
opacity: 0;
transition: opacity 0.2s;
}
.blind {
width: 100%;
height: 2.5%;
background: linear-gradient(
var(--b-3) 0 10%,
var(--b-1) 10% 90%,
var(--b-3) 90% 100%
);
transform: translate(
0,
calc(((-95 * (var(--index, 0))) * var(--open)) * 1%)
);
}
.cord {
position: absolute;
top: 0;
right: 4px;
width: calc(var(--width) * 0.005);
transform: translate(50%, 0);
background: #fafafa;
height: 100%;
}
.cord--dummy {
background: #dbdbdb;
right: 3px;
height: calc(var(--height) * 0.21);
}
.cord__handle {
position: absolute;
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0