(以下代码全非本人原创，纯分享个人收集的其他博主的好用、有趣的东西鸭～)（若侵权，私信，立删）
1.动态自做电脑
展示效果：
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>“造”了一台电脑</title>
<style>
*, *::after, *::before {
margin: 0;
padding: 0;
box-sizing: border-box;
transform-style: preserve-3d;
}
body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #1a1919;
overflow: hidden;
font-family: sans-serif;
font-weight: bolder;
color: rgba(255, 255, 251, 0.7);
text-transform: uppercase;
letter-spacing: 2px;
}
.main {
width: 800px;
height: 600px;
position: relative;
cursor: pointer;
margin-top: 200px;
}
@media (max-width: 1000px) {
.main {
transform: scale(0.75);
}
}
@media (max-width: 800px) {
.main {
transform: scale(0.5);
}
}
@media (max-width: 700px) {
.main {
transform: scale(0.4);
}
}
@media (max-width: 500px) {
.main {
transform: scale(0.3);
}
}
.flex {
display: flex;
justify-content: center;
align-items: center;
}
.face {
position: absolute;
}
.screen {
width: 303.0303030303px;
height: 240px;
transform: translateZ(100px) translateY(-200px) translateZ(50px) rotateX(270deg);
background-color: #a9dffd;
border-radius: 10px;
box-shadow: 0 0 5px rgba(169, 223, 253, 0.8), 0 0 10px rgba(169, 223, 253, 0.7), 0 0 15px rgba(169, 223, 253, 0.6), 0 0 20px rgba(169, 223, 253, 0.5), 0 0 40px rgba(169, 223, 253, 0.4), 0 0 60px rgba(169, 223, 253, 0.3);
animation: screen 1s ease-in alternate infinite;
}
.keyboard {
width: 500px;
height: 160px;
transform: perspective(10000px) rotateX(50deg) rotateZ(-25deg);
}
.keyboard__front {
width: 500px;
height: 25px;
transform: rotateX(-90deg) translateZ(80px);
background-color: #9c9c9c;
}
.keyboard__back {
width: 500px;
height: 25px;
transform: rotateX(90deg) translateZ(80px);
background-color: #fffffb;
}
.keyboard__top {
display: flex;
flex-direction: column;
justify-content: space-around;
width: 500px;
height: 160px;
transform: rotateY(0deg) translateZ(12.5px);
background-image: linear-gradient(to bottom, #dbf2fe, #343232);
}
.keyboard__bottom {
width: 500px;
height: 160px;
transform: rotateY(180deg) translateZ(12.5px);
background-color: #eae7e5;
box-shadow: -20px 40px 0 #0d0c0c, 0px 40px 0 #0d0c0c, 5px 0px 0 #0d0c0c, 5px 40px 0 #0d0c0c;
}
.keyboard__right {
width: 25px;
height: 160px;
transform: rotateY(90deg) translateZ(250px);
background-color: #fffffb;
}
.keyboard__left {
width: 25px;
height: 160px;
transform: rotateY(90deg) translateZ(-250px);
background-color: #eae7e5;
}
.keys {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
transform: translateZ(7.5px);
padding: 0 2px;
}
.key {
width: 30px;
height: 27px;
transition: 0.05s ease;
}
.key--w2 {
width: 60px;
}
.key--w3 {
width: 90px;
}
.key--w6 {
width: 195px;
}
.key__front {
width: 30px;
height: 15px;
transform: rotateX(-90deg) translateZ(13.5px);
background-color: #838383;
}
.key__front--w2 {
width: 60px;
}
.key__front--w3 {
width: 90px;
}
.key__front--w6 {
width: 195px;
}
.key__back {
width: 30px;
height: 15px;
transform: rotateX(90deg) translateZ(13.5px);
background-color: #fffffb;
}
.key__back--w2 {
width: 60px;
}
.key__back--w3 {
width: 90px;
}
.key__back--w6 {
width: 195px;
}
.key__top {
width: 30px;
height: 27px;
transform: rotateY(0deg) translateZ(7.5px);
background-color: #fffffb;
background-image: linear-gradient(to bottom, #f4fbff, #fffffb);
}
.key__top--w2 {
width: 60px;
}
.key__top--w3 {
width: 90px;
}
.key__top--w6 {
width: 195px;
}
.key__bottom {
width: 30px;
height: 27px;
transform: rotateY(180deg) translateZ(7.5px);
background-color: #838383;
}
.key__bottom--w2 {
width: 60px;
}
.key__bottom--w3 {
width: 90px;
}
.key__bottom--w6 {
width: 195px;
}
.key__right {
width: 15px;
height: 27px;
transform: rotateY(90deg) translateZ(15px);
background-color: #838383;
}
.key__right--w2 {
transform: rotateY(90deg) translateZ(30px);
}
.key__right--w3 {
transform: rotateY(90deg) translateZ(45px);
}
.key__right--w6 {
transform: rotateY(90deg) translateZ(97.5px);
}
.key__left {
width: 15px;
height: 27px;
transform: rotateY(90deg) translateZ(-15px);
background-image: linear-gradient(to bottom, #c5c5c5, #b8b8b8);
}
.key__left--w2 {
transform: rotateY(90deg) translateZ(-30px);
}
.key__left--w3 {
transform: rotateY(90deg) translateZ(-45px);
}
.key__left--w6 {
transform: rotateY(90deg) translateZ(-97.5px);
}
.face--key-b1 {
background: #a9dffd;
}
.face--key-b2 {
background-image: linear-gradient(to bottom, #a7dcfa, #8fd2f8);
}
.face--key-b3 {
background-color: #426585;
}
.face--key-o1 {
background: #ffa28e;
}
.face--key-o2 {
background-image: linear-gradient(to bottom, #bc7377, #b46266);
}
.face--key-o3 {
background-color: #8e3e43;
}
.key--down {
display: flex;
justify-content: center;
align-items: center;
transform: translateZ(-5px);
transition: 0.05s ease;
}
.key--down > .key__top {
background: #ffccc1;
}
@keyframes screen {
0%, 90%, 96% {
background-color: #a9dffd;
}
93%, 100% {
background-color: rgba(143, 210, 248, 0.8);
}
}</style>
</head>
<body>
<div class="main flex" id="m">
<div class="keyboard flex" id="k">
<div class="screen flex" id="s"></div>
<div class="keyboard__front face"></div>
<div class="keyboard__back face"></div>
<div class="keyboard__right face"></div>
<div class="keyboard__left face"></div>
<div class="keyboard__top face">
<div class="keys">
<div class="key flex">
<div class="key__front face face--key-b3"></div>
<div class="key__back face face--key-b1"></div>
<div class="key__right face face--key-b1"></div>
<div class="key__left face face--key-b2"></div>
<div class="key__top face face--key-b1"></div>
<div class="key__bottom face face--key-b2"></div>
</div>
<div class="key flex">
<div class="key__front face"></div>
<div class="key__back face"></div>
<div class="key__right face"></div>
<div class="key__left face"></div>
<div class="key__top face"></div>
<div class="key__bottom face"></div>
</div>
<div class="key flex">
<div class="key__front face"></div>
<div class="key__back face"></div>
<div class="key__right face"></div>
<div class="key__left face"></div>
<div class="key__top face"></div>
<div class="key__bottom face"></div>
</div>
<div class="key flex">
<div class="key__front face"></div>
<div class="key__back face"></div>
<div class="key__right face"></div>
<div class="key__left face"></div>
<div class="key__top face"></div>
<div class="key__bottom face"></div>
</div>
<div class="key flex">
<div class="key__front face"></div>
<div class="key__back face"></div>
<div class="key__right face"></div>
<div class="key__left face"></div>
<div class="key__top face"></div>
<div class="key__bottom face"></div>
</div>
<div class="key flex">
<div class="key__front face"></div>
<div class="key__back face"></div>
<div class="key__right face"></div>
<div class="key__left face"></div>
<div class="key__top face"></div>
<div class="key__bottom face"></div>
</div>
<div class="key flex">
<div class="key__front face"></div>
<div class="key__back face"></div>
<div class="key__right face"></div>
<div class="key__left face"></div>
<div class="key__top face"></div>
<div class="key__bottom face"></div>
</div>
<div class="key flex">
<div class="key__front face"></div>
<div class="key__back face"></div>
<div class="key__right face"></div>
<div class="key__left face"></div>
<div class="key__top face"></div>
<div class="key__bottom face"></div>
</div>
<div class="key flex">
<div class="key__front face"></div>
<div class="key__back face"></div>
<div class="key__right face"></div>
<div class="key__left face"></div>
<div class="key__top face"></div>
<div class="key__bottom face"></div>
</div>
<div class="key flex">
<div class="key__front face"></div>
<div class="key__back face"></div>
<div class="key__right face"></div>
<div class="key__left face"></div>
<div class="key__top face"></div>
<div class="key__bottom face"></div>
</div>
<div class="key flex">
<div class="key__front face"></div>
<div class="key__back face"></div>
<div class="key__right face"></div>
<div class="key__left face"></div>
<div class="key__top face"></div>
<div class="key__bottom face"></div>
</div>
<div class="key flex">
<div class="key__front face"></div>
<div class="key__back face"></div>
<div class="key__right face"></div>
<div class="key__left face"></div>
<div class="key__top face"></div>
<div class="key__bottom face"></div>
</div>
<div class="key flex">
<div class="key__front face"></div>
<div class="key__back face"></div>
<div class="key__right face"></div>
<div class="key__left face"></div>
<div class="key__top face"></div>
<div class="key__bottom face"></div>
</div>
<div class="key key--w2 flex">
<div class="key__front key__front--w2 face face--key-b3"></div>
<div class="key__back key__back--w2 face face--key-b1"></div>
<div class="key__right key__right--w2 face face--key-b1"></div>
<div class="key__left key__left--w2 face face--key-b2"></div>
<div class="key__top key__top--w2 face face--key-b1"></div>
<div class="key__bottom key__bottom--w2 face face--key-b2"></div>
</div>
</div>
<div class="keys">
<div class="key key--w2 flex">
<div class="key__front key__front--w2 face face--key-b3"></div>
<div class="key__back key__back--w2 face face--key-b1"></div>
<div class="key__right key__right--w2 face face--key-b1"></div>
<div class="key__left key__left--w2 face face--key-b2"></div>
<div class="key__top key__top--w2 face face--key-b1"></div>
<div class="key__bottom key__bottom--w2 face face--key-b2"></div>
</div>
<div class="key flex">
<div class="key__front face"></div>
<div class="key__back face"></div>
<div class="key__right face"></div>
<div class="key__left face"></div>
<div class="key__top face"></div>
<div class="key__bottom face"></div>
</div>
<div class="key flex">
<div class="key__front face"></div>
<div class="key__back face"></div>
<div class="key__right face"></div>
<div class="key__left face"></div>
<div class="key__top face"></div>
<div class="key__bottom face"></div>
</div>
<div class="key flex">
<div class="key__front face"></div>
<div class="key__back face"></div>
<div class="key__right face"></div>
<div class="key__left face"></div>
<div class="key__top face"></div>
<div class="key__bottom face"></div>
</div>
<div class="key flex">
<div class="key__front face"></div>
<div class="key__back face"></div>
<div class="key__right face"></div>
<div class="key__left face"></div>
<div class="key__top face"></div>
<div class="key__bottom face"></div>
</div>
<div class="key flex">
<div class="key__front face"></div>
<div class="key__back face"></div>
<div class="key__right face"></div>
<div class="key__left face"></div>
<div class="key__top face"></div>
<div class="key__bottom face"></div>
</div>
<div class="key flex">
<div class="key__front face"></div>
<div class="key__back face"></div>
<div class="key__right face"></div>
<div class="key__left face"></div>
<div class="key__top face"></div>
<div class="key__bottom face"></div>
</div>
<div class="key flex">
<div class="key__front face"></div>
<div class="key__back face"></div>
<div class="key__right face"></div>
<div class="key__left face"></div>
<div class="key__top face"></div>
<div class="key__bottom face"></div>
</div>
<div class="key flex">
<div class="key__front face"></div>
<div class="key__back face"></div>
<div class="key__right face"></div>
<div class="key__left face"></div>
<div class="key__top face"></div>
<div class="key__bottom face"></div>
</div>
<div class="key flex">
<div class="key__front face"></div>
<div class="key__back face"></div>
<div class="key__right face"></div>
<div class="key__left face"></div>
<div class="key__top face"></div>
<div class="key__bottom face"></div>
</div>
<div class="key flex">
<div class="key__front face"></div>
<div class="key__back face"></div>
<div class="key__right face"></div>
<div class="key__left face"></div>
<div class="key__top face"></div>
<div class="key__bottom face"></div>
</div>
<div class="key flex">
<div class="key__front face"></div>
<div class="key__back face"></div>
<div class="key__right face"></div>
<div class="key__left face"></div>
<div class="key__top face"></div>
<div class="key__bottom face"></div>
</div>
<div class="key flex">
<div class="key__front face"></div>
<div class="key__back face"></div>
<div class="key__right face"></div>
<div class="key__left face"></div>
<div class="key__top face"></div>
<div class="key__bottom face"></div>
</div>
<div class="key flex">
<div class="key__front face face--key-b3"></div>
<div class="key__back face face--key-b1"></div>
<div class="key__right face face--key-b1"></div>
<div class="key__left face face--key-b2"></div>
<div class="key__top face face--key-b1"></div>
<div class="key__bottom face face--key-b2"></div>
</div>
</div>
<div class="keys">
<div class="key key--w3 flex">
<div class="key__front key__front--w3 face face--key-b3"></div>
<div class="key__back key__back--w3 face face--key-b1"></div>
<div class="key__right key__right--w3 face face--key-b1"></div>
<div class="key__left key__left--w3 face face--key-b2"></div>
<div class="key__top key__top--w3 face face--key-b1"></div>
<div class="key__bottom key__bottom--w3 face face--key-b2"></div>
</div>
<div class="key flex">
<div class="key__front face"></div>
<div class="key__back face"></div>
<div class="key__right face"></div>
<div class="key__left face"></div>
<div class="key__top face"></div>
<div class="key__bottom face"></div>
</div>
<div class="key flex">
<div class="key__front face"></div>
<div class="key__back face"></div>
<div class="key__right face"></div>
<div class="key__left face"></div>
<div class="key__top face"></div>
<div class="key__bottom face"></div>
</div>
<div class="key flex">
<div class="key__front face"></div>
<div class="key__back face"></div>
<div class="key__right face"></div>
<div class="key__left face"></div>
<div class="key__top face"></div>
<div class="key__bottom face"></div>
</div>
<div class="key flex">
<div class="key__front face"></div>
<div class="key__back face"></div>
<div class="key__right face"></div>
<div class="key__left face"></div>
<div class="key__top face"></div>
<div class="key__bottom face"></div>
</div>
<div class="key flex">
<div class="key__front face"></div>
<div class="key__back face"></div>
<div class="key__right face"></div>
<div class="key__left face"></div>
<div class="key__top face"></div>
<div class="key__bottom face"></div>
</div>
<div class="key flex">
<div class="key__front face"></div>
<div class="key__back face"></div>
<div class="key__right face"></div>
<div class="key__left face"></div>
<div class="key__top face"></div>
<div class="key__bottom face"></div>
</div>
<div class="key flex">
<div class="key__front face"></div>
<div class="key__back face"></div>
<div class="key__right face"></div>
<div class="key__left face"></div>
<div class="key__top face"></div>
<div class="key__bottom face"></div>
</div>
<div class="key flex">
<div class="key__front face"></div>
<div class="key__back face"></div>
<div class="key__right face"></div>
<div class="key__left face"></div>
<div class="key__top face"></div>
<div class="key__bottom face"></div>
</div>
<div class="key flex">
<div class="key__front face"></div>
<div class="key__back face"></div>
<div class="key__right face"></div>
<div class="key__left face"></div>
<div class="key__top face"></div>
<div class="key__bottom face"></div>
</div>
<div class="key flex">
<div class="key__front face"></div>
<div class="key__back face"></div>
<div class="key__right face"></div>
<div class="key__left face"></div>
<div class="key__top face"></div>
<div class="key__bottom face"></div>
</div>
<div class="key key--w2 flex">
<div class="key__front key__front--w2 face face--key-o3"></div>
<div class="key__back key__back--w2 face face--key-o1"></div>
<div class="key__right key__right--w2 face face--key-o1"></div>
<div class="key__left key__left--w2 face face--key-o2"></div>
<div class="key__top key__top--w2 face face--key-o1"></div>
<div class="key__bottom key__bottom--w2 face face--key-o2"></div>
</div>
</div>
<div class="keys">
<div class="key key--w2 flex">
<div class="key__front key__front--w2 face face--key-b3"></div>
<div class="key__back key__back--w2 face face--key-b1"></div>
<div class="key__right key__right--w2 face face--key-b1"></div>
<div class="key__left key__left--w2 face face--key-b2"></div>
<div class="key__top key__top--w2 face face--key-b1"></div>
<div class="key__bottom key__bottom--w2 face face--key-b2"></div>
</div>
<div class="key flex">
<div class="key__front face"></div>
<div class="key__back face"></div>
<div class="key__right face"></div>
<div class="key__left face"></div>
<div class="key__top face"></div>
<div class="key__bottom face"></div>
</div>
<div class="key flex">
<div class="key__front face"></div>
<div class="key__back face"></div>
<div class="key__right face"></div>
<div class="key__left face"></div>
<div class="key__top face"></div>
<div class="key__bottom face"></div>
</div>
<div class="key flex">
<div class="key__front face"></div>
<div class="key__back face"></div>
<div class="key__right face"></div>
<div class="key__left face"></div>
<div class="key__top face"></div>
<div class="key__bottom face"></div>
</div>
<div class="key flex">
<div class="key__front face"></div>
<div class="key__back face"></div>
<div class="key__right face"></div>
<div class="key__left face"></div>
<div class="key__top face"></div>
<div class="key__bottom face"></div>
</div>
<div class="key flex">
<div class="key__front face"></div>
<div class="key__back face"></div>
<div class="key__right face"></div>
<div class="key__left face"></div>
<div class="key__top face"></div>
<div class="key__bottom face"></div>
</div>
<div class="key flex">
<div class="key__front face"></div>
<div class="key__back face"></div>
<div class="key__right face"></div>
<div class="key__left face"></div>
<div class="key__top face"></div>
<div class="key__bottom face"></div>
</div>
<div class="key flex">
<div class="key__front face"></div>
<div class="key__back face"></div>
<div class="key__right face"></div>
<div class="key__left face"></div>
<div class="key__top face"></div>
<div class="key__bottom face"></div>
</div>
<div class="key flex">
<div class="key__front face"></div>
<div class="key__back face"></div>
<div class="key__right face"></div>
<div class="key__left face"></div>
<div class="key__top face"></div>
<div class="key__bottom face"></div>
</div>
<div class="key flex">
<div class="key__front face"></div>
<div class="key__back face"></div>
<div class="key__right face"></div>
<div class="key__left face"></div>
<div class="key__top face"></div>
<div class="key__bottom face"></div>
</div>
<div class="key flex">
<div class="key__front face"></div>
<div class="key__back face"></div>
<div class="key__right face"></div>
<div class="key__left face"></div>
<div class="key__top face"></div>
<div class="key__bottom face"></div>
</div>
<div class="key key--w3 flex">
<div class="key__front key__front--w3 face face--key-b3"></div>
<div class="key__back key__back--w3 face face--key-b1"></div>
<div class="key__right key__right--w3 face face--key-b1"></div>
<div class="key__left key__left--w3 face face--key-b2"></div>
<div class="key__top key__top--w3 face face--key-b1"></div>
<div class="key__bottom key__bottom--w3 face face--key-b2"></div>
</div>
</div>
<div class="keys">
<div class="key flex">
<div class="key__front face face--key-b3"></div>
<div class="key__back face face--key-b1"></div>
<div class="key__right face face--key-b1"></div>
<div class="key__left face face--key-b2"></div>
<div class="key__top face face--key-b1"></div>
<div class="key__bottom face face--key-b2"></div>
</div>
<div class="key flex">
<div class="key__front face face--key-o3"></div>
<div class="key__back face face--key-o1"></div>
<div class="key__right face face--key-o1"></div>
<div class="key__left face face--key-o2"></div>
<div class="key__top face face--key-o1"></div>
<div class="key__bottom face face--key-o2"></div>
</div>
<div class="key flex">
<div class="key__front face face--key-b3"></div>
<div class="key__back face face--key-b1"></div>
<div class="key__right face face--key-b1"></div>
<div class="key__left face face--key-b2"></div>
<div class="key__top face face--key-b1"></div>
<div class="key__bottom face face--key-b2"></div>
</div>
<div class="key flex">
<div class="key__front face face--key-b3"></div>
<div class="key__back face face--key-b1"></div>
<div class="key__right face face--key-b1"></div>
<div class="key__left face face--key-b2"></div>
<div class="key__top face face--key-b1"></div>
<div class="key__bottom face face--key-b2"></div>
</div>
<div class="key key--w6 flex">
<div class="key__front key__front--w6 face"></div>
<div class="key__back key__back--w6 face"></div>
<div class="key__right key__right--w6 face"></div>
<div class="key__left key__left--w6 face"></div>
<div class="key__top key__top--w6 face"></div>
<div class="key__bottom key__bottom--w6 face"></div>
</div>
<div class="key flex">
<div class="key__front face face--key-b3"></div>
<div class="key__back face face--key-b1"></div>
<div class="key__right face face--key-b1"></div>
<div class="key__left face face--key-b2"></div>
<div class="key__top face face--key-b1"></div>
<div class="key__bottom face face--key-b2"></div>
</div>
<div class="key flex">
<div class="key__front face face--key-b3"></div>
<div class="key__back face face--key-b1"></div>
<div class="key__right face face--key-b1"></div>
<div class="key__left face face--key-b2"></div>
<div class="key__top face face--key-b1"></div>
<div class="key__bottom face face--key-b2"></div>
</div>
<div class="key flex">
<div class="key__front face face--key-b3"></div>
<div class="key__back face face--key-b1"></div>
<div class="key__right face face--key-b1"></div>
<div class="key__left face face--key-b2"></div>
<div class="key__top face face--key-b1"></div>
<div class="key__bottom face face--key-b2"></div>
</div>
<div class="key flex">
<div class="key__front face face--key-b3"></div>
<div class="key__back face face--key-b1"></div>
<div class="key__right face face--key-b1"></div>
<div class="key__left face face--key-b2"></div>
<div class="key__top face face--key-b1"></div>
<div class="key__bottom face face--key-b2"></div>
</div>
<div class="key flex">
<div class="key__front face face--key-b3"></div>
<div class="key__back face face--key-b1"></div>
<div class="key__right face face--key-b1"></div>
<div class="key__left face face--key-b2"></div>
<div class="key__top face face--key-b1"></div>
<div class="key__bottom face face--key-b2"></div>
</div>
</div>
</div>
<div class="keyboard__bottom face"></div>
</div>
</div>
<script>const m = document.querySelector('#m');
const k = document.querySelector('#k');
const s = document.querySelector('#s');
const kd = document.querySelectorAll('.key');
let con = 0;
let base = (e) => {
let x = e.pageX / window.innerWidth - 0.5;
let y = e.pageY / window.innerHeight - 0.5;
k.style.transform = `perspective(10000px)rotateX(${y * 10 + 60}deg)rotateZ(-${x * 40 + 35}deg)`
};
let addKey = (e) => {
let kc = event.keyCode;
if ((kc >= 65 && kc <= 90) || kc == 32) {
if (kc == 81) {
kd[15].classList.add('key--down')
} else if (kc == 87) {
kd[16].classList.add('key--down')
} else if (kc == 69) {
kd[17].classList.add('key--down')
} else if (kc == 82) {
kd[18].classList.add('key--down')
} else if (kc == 84) {
kd[19].classList.add('key--down')
} else if (kc == 89) {
kd[20].classList.add('key--down')
} else if (kc == 85) {
kd[21].classList.add('key--down')
} else if (kc == 73) {
kd[22].classList.add('key--down')
} else if (kc == 79) {
kd[23].classList.add('key--down')
} else if (kc == 80) {
kd[24].classList.add('key--down')
} else if (kc == 65) {
kd[29].classList.add('key--down')
} else if (kc == 83) {
kd[30].classList.add('key--down')
} else if (kc == 68) {
kd[31].classList.add('key--down')
} else if (kc == 70) {
kd[32].classList.add('key--down')
} else if (kc == 71) {
kd[33].classList.add('key--down')
} else if (kc == 72) {
kd[34].classList.add('key--down')
} else if (kc == 74) {
kd[35].classList.add('key--down')
} else if (kc == 75) {
kd[36].classList.add('key--down')
} else if (kc == 76) {
kd[37].classList.add('key--down')
} else if (kc == 192) {
kd[38].classList.add('key--down')
} else if (kc == 90) {
kd[41].classList.add('key--down')
} else if (kc == 88) {
kd[42].classList.add('key--down')
} else if (kc == 67) {
kd[43].classList.add('key--down')
} else if (kc == 86) {
kd[44].classList.add('key--down')
} else if (kc == 66) {
kd[45].classList.add('key--down')
} else if (kc == 78) {
kd[46].classList.add('key--down')
} else if (kc == 77) {
kd[47].classList.add('key--down')
} else if (kc == 13) {
kd[39].classList.add('key--down')
} else if (kc == 32) {
kd[56].classList.add('key--down');
s.innerHTML += ' '
}
s.innerHTML += String.fromCharCode(kc);
con++;
if (con > 10) {
s.innerHTML = '';
con = 0
}
}
if (kc == 8) {
s.innerHTML = '';
kd[27].classList.add('key--down');
con = 0
}
};
let removeKey = (e) => {
let kc = event.keyCode;
if (kc == 81) {
kd[15].classList.remove('key--down')
} else if (kc == 87) {
kd[16].classList.remove('key--down')
} else if (kc == 69) {
kd[17].classList.remove('key--down')
} else if (kc == 82) {
kd[18].classList.remove('key--down')
} else if (kc == 84) {
kd[19].classList.remove('key--down')
} else if (kc == 89) {
kd[20].classList.remove('key--down')
} else if (kc == 85) {
kd[21].classList.remove('key--down')
} else if (kc == 73) {
kd[22].classList.remove('key--down')
} else if (kc == 79) {
kd[23].classList.remove('key--down')
} else if (kc == 80) {
kd[24].classList.remove('key--down')
} else if (kc == 65) {
kd[29].classList.remove('key--down')
} else if (kc == 83) {
kd[30].classList.remove('key--down')
} else if (kc == 68) {
kd[31].classList.remove('key--down')
} else if (kc == 70) {
kd[32].classList.remove('key--down')
} else if (kc == 71) {
kd[33].classList.remove('key--down')
} else if (kc == 72) {
kd[34].classList.remove('key--down')
} else if (kc == 74) {
kd[35].classList.remove('key--down')
} else if (kc == 75) {
kd[36].classList.remove('key--down')
} else if (kc == 76) {
kd[37].classList.remove('key--down')
} else if (kc == 192) {
kd[38].classList.remove('key--down')
} else if (kc == 90) {
kd[41].classList.remove('key--down')
} else if (kc == 88) {
kd[42].classList.remove('key--down')
} else if (kc == 67) {
kd[43].classList.remove('key--down')
} else if (kc == 86) {
kd[44].classList.remove('key--down')
} else if (kc == 66) {
kd[45].classList.remove('key--down')
} else if (kc == 78) {
kd[46].classList.remove('key--down')
} else if (kc == 77) {
kd[47].classList.remove('key--down')
} else if (kc == 32) {
kd[56].classList.remove('key--down')
} else if (kc == 13) {
kd[39].classList.remove('key--down')
} else if (kc == 8) {
kd[27].classList.remove('key--down')
}
};
m.addEventListener('mousemove', base);
window.addEventListener('keydown', addKey);
window.addEventListener('keyup', removeKey);</script>
</body>
</html>
2.HTML+CSS实现前端简单卡片动态效果
展示效果：
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>简单卡片</title>
<link rel="stylesheet"/>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body> <!-- partial:index.partial.html --> <a href="#" class="card education">
<div class="overlay"></div>
<div class="circle">
<svg width="71px" height="76px" viewBox="29 14 71 76" version="1.1">
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Group" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"
transform="translate(30.000000, 14.000000)">
<g id="Group-8" fill="#D98A19">
<g id="Group-7">
<g id="Group-6">
<path d="M0,0 L0,75.9204805 L69.1511499,75.9204805 L0,0 Z M14.0563973,32.2825679 L42.9457663,63.9991501 L14.2315268,63.9991501 L14.0563973,32.2825679 Z"
id="Fill-1"></path>
</g>
</g>
</g>
<g id="Group-20" transform="translate(0.000000, 14.114286)" stroke="#FFFFFF" stroke-linecap="square">
<path d="M0.419998734,54.9642857 L4.70316223,54.9642857"></path>
<path d="M0.419998734,50.4404762 L4.70316223,50.4404762"></path>
<path d="M0.419998734,45.9166667 L4.70316223,45.9166667"></path>
<path d="M0.419998734,41.3928571 L2.93999114,41.3928571"></path>
<path d="M0.419998734,36.8690476 L4.70316223,36.8690476"></path>
<path d="M0.419998734,32.3452381 L4.70316223,32.3452381"></path>
<path d="M0.419998734,27.8214286 L4.70316223,27.8214286"></path>
<path d="M0.419998734,23.297619 L2.93999114,23.297619"></path>
<path d="M0.419998734,18.7738095 L4.70316223,18.7738095"></path>
<path d="M0.419998734,14.25 L4.70316223,14.25"></path>
<path d="M0.419998734,9.72619048 L4.70316223,9.72619048"></path>
<path d="M0.419998734,5.20238095 L2.93999114,5.20238095"></path>
<path d="M0.419998734,0.678571429 L4.70316223,0.678571429" id="Line1"></path>
</g>
</g>
</svg>
</div>
<p>Education</p></a> <a href="#" class="card credentialing">
<div class="overlay"></div>
<div class="circle">
<svg width="64px" height="72px" viewBox="27 21 64 72" version="1.1">
<desc>Created with Sketch.</desc>
<defs>
<polygon id="path-1"
points="60.9784821 18.4748913 60.9784821 0.0299638385 0.538377293 0.0299638385 0.538377293 18.4748913"></polygon>
</defs>
<g id="Group-12" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"
transform="translate(27.000000, 21.000000)">
<g id="Group-5">
<g id="Group-3" transform="translate(2.262327, 21.615176)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="Clip-2"></g>
<path d="M7.17774177,18.4748913 L54.3387782,18.4748913 C57.9910226,18.4748913 60.9789911,15.7266455 60.9789911,12.3681986 L60.9789911,6.13665655 C60.9789911,2.77820965 57.9910226,0.0299638385 54.3387782,0.0299638385 L7.17774177,0.0299638385 C3.52634582,0.0299638385 0.538377293,2.77820965 0.538377293,6.13665655 L0.538377293,12.3681986 C0.538377293,15.7266455 3.52634582,18.4748913 7.17774177,18.4748913"
id="Fill-11" fill="#59A785" mask="url(#mask-2)"></path>
</g>
<polygon id="Fill-4" fill="#FFFFFF"
transform="translate(31.785111, 30.877531) rotate(-2.000000) translate(-31.785111, -30.877531) "
points="62.0618351 55.9613216 7.2111488 60.3692832 1.50838775 5.79374073 56.3582257 1.38577917"></polygon>
<ellipse id="Oval-3" fill="#25D48A" opacity="0.216243004" cx="30.0584472" cy="21.7657707"
rx="9.95169733" ry="9.17325562"></ellipse>
<g id="Group-4" transform="translate(16.959615, 6.479082)" fill="#54C796">
<polygon id="Fill-6"
points="10.7955395 21.7823628 0.11873799 11.3001058 4.25482787 7.73131106 11.0226557 14.3753897 27.414824 1.77635684e-15 31.3261391 3.77891399"></polygon>
</g>
<path d="M4.82347935,67.4368303 L61.2182039,67.4368303 C62.3304205,67.4368303 63.2407243,66.5995595 63.2407243,65.5765753 L63.2407243,31.3865871 C63.2407243,30.3636029 62.3304205,29.5263321 61.2182039,29.5263321 L4.82347935,29.5263321 C3.71126278,29.5263321 2.80095891,30.3636029 2.80095891,31.3865871 L2.80095891,65.5765753 C2.80095891,66.5995595 3.71126278,67.4368303 4.82347935,67.4368303"
id="Fill-8" fill="#59B08B"></path>
<path d="M33.3338063,67.4368303 L61.2181191,67.4368303 C62.3303356,67.4368303 63.2406395,66.5995595 63.2406395,65.5765753 L63.2406395,31.3865871 C63.2406395,30.3636029 62.3303356,29.5263321 61.2181191,29.5263321 L33.3338063,29.5263321 C32.2215897,29.5263321 31.3112859,30.3636029 31.3112859,31.3865871 L31.3112859,65.5765753 C31.3112859,66.5995595 32.2215897,67.4368303 33.3338063,67.4368303"
id="Fill-10" fill="#4FC391"></path>
<path d="M29.4284029,33.2640869 C29.4284029,34.2202068 30.2712569,34.9954393 31.3107768,34.9954393 C32.3502968,34.9954393 33.1931508,34.2202068 33.1931508,33.2640869 C33.1931508,32.3079669 32.3502968,31.5327345 31.3107768,31.5327345 C30.2712569,31.5327345 29.4284029,32.3079669 29.4284029,33.2640869"
id="Fill-15" fill="#FEFEFE"></path>
<path d="M8.45417501,71.5549073 L57.5876779,71.5549073 C60.6969637,71.5549073 63.2412334,69.2147627 63.2412334,66.3549328 L63.2412334,66.3549328 C63.2412334,63.4951029 60.6969637,61.1549584 57.5876779,61.1549584 L8.45417501,61.1549584 C5.34488919,61.1549584 2.80061956,63.4951029 2.80061956,66.3549328 L2.80061956,66.3549328 C2.80061956,69.2147627 5.34488919,71.5549073 8.45417501,71.5549073"
id="Fill-12" fill="#5BD6A2"></path>
</g>
</g>
</svg>
</div>
<p>Credentialing</p></a> <a href="#" class="card wallet">
<div class="overlay"></div>
<div class="circle">
<svg width="78px" height="60px" viewBox="23 29 78 60" version="1.1">
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="icon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"
transform="translate(23.000000, 29.500000)">
<rect id="Rectangle-3" fill="#AC8BE9" x="67.8357511" y="26.0333433" width="9.40495664"
height="21.8788565" rx="4.70247832"></rect>
<rect id="Rectangle-31" fill="#6A5297" x="67.8357511" y="38.776399" width="9.40495664"
height="10.962961" rx="4.70247832"></rect>
<polygon id="Rectangle-2" fill="#6A5297"
points="57.3086772 0 67.1649301 26.3776902 14.4413177 45.0699507 4.58506484 18.6922605"></polygon>
<path d="M0,19.6104296 C0,16.2921718 2.68622235,13.6021923 5.99495032,13.6021923 L67.6438591,13.6021923 C70.9547788,13.6021923 73.6388095,16.2865506 73.6388095,19.6104296 L73.6388095,52.6639057 C73.6388095,55.9821635 70.9525871,58.672143 67.6438591,58.672143 L5.99495032,58.672143 C2.68403068,58.672143 0,55.9877847 0,52.6639057 L0,19.6104296 Z"
id="Rectangle" fill="#8B6FC0"></path>
<path d="M47.5173769,27.0835169 C45.0052827,24.5377699 40.9347162,24.5377699 38.422622,27.0835169 L36.9065677,28.6198808 L35.3905134,27.0835169 C32.8799903,24.5377699 28.8078527,24.5377699 26.2957585,27.0835169 C23.7852354,29.6292639 23.7852354,33.7559532 26.2957585,36.3001081 L36.9065677,47.0530632 L47.5173769,36.3001081 C50.029471,33.7559532 50.029471,29.6292639 47.5173769,27.0835169"
id="Fill-121" fill="#F6F1FF"></path>
<rect id="Rectangle-4" fill="#AC8BE9" x="58.0305835" y="26.1162588" width="15.6082259"
height="12.863158"></rect>
<ellipse id="Oval" fill="#FFFFFF" cx="65.8346965" cy="33.0919007" rx="2.20116007"
ry="2.23319575"></ellipse>
</g>
</svg>
</div>
<p>Wallet</p></a> <a href="#" class="card human-resources">
<div class="overlay"></div>
<div class="circle">
<svg width="66px" height="77px" viewBox="1855 26 66 77" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"
transform="translate(1855.000000, 26.000000)">
<path d="M4.28872448,42.7464904 C4.28872448,39.3309774 5.4159227,33.7621426 6.40576697,30.4912557 C10.5920767,32.1098991 14.3021264,35.1207513 18.69596,35.1207513 C30.993618,35.1207513 42.5761396,28.7162991 49.9992251,17.9014817 C56.8027248,23.8881252 60.8188351,33.0463165 60.8188351,42.7464904 C60.8188351,60.817447 47.6104607,76.6693426 32.5537798,76.6693426 C17.4970989,76.6693426 4.28872448,60.817447 4.28872448,42.7464904"
id="Fill-81" fill="#AFCEFF"></path>
<path d="M64.3368879,31.1832696 L62.8424171,46.6027478 L60.6432609,46.7824348 L59.8340669,34.6791304 L47.6573402,25.3339478 C44.2906753,34.068487 34.3459503,40.2903304 24.4684093,40.2903304 C17.7559812,40.2903304 10.046244,37.4168 5.80469412,32.8004522 L5.80469412,34.6791304 L5.80469412,46.6027478 L4.28932167,46.6027478 L1.30187314,27.8802435 C1.30187314,20.9790957 3.52342407,15.5432 7.27229127,11.3578087 C13.132229,4.79558261 21.8124018,0.0492173913 30.5672235,0.342852174 C37.4603019,0.569286957 42.6678084,2.72991304 50.8299179,0.342852174 C51.4629405,1.44434783 51.8615656,3.00455652 51.5868577,5.22507826 C51.4629405,6.88316522 51.2106273,7.52302609 50.8299179,8.45067826 C58.685967,14.1977391 64.3368879,20.7073739 64.3368879,31.1832696"
id="Fill-101" fill="#3B6CB7"></path>
<path d="M58.9405197,54.5582052 C62.0742801,54.8270052 65.3603242,52.60064 65.6350321,49.5386574 C65.772386,48.009127 65.2617876,46.5570226 64.3182257,45.4584487 C63.3761567,44.3613357 62.0205329,43.6162922 60.4529062,43.4818922 L58.9405197,54.5582052 Z"
id="Fill-13" fill="#568ADC"></path>
<path d="M6.32350389,54.675367 C3.18227865,54.8492104 0.484467804,52.4957496 0.306803449,49.4264626 C0.217224782,47.8925496 0.775598471,46.4579757 1.75200594,45.3886191 C2.7284134,44.3192626 4.10792487,43.6165843 5.67853749,43.530393 L6.32350389,54.675367 Z"
id="Fill-151" fill="#568ADC"></path>
</g>
</svg>
</div>
<p>Human Resources</p></a> <!-- partial --> </body>
</html>
body {
background: #f2f4f8;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
height: 100vh;
font-family: "Open Sans";
}
.education {
--bg-color: #ffd861;
--bg-color-light: #ffeeba;
--text-color-hover: #4c5656;
--box-shadow-color: rgba(255, 215, 97, 0.48);
}
.credentialing {
--bg-color: #b8f9d3;
--bg-color-light: #e2fced;
--text-color-hover: #4c5656;
--box-shadow-color: rgba(184, 249, 211, 0.48);
}
.wallet {
--bg-color: #ceb2fc;
--bg-color-light: #f0e7ff;
--text-color-hover: #fff;
--box-shadow-color: rgba(206, 178, 252, 0.48);
}
.human-resources {
--bg-color: #dce9ff;
--bg-color-light: #f1f7ff;
--text-color-hover: #4c5656;
--box-shadow-color: rgba(220, 233, 255, 0.48);
}
.card {
width: 220px;
height: 321px;
background: #fff;
border-top-right-radius: 10px;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
box-shadow: 0 14px 26px rgba(0, 0, 0, 0.04);
transition: all 0.3s ease-out;
text-decoration: none;
}
.card:hover {
transform: translateY(-5px) scale(1.005) translateZ(0);
box-shadow: 0 24px 36px rgba(0, 0, 0, 0.11), 0 24px 46px var(--box-shadow-color);
}
.card:hover .overlay {
transform: scale(4) translateZ(0);
}
.card:hover .circle {
border-color: var(--bg-color-light);
background: var(--bg-color);
}
.card:hover .circle:after {
background: var(--bg-color-light);
}
.card:hover p {
color: var(--text-color-hover);
}
.card:active {
transform: scale(1) translateZ(0);
box-shadow: 0 15px 24px rgba(0, 0, 0, 0.11), 0 15px 24px var(--box-shadow-color);
}
.card p {
font-size: 17px;
color: #4c5656;
margin-top: 30px;
z-index: 1000;
transition: color 0.3s ease-out;
}
.circle {
width: 131px;
height: 131px;
border-radius: 50%;
background: #fff;
border: 2px solid var(--bg-color);
display: flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 1;
transition: all 0.3s ease-out;
}
.circle:after {
content: "";
width: 118px;
height: 118px;
display: block;
position: absolute;
background: var(--bg-color);
border-radius: 50%;
top: 7px;
left: 7px;
transition: opacity 0.3s ease-out;
}
.circle svg {
z-index: 10000;
transform: translateZ(0);
}
.overlay {
width: 118px;
position: absolute;
height: 118px;
border-radius: 50%;
background: var(--bg-color);
top: 70px;
left: 50px;
z-index: 0;
transition: transform 0.3s ease-out;
}
3.html-css手搓轮播图
展示效果：
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
#slideshow {
width: 800px;
height: 350px;
margin: 0 auto;
/*设置在页面水平居中*/
overflow: hidden;
position: relative;
}
#slideshow img {
width: 800px;
position: absolute;
/*图片采取绝对定位，均位于左上角，重叠在一起*/
top: 0;
left: 0;
opacity: 0;
/*初始不透明度为0，图片都看不见*/
transition: opacity 1s linear;
/*--重点--定义一个关于透明度的transition*/
}
#slideshow img.active {
opacity: 1;
/*有active类的图片不透明度为1，即显示图片*/
}
/*-- 设置页码的样式 --*/
#slideshow div {
width: 100%;
position: absolute;
bottom: 10px;
text-align: center;
}
#slideshow span {
display: inline-block;
width: 25px;
line-height: 25px;
/*当只有一行文本时height等于line-height*/
border-radius: 25px;
/*设置页码为圆形*/
margin: 0 15px;
background: white;
font-size: 16px;
}
#slideshow span.active {
color: white;
background: #FFDD55;
}
/*-- 设置图片描述文本的样式 --*/
#slideshow p {
position: absolute;
top: 30px;
left: -400px;
/*相对于轮播图左侧左移400px*/
line-height: 30px;
padding: 5px 30px;
font-size: 20px;
color: white;
background-color: rgba(100, 100, 100, 0.6);
/*用rgba设置一个带透明度的背景颜色*/
opacity: 0;
transition: all 0.5s;
}
#slideshow p.active {
left: 0;
opacity: 1;
}
</style>
</head>
<body>
<div id="slideshow">
<!-- 插入轮播的图片们 -->
<img class="active" src="https://images.unsplash.com/photo-1730722005859-f93a79460bae?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
<img src="https://image2.sina.com.cn/dongman/pic/chshidzrcji/U1595P55T4D115697F50DT20070406083109.jpeg" />
<img src="http://t1.mmonly.cc/uploads/tu/201602/198/qh1spjs3guk.jpg" />
<!-- 插入轮播的页码们 -->
<div>
<span class="active">1</span>
<span>2</span>
<span>3</span>
</div>
<!-- 插入图片的描述们 -->
<p class="active">这是第一幅图片哈哈哈</p>
<p>这是第二幅图片咩</p>
<p>到第三幅了！</p>
</div>
<script>
//---------主角：轮播图函数-------------
function slideshow() {
var slideshow = document.getElementById("slideshow"),
imgs = slideshow.getElementsByTagName("img"), //得到图片们
pages = slideshow.getElementsByTagName("span"), //得到页码们
descrips = slideshow.getElementsByTagName("p"), //得到描述们
current = 0; //current为当前活跃的图片编号
function slideOff() {
imgs[current].className = ""; //图片淡出
pages[current].className = "";
descrips[current].className = "";
}
function slideOn() {
imgs[current].className = "active"; //图片淡入
pages[current].className = "active";
descrips[current].className = "active";
}
function changeSlide() { //切换图片的函数
slideOff();
current++; //自增1
if (current >= 3) current = 0;
slideOn();
}
//每2s调用changeSlide函数进行图片轮播
var slideon = setInterval(changeSlide, 2000);
slideshow.onmouseover = function () {
clearInterval(slideon); //当鼠标移入时清除轮播事件
}
slideshow.onmouseout = function () {
slideon = setInterval(changeSlide, 2000); //当鼠标移出时重新开始轮播事件
}
for (var i = 0; i < pages.length; i++) { //定义鼠标移入和移出页码事件
pages[i].onmouseover = function () {
slideOff(); //图片淡出
current = this.innerHTML - 1; //得到鼠标停留的页码对应的current
slideOn(); //图片淡出
}
}
}
slideshow();
</script>
</body>
</html>
4.密码生成器
展示效果：
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Walter+Turncoat&display=swap');
body {
font-family: 'Walter Turncoat', cursive;
background: #f2f2f2;
}
.form {
background: #f2f2f2;
box-shadow: 0px -6px 10px rgba(255, 255, 255, 1), 0px 4px 15px rgba(0, 0, 0, 0.15);
border-radius: 30px;
position: absolute;
top: 50%;
left: 50%;
padding: 20px;
transform: translate(-50%, -50%);
}
input {
font-family: 'Walter Turncoat', cursive;
background: #f2f2f2;
height: 50px;
width: 300px;
text-align: center;
box-shadow: 0px -6px 10px rgba(255, 255, 255, 1), 0px 4px 15px rgba(0, 0, 0, 0.15);
border: none;
padding: 3px;
margin-left: 30px;
border-radius: 50px;
font-size: 20px;
}
#button {
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
margin-top: 30px;
background: #f2f2f2;
box-shadow: 0px -6px 10px rgba(255, 255, 255, 1), 0px 4px 15px rgba(0, 0, 0, 0.15);
border: none;
width: 130px;
height: 45px;
color: black;
text-align: center;
cursor: pointer;
border-radius: 50px;
}
.copy {
margin-left: 85px
}
#button:hover {
box-shadow: inset 5px 6px 10px rgba(255, 255, 255, 0.3), inset -5px 4px 10px rgba(0, 0, 0, 0.15);
}
</style>
</head>
<body>
<div class="form">
<input placeholder="请生成密码" id="password" readonly>
<table>
<th>
<div id="button" onclick="create()">创建</div>
</th>
<th><a id="button" class="copy" onclick="copyPass()">复制</a></th>
</table>
</div>
<script>
var password = document.getElementById("password");
function create() {
var use = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!@#$%^&*";
var lengthx = 10;
var password = "";
for (var i = 0; i <= lengthx; i++) {
var random = Math.floor(Math.random() * use.length);
password += use.substring(random, random + 1);
}
document.getElementById("password").value = password;
}
function copyPass() {
var c = document.getElementById("password");
c.select();
document.execCommand("copy");
}
</script>
</body>
</html>
5.登陆页面
1.
展示效果：
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: 100%;
}
.gradient-bg {
height: 100%;
background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
}
.login-box {
background-color: #fff;
width: 358px;
height: 588px;
border-radius: 15px;
padding: 0 50px;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.login-header {
font-size: 38px;
font-weight: bold;
text-align: center;
line-height: 200px;
}
.input-field {
display: block;
width: 100%;
margin-bottom: 20px;
border: 0;
padding: 10px;
border-bottom: 1px solid rgb(128, 125, 125);
font-size: 15px;
outline: none;
}
.input-field::placeholder {
text-transform: uppercase;
}
.login-button {
text-align: center;
padding: 10px;
width: 100%;
margin-top: 40px;
background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);
color: #fff;
border-radius: 8px;
}
.message {
text-align: center;
line-height: 88px;
}
a {
text-decoration-line: none;
color: #abc1ee;
}
</style>
</head>
<body>
<div class="gradient-bg">
<div class="login-box">
<div class="login-header">请你登录</div>
<div class="form-content">
<input type="text" name="username" placeholder="账号" class="input-field">
<input type="password" name="password" placeholder="密码" class="input-field">
<div class="login-button">登录</div>
</div>
<div class="message"> 如果没有账户? <a href="#">请先注册</a> </div>
</div>
</div>
</body>
</html>
2.
展示效果：
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
input,
button {
background: transparent;
border: 0;
outline: none;
}
body {
height: 100vh;
background: linear-gradient(#282a36, #44475a);
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
color: #bd93f9;
}
.auth-container {
width: 400px;
height: 364px;
background-color: #21222c;
margin: 100px auto;
border-radius: 10px;
box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .6);
padding: 40px;
box-sizing: border-box;
}
h2 {
text-align: center;
color: #bd93f9;
margin-bottom: 30px;
font-family: 'Courier New', Courier, monospace;
}
.input-group {
height: 45px;
border-bottom: 1px solid #fff;
margin-bottom: 40px;
position: relative;
}
.input-group input {
width: 100%;
height: 100%;
color: #fff;
padding-top: 20px;
box-sizing: border-box;
}
.input-group input:focus + label,
.input-group input:valid + label {
top: 0px;
font-size: 12px;
}
.input-group label {
position: absolute;
left: 0;
top: 12px;
transition: all 0.5s linear;
}
.auth-button {
padding: 10px 20px;
margin-top: 30px;
color: #bd93f9;
position: relative;
overflow: hidden;
text-transform: uppercase;
letter-spacing: 2px;
left: 35%;
}
.auth-button:hover {
border-radius: 5px;
color: #fff;
background: #bd93f9;
box-shadow: 0 0 5px 0 #bd93f9, 0 0 25px 0 #bd93f9, 0 0 50px 0 #bd93f9, 0 0 100px 0 #bd93f9;
transition: all 1s linear;
}
.auth-button > span {
position: absolute;
}
.auth-button > span:nth-child(1) {
width: 100%;
height: 2px;
background: -webkit-linear-gradient(left, transparent, #bd93f9);
left: -100%;
top: 0px;
animation: line1 1s linear infinite;
}
@keyframes line1 {
50%,
100% {
left: 100%;
}
}
.auth-button > span:nth-child(2) {
width: 2px;
height: 100%;
background: -webkit-linear-gradient(top, transparent, #bd93f9);
right: 0px;
top: -100%;
animation: line2 1s 0.25s linear infinite;
}
@keyframes line2 {
50%,
100% {
top: 100%;
}
}
.auth-button > span:nth-child(3) {
width: 100%;
height: 2px;
background: -webkit-linear-gradient(left, #bd93f9, transparent);
left: 100%;
bottom: 0px;
animation: line3 1s 0.75s linear infinite;
}
@keyframes line3 {
50%,
100% {
left: -100%;
}
}
.auth-button > span:nth-child(4) {
width: 2px;
height: 100%;
background: -webkit-linear-gradient(top, transparent, #bd93f9);
left: 0px;
top: 100%;
animation: line4 1s 1s linear infinite;
}
@keyframes line4 {
50%,
100% {
top: -100%;
}
}
</style>
</head>
<body>
<div class="auth-container">
<h2>请登录</h2>
<form action="">
<div class="input-group"> <input type="text" required> <label for="">用户名</label> </div>
<div class="input-group"> <input type="password" required> <label for="">密码</label> </div>
<button class="auth-button">提交 <span></span> <span></span> <span></span> <span></span> </button>
</form>
</div>
</body>
</html>
3.
展示效果：
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Form</title>
<style>
* {
padding: 0;
margin: 0;
}
html {
height: 100%;
}
body {
background-image: linear-gradient(to bottom right, #636EFA, #1E88E5);
}
.auth-container {
width: 600px;
height: 315px;
margin: 0 auto;
margin-top: 10%;
border-radius: 15px;
box-shadow: 0 10px 50px 0 rgba(34, 50, 71, 0.8);
background-color: #2D3436;
}
.left-panel {
display: inline-block;
width: 330px;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
padding: 60px;
background-image: linear-gradient(to bottom right, #636EFA, #1E88E5);
}
.panel-title {
color: #fff;
font-size: 18px;
font-weight: 200;
}
.panel-title span {
border-bottom: 3px solid #4CAF50;
}
.input-panel {
padding: 20px 0;
}
input {
border: 0;
background: none;
outline: none;
color: #fff;
margin: 20px 0;
display: block;
width: 100%;
padding: 5px 0;
transition: .2s;
border-bottom: 1px solid #BDBDBD;
}
input:hover {
border-bottom-color: #fff;
}
::-webkit-input-placeholder {
color: #BDBDBD;
}
.message-panel {
font-size: 14px;
transition: .2s;
color: #BDBDBD;
cursor: pointer;
}
.message-panel:hover {
color: #fff;
}
.right-panel {
width: 145px;
display: inline-block;
height: calc(100% - 120px);
vertical-align: top;
padding: 60px 0;
}
.register-panel {
text-align: center;
color: #fff;
font-size: 18px;
font-weight: 200;
}
.register-panel span {
border-bottom: 3px solid #4CAF50;
}
.action-panel {
font-size: 10px;
color: #fff;
text-align: center;
position: relative;
top: 200px;
}
.action-panel span {
border: 1px solid #4CAF50;
padding: 10px;
display: inline;
line-height: 20px;
border-radius: 20px;
position: absolute;
bottom: 10px;
left: calc(72px - 20px);
transition: .2s;
cursor: pointer;
}
.action-panel span:hover {
background-color: #4CAF50;
color: #2D3436;
}
</style>
</head>
<body>
<div class="auth-container">
<div class="left-panel">
<div class="panel-title"><span>登录</span></div>
<div class="input-panel">
<input type="text" name="username" placeholder="用户名">
<input type="password" name="password" placeholder="密码">
</div>
<div class="message-panel">
<span>忘记密码</span>
</div>
</div>
<div class="right-panel">
<div class="register-panel">
<span>注册</span>
</div>
<div class="action-panel">
<span>提交</span>
</div>
</div>
</div>
</body>
</html>
4.
展示效果：
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Login Form using HTML CSS Only Codehal</title>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<div class="container">
<div class="login-box"><h2>Login</h2>
<form action="#">
<div class="input-box"><input type="email" required> <label>Email</label></div>
<div class="input-box"><input type="password" required> <label>Password</label></div>
<div class="forgot-pass"><a href="#">Forgot your password?</a></div>
<button type="submit" class="btn">Login</button>
<div class="signup-link"><a href="#">Signup</a></div>
</form>
</div>
<span style="--i:0"></span> <span style="--i:1"></span> <span style="--i:2"></span> <span style="--i:3"></span>
<span style="--i:4"></span> <span style="--i:5"></span> <span style="--i:6"></span> <span style="--i:7"></span>
<span style="--i:8"></span> <span style="--i:9"></span> <span style="--i:10"></span> <span style="--i:11"></span>
<span style="--i:12"></span> <span style="--i:13"></span> <span style="--i:14"></span> <span style="--i:15"></span>
<span style="--i:16"></span> <span style="--i:17"></span> <span style="--i:18"></span> <span style="--i:19"></span>
<span style="--i:20"></span> <span style="--i:21"></span> <span style="--i:22"></span> <span style="--i:23"></span>
<span style="--i:24"></span> <span style="--i:25"></span> <span style="--i:26"></span> <span style="--i:27"></span>
<span style="--i:28"></span> <span style="--i:29"></span> <span style="--i:30"></span> <span style="--i:31"></span>
<span style="--i:32"></span> <span style="--i:33"></span> <span style="--i:34"></span> <span style="--i:35"></span>
<span style="--i:36"></span> <span style="--i:37"></span> <span style="--i:38"></span> <span style="--i:39"></span>
<span style="--i:40"></span> <span style="--i:41"></span> <span style="--i:42"></span> <span style="--i:43"></span>
<span style="--i:44"></span> <span style="--i:45"></span> <span style="--i:46"></span> <span style="--i:47"></span>
<span style="--i:48"></span> <span style="--i:49"></span></div>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #1f293a;
}
.container {
position: relative;
width: 256px;
height: 256px;
display: flex;
justify-content: center;
align-items: center;
}
.container span {
position: absolute;
left: 0;
width: 32px;
height: 6px;
background: #2c4766;
border-radius: 8px;
transform-origin: 128px;
transform: scale(2.2) rotate(calc(var(--i) * (360deg / 50)));
animation: animateBlik 3s linear infinite;
animation-delay: calc(var(--i) * (3s / 50));
}
@keyframes animateBlik {
0% {
background: #0ef;
}
25% {
background: #2c4766;
}
}
.login-box {
position: absolute;
width: 400px; /* background: red; */
}
.login-box form {
width: 100%;
padding: 0 50px;
}
h2 {
font-size: 2em;
color: #0ef;
text-align: center;
}
.input-box {
position: relative;
margin: 25px 0;
}
.input-box input {
width: 100%;
height: 50px;
background: transparent
border: 2px solid #2c4766;
outline: none;
border-radius: 40px;
font-size: 1em;
color: #fff;
padding: 0 20px;
transform: .5s ease;
}
.input-box input:focus, .input-box input:valid, {
border-color: #0ef;
}
.input-box label {
position: absolute;
top: 50%;
left: 20px;
transform: translateY(-50%);
font-size: 1em;
color: #fff;
pointer-events: none;
}
.input-box input:focus ~ label, .input-box input:valid ~ label, {
top: 1px;
font-size: .8em;
background: #1f29a;
padding: 0 6px;
color: #0ef;
}
.forgot-pass {
margin: -15px 0 10px;
text-align: center;
}
.forgot-pass a {
font-size: .85em;
color: #fff;
text-decoration: none;
}
.forgot-pass a:hover {
text-decoration: underline;
}
.btn {
width: 100%;
height: 45px;
background: #0ef;
border: none;
outline: none;
border-radius: 40px;
cursor: pointer;
font-size: 1em;
color: #1f293a;
font-weight: 600;
}
.signup-link {
margin: 20px 0 10px;
text-align: center;
}
.signup-link a {
font-size: 1em;
color: #0ef;
text-decoration: none;
font-weight: 600;
}
.signup-link a:hover {
text-decoration: underline;
}
6.等轴侧边栏
展示效果：
源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>小黑学长T</title>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<ul>
<li style="--i:6;"><a href="#">Home</a></li>
<li style="--i:5;"><a href="#">About</a></li>
<li style="--i:4;"><a href="#">Services</a></li>
<li style="--i:3;"><a href="#">Portfolio</a></li>
<li style="--i:2;"><a href="#">our Team</a></li>
<li style="--i:1;"><a href="#">Contact</a></li>
</ul>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Oawald', sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #434750;
}
ul {
position: relative;
transform: skewY(-15deg);
}
ul li {
position: relative;
list-style: none;
width: 200px;
background: #3e3f46;
padding: 15px;
z-index: var(--i);
transition: 0.5s;
}
ul li:hover {
background: #33a3ee;
transform: translateX(-50px);
}
ul li::before {
content: '';
position: absolute;
top: 0;
left: -40px;
width: 40px;
height: 100%;
background: #2e3133;
transform-origin: right;
transform: skewY(45deg);
transition: 0.5s;
}
ul li:hover::before {
background: #1f5378;
}
ul li::after {
content: '';
position: absolute;
top: -40px;
left: 0;
width: 100%;
height: 40px;
background: #35383e;
transform-origin: bottom;
transform: skewX(45deg);
transition: 0.5s;
}
ul li:hover::after {
background: #2982b9;
}
ul li a {
text-decoration: none;
color: #999;
display: block;
text-transform: uppercase;
letter-spacing: 0.05em;
transition: 0.5s;
}
ul li:hover a {
color: #fff;
}
ul li:last-child::after {
box-shadow: -120px 120px 20px rgba(0, 0, 0, 0.25);
}
7.侧边栏导航效果
展示效果：
源码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>侧边导航栏</title> <!-- 引入字体图标 -->
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
<style> * { /* 初始化 */
margin: 0;
padding: 0;
}
body { /* 100%窗口高度 */
height: 100vh; /* 弹性布局 居中 */
display: flex;
justify-content: center;
align-items: center;
background-color: #7284a7;
}
ul {
list-style: none;
}
nav { /* 固定定位 */
position: fixed;
width: 300px;
height: 650px;
left: 0;
background-color: #ffbb00;
border-radius: 20px 20px 20px 0px;
}
.menus { /* 垂直居中 */
margin: 50px 0;
color: #fff;
}
.li {
letter-spacing: 2px;
font-size: 17px;
font-weight: 600;
padding: 16px 0; /* 动画过渡 */
transition: 0.3s;
}
.menus li:hover {
background-color: #ae00ff;
}
.li .fa {
font-size: 20px;
width: 50px;
height: 20px;
text-align: center;
margin-left: 5px;
}
.li ul {
border-radius: 20px;
width: 0;
height: 550px;
padding: 50px 0;
background-color: #a06993;
position: absolute;
top: 0;
right: 0;
overflow: hidden;
transition: 0.3s;
}
.li ul li {
padding: 16px 24px; /* 文字禁止换行 */
white-space: nowrap;
transition: 0.3s;
}
.li:hover ul {
border-radius: 20px;
width: 250px;
}
.li ul li:hover {
background-color: #c28fb4;
}</style>
</head>
<body>
<nav>
<ul class="menus">
<li class="li"><i class="fa fa-qq" aria-hidden="true"></i> QQ
<ul>
<li><i class="fa fa-qq" aria-hidden="true">1号</i></li>
<li><i class="fa fa-qq" aria-hidden="true">2号</i></li>
<li><i class="fa fa-qq" aria-hidden="true">3号</i></li>
<li><i class="fa fa-qq" aria-hidden="true">4号</i></li>
<li><i class="fa fa-qq" aria-hidden="true">5号</i></li>
<li><i class="fa fa-qq" aria-hidden="true">6号</i></li>
<li><i class="fa fa-qq" aria-hidden="true">7号</i></li>
</ul>
</li>
<li class="li"><i class="fa fa-weixin" aria-hidden="true"></i> weixin
<ul>
<li><i class="fa fa-weixin" aria-hidden="true">1号</i></li>
<li><i class="fa fa-weixin" aria-hidden="true">2号</i></li>
<li><i class="fa fa-weixin" aria-hidden="true">3号</i></li>
<li><i class="fa fa-weixin" aria-hidden="true">4号</i></li>
<li><i class="fa fa-weixin" aria-hidden="true">5号</i></li>
<li><i class="fa fa-weixin" aria-hidden="true">6号</i></li>
<li><i class="fa fa-weixin" aria-hidden="true">7号</i></li>
<li><i class="fa fa-weixin" aria-hidden="true">8号</i></li>
<li><i class="fa fa-weixin" aria-hidden="true">9号</i></li>
<li><i class="fa fa-weixin" aria-hidden="true">10号</i></li>
</ul>
</li>
<li class="li"><i class="fa fa-weibo" aria-hidden="true"></i> weibo
<ul>
<li><i class="fa fa-weibo" aria-hidden="true">1号</i></li>
<li><i class="fa fa-weibo" aria-hidden="true">2号</i></li>
<li><i class="fa fa-weibo" aria-hidden="true">3号</i></li>
</ul>
</li>
<li class="li"><i class="fa fa-tencent-weibo" aria-hidden="true"></i> tencent-weibo
<ul>
<li><i class="fa fa-tencent-weibo" aria-hidden="true">1号</i></li>
<li><i class="fa fa-tencent-weibo" aria-hidden="true">2号</i></li>
<li><i class="fa fa-tencent-weibo" aria-hidden="true">3号</i></li>
<li><i class="fa fa-tencent-weibo" aria-hidden="true">4号</i></li>
<li><i class="fa fa-tencent-weibo" aria-hidden="true">5号</i></li>
</ul>
</li>
<li class="li"><i class="fa fa-telegram" aria-hidden="true"></i> telegram
<ul>
<li><i class="fa fa-telegram" aria-hidden="true">1号</i></li>
<li><i class="fa fa-telegram" aria-hidden="true">2号</i></li>
<li><i class="fa fa-telegram" aria-hidden="true">3号</i></li>
<li><i class="fa fa-telegram" aria-hidden="true">4号</i></li>
<li><i class="fa fa-telegram" aria-hidden="true">5号</i></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
8. 常用相册内容展开
效果展示：
源码：
<div class="container">
<div class="card">
<div class="img-box">
<img src="./img/1.png" alt="">
</div>
<div class="text-box">
<h2>卡片一</h2>
<p>我是内容一我是内容一我是内容一我是内容一我是内容一我是内容一我是内容一我是内容一我是内容一我是内容一我是内容一我是内容一我是内容一我是内容一我是内容一我是内容一我是内容一</p>
</div>
</div>
<div class="card">
<div class="img-box">
<img src="./img/2.png" alt="">
</div>
<div class="text-box">
<h2>卡片二</h2>
<p>我是内容二我是内容二我是内容二我是内容二我是内容二我是内容二我是内容二我是内容二我是内容二我是内容二我是内容二我是内容二我是内容二我是内容二我是内容二我是内容二我是内容二我是内容二我是内容二我是内容二
</p>
</div>
</div>
<div class="card">
<div class="img-box">
<img src="./img/1.png" alt="">
</div>
<div class="text-box">
<h2>卡片三</h2>
<p>我是内容三我是内容三我是内容三我是内容三我是内容三我是内容三我是内容三我是内容三我是内容三我是内容三我是内容三我是内容三</p>
</div>
</div>
</div>
9. 矩阵雨
效果展示：
源码：
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Cloud Rain</title>
<style> @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
:root {
--clr: #0f0;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #000;
transform: scale(0.6);
}
.container {
position: relative;
top: 100px;
height: 400px;
width: 100%;
display: flex;
justify-content: center;
animation: animateColor 5s linear infinite;
}
@keyframes animateColor {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}
.container .cloud {
position: relative;
width: 300px; /* height: 300px; */
z-index: 100;
filter: drop-shadow(0 0 35px var(--clr));
}
.container .cloud h2 {
position: absolute;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
color: #000;
font-size: 2em;
z-index: 1000;
font-weight: 400;
padding: 0 10px;
border-radius: 10px;
text-transform: uppercase;
background: var(--clr);
}
.container .cloud h2::before {
content: "";
position: absolute;
top: -115px;
left: 50%;
transform: translateX(-50%);
border-radius: 100px;
width: 120%;
height: 100px;
background: var(--clr);
}
.container .cloud h2::after {
content: "";
position: absolute;
top: -150px;
left: 25px;
width: 120px;
height: 120px;
border-radius: 50%;
background: var(--clr);
box-shadow: 120px -30px 0 10px var(--clr);
}
.container .cloud .drop {
position: absolute;
top: 60px;
height: 20px;
line-height: 20px;
color: var(--clr);
transform-origin: bottom;
animation: animate 2s linear infinite;
}
@keyframes animate {
0% {
transform: translateY(0) scaleY(0);
transform-origin: top;
}
10% {
transform: translateY(0) scaleY(0.25);
transform-origin: top;
}
20% {
transform: translateY(0) scaleY(1); /* transform-origin: top; */
}
70% {
transform: translateY(300px) scaleY(1);
transform-origin: bottom;
}
80% {
transform: translateY(300px) scaleY(1);
transform-origin: bottom;
}
100% {
transform: translateY(300px) scaleY(0);
transform-origin: bottom;
text-shadow: -180px 0 0 var(--clr), 180px 0 var(--clr);
}
}</style>
</head>
<body>
<div class="container">
<div class="cloud"><h2>Matrix Rain</h2></div>
</div>
<script> function randomText() {
var text = "!@#$%^*()";
letters = text[Math.floor(Math.random() * text.length)];
return letters;
}
function rain() {
let cloud = document.querySelector(".cloud");
let e = document.createElement("div");
e.classList.add("drop");
cloud.appendChild(e);
let left = Math.floor(Math.random() * 300);
let size = Math.random() * 1.5;
let duration = Math.random() * 1;
e.innerText = randomText();
e.style.left = left + "px";
e.style.fontSize = 0.5 + size + "em";
e.style.animationDuration = 1 + duration + "s";
setTimeout(function () {
cloud.removeChild(e);
}, 2000);
}
setInterval(function () {
rain();
}, 20);</script>
</body>
</html>
10.樱花雨
效果展示：
源码：
<!DOCTYPE HTML PUBLIC "-/W3C/DTD HTML 4.0 Transitional/EN">
<HTML>
<HEAD>
<TITLE> 樱花雨 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>body {
padding:0;
margin:0;
overflow:hidden;
height: 600px;
}
canvas {
padding:0;
margin:0;
}
div.btnbg {
position:fixed;
left:0;
top:0;
}</style>
</HEAD>
<BODY>
<canvas id="sakura"></canvas>
<div class="btnbg">
</div>
<!-- sakura shader -->
<script id="sakura_point_vsh" type="x-shader/x_vertex">
uniform mat4 uProjection;
uniform mat4 uModelview;
uniform vec3 uResolution;
uniform vec3 uOffset;
uniform vec3 uDOF; //x:focus distance, y:focus radius, z:max radius
uniform vec3 uFade; //x:start distance, y:half distance, z:near fade start
attribute vec3 aPosition;
attribute vec3 aEuler;
attribute vec2 aMisc; //x:size, y:fade
varying vec3 pposition;
varying float psize;
varying float palpha;
varying float pdist;
varying vec3 normX;
varying vec3 normY;
varying vec3 normZ;
varying vec3 normal;
varying float diffuse;
varying float specular;
varying float rstop;
varying float distancefade;
void main(void) {
vec4 pos = uModelview * vec4(aPosition + uOffset, 1.0);
gl_Position = uProjection * pos;
gl_PointSize = aMisc.x * uProjection[1][1] / -pos.z * uResolution.y * 0.5;
pposition = pos.xyz;
psize = aMisc.x;
pdist = length(pos.xyz);
palpha = smoothstep(0.0, 1.0, (pdist - 0.1) / uFade.z);
vec3 elrsn = sin(aEuler);
vec3 elrcs = cos(aEuler);
mat3 rotx = mat3(
1.0, 0.0, 0.0,
0.0, elrcs.x, elrsn.x,
0.0, -elrsn.x, elrcs.x
);
mat3 roty = mat3(
elrcs.y, 0.0, -elrsn.y,
0.0, 1.0, 0.0,
elrsn.y, 0.0, elrcs.y
);
mat3 rotz = mat3(
elrcs.z, elrsn.z, 0.0,
-elrsn.z, elrcs.z, 0.0,
0.0, 0.0, 1.0
);
mat3 rotmat = rotx * roty * rotz;
normal = rotmat[2];
mat3 trrotm = mat3(
rotmat[0][0], rotmat[1][0], rotmat[2][0],
rotmat[0][1], rotmat[1][1], rotmat[2][1],
rotmat[0][2], rotmat[1][2], rotmat[2][2]
);
normX = trrotm[0];
normY = trrotm[1];
normZ = trrotm[2];
const vec3 lit = vec3(0.6917144638660746, 0.6917144638660746, -0.20751433915982237);
float tmpdfs = dot(lit, normal);
if(tmpdfs < 0.0) {
normal = -normal;
tmpdfs = dot(lit, normal);
}
diffuse = 0.4 + tmpdfs;
vec3 eyev = normalize(-pos.xyz);
if(dot(eyev, normal) > 0.0) {
vec3 hv = normalize(eyev + lit);
specular = pow(max(dot(hv, normal), 0.0), 20.0);
}
else {
specular = 0.0;
}
rstop = clamp((abs(pdist - uDOF.x) - uDOF.y) / uDOF.z, 0.0, 1.0);
rstop = pow(rstop, 0.5);
distancefade = min(1.0, exp((uFade.x - pdist) * 0.69315 / uFade.y));
}
</script>
<script id="sakura_point_fsh" type="x-shader/x_fragment">
#ifdef GL_ES
precision highp float;
#endif
uniform vec3 uDOF; //x:focus distance, y:focus radius, z:max radius
uniform vec3 uFade; //x:start distance, y:half distance, z:near fade start
const vec3 fadeCol = vec3(0.08, 0.03, 0.06);
varying vec3 pposition;
varying float psize;
varying float palpha;
varying float pdist;
varying vec3 normX;
varying vec3 normY;
varying vec3 normZ;
varying vec3 normal;
varying float diffuse;
varying float specular;
varying float rstop;
varying float distancefade;
float ellipse(vec2 p, vec2 o, vec2 r) {
vec2 lp = (p - o) / r;
return length(lp) - 1.0;
}
void main(void) {
vec3 p = vec3(gl_PointCoord - vec2(0.5, 0.5), 0.0) * 2.0;
vec3 d = vec3(0.0, 0.0, -1.0);
float nd = normZ.z; //dot(-normZ, d);
if(abs(nd) < 0.0001) discard;
float np = dot(normZ, p);
vec3 tp = p + d * np / nd;
vec2 coord = vec2(dot(normX, tp), dot(normY, tp));
const float flwrsn = 0.258819045102521;
const float flwrcs = 0.965925826289068;
mat2 flwrm = mat2(flwrcs, -flwrsn, flwrsn, flwrcs);
vec2 flwrp = vec2(abs(coord.x), coord.y) * flwrm;
float r;
if(flwrp.x < 0.0) {
r = ellipse(flwrp, vec2(0.065, 0.024) * 0.5, vec2(0.36, 0.96) * 0.5);
}
else {
r = ellipse(flwrp, vec2(0.065, 0.024) * 0.5, vec2(0.58, 0.96) * 0.5);
}
if(r > rstop) discard;
vec3 col = mix(vec3(1.0, 0.8, 0.75), vec3(1.0, 0.9, 0.87), r);
float grady = mix(0.0, 1.0, pow(coord.y * 0.5 + 0.5, 0.35));
col *= vec3(1.0, grady, grady);
col *= mix(0.8, 1.0, pow(abs(coord.x), 0.3));
col = col * diffuse + specular;
col = mix(fadeCol, col, distancefade);
float alpha = (rstop > 0.001)? (0.5 - r / (rstop * 2.0)) : 1.0;
alpha = smoothstep(0.0, 1.0, alpha) * palpha;
gl_FragColor = vec4(col * 0.5, alpha);
}
</script>
<!-- effects -->
<script id="fx_common_vsh" type="x-shader/x_vertex">
uniform vec3 uResolution;
attribute vec2 aPosition;
varying vec2 texCoord;
varying vec2 screenCoord;
void main(void) {
gl_Position = vec4(aPosition, 0.0, 1.0);
texCoord = aPosition.xy * 0.5 + vec2(0.5, 0.5);
screenCoord = aPosition.xy * vec2(uResolution.z, 1.0);
}
</script>
<script id="bg_fsh" type="x-shader/x_fragment">
#ifdef GL_ES
precision highp float;
#endif
uniform vec2 uTimes;
varying vec2 texCoord;
varying vec2 screenCoord;
void main(void) {
vec3 col;
float c;
vec2 tmpv = texCoord * vec2(0.8, 1.0) - vec2(0.95, 1.0);
c = exp(-pow(length(tmpv) * 1.8, 2.0));
col = mix(vec3(0.02, 0.0, 0.03), vec3(0.96, 0.98, 1.0) * 1.5, c);
gl_FragColor = vec4(col * 0.5, 1.0);
}
</script>
<script id="fx_brightbuf_fsh" type="x-shader/x_fragment">
#ifdef GL_ES
precision highp float;
#endif
uniform sampler2D uSrc;
uniform vec2 uDelta;
varying vec2 texCoord;
varying vec2 screenCoord;
void main(void) {
vec4 col = texture2D(uSrc, texCoord);
gl_FragColor = vec4(col.rgb * 2.0 - vec3(0.5), 1.0);
}
</script>
<script id="fx_dirblur_r4_fsh" type="x-shader/x_fragment">
#ifdef GL_ES
precision highp float;
#endif
uniform sampler2D uSrc;
uniform vec2 uDelta;
uniform vec4 uBlurDir; //dir(x, y), stride(z, w)
varying vec2 texCoord;
varying vec2 screenCoord;
void main(void) {
vec4 col = texture2D(uSrc, texCoord);
col = col + texture2D(uSrc, texCoord + uBlurDir.xy * uDelta);
col = col + texture2D(uSrc, texCoord - uBlurDir.xy * uDelta);
col = col + texture2D(uSrc, texCoord + (uBlurDir.xy + uBlurDir.zw) * uDelta);
col = col + texture2D(uSrc, texCoord - (uBlurDir.xy + uBlurDir.zw) * uDelta);
gl_FragColor = col / 5.0;
}
</script>
<!-- effect fragment shader template -->
<script id="fx_common_fsh" type="x-shader/x_fragment">
#ifdef GL_ES
precision highp float;
#endif
uniform sampler2D uSrc;
uniform vec2 uDelta;
varying vec2 texCoord;
varying vec2 screenCoord;
void main(void) {
gl_FragColor = texture2D(uSrc, texCoord);
}
</script>
<!-- post processing -->
<script id="pp_final_vsh" type="x-shader/x_vertex">
uniform vec3 uResolution;
attribute vec2 aPosition;
varying vec2 texCoord;
varying vec2 screenCoord;
void main(void) {
gl_Position = vec4(aPosition, 0.0, 1.0);
texCoord = aPosition.xy * 0.5 + vec2(0.5, 0.5);
screenCoord = aPosition.xy * vec2(uResolution.z, 1.0);
}
</script>
<script id="pp_final_fsh" type="x-shader/x_fragment">
#ifdef GL_ES
precision highp float;
#endif
uniform sampler2D uSrc;
uniform sampler2D uBloom;
uniform vec2 uDelta;
varying vec2 texCoord;
varying vec2 screenCoord;
void main(void) {
vec4 srccol = texture2D(uSrc, texCoord) * 2.0;
vec4 bloomcol = texture2D(uBloom, texCoord);
vec4 col;
col = srccol + bloomcol * (vec4(1.0) + srccol);
col *= smoothstep(1.0, 0.0, pow(length((texCoord - vec2(0.5)) * 2.0), 1.2) * 0.5);
col = pow(col, vec4(0.45454545454545)); //(1.0 / 2.2)
gl_FragColor = vec4(col.rgb, 1.0);
gl_FragColor.a = 1.0;
}
</script>
<script>
var Vector3 = {};
var Matrix44 = {};
Vector3.create = function(x, y, z) {
return {'x':x, 'y':y, 'z':z};
};
Vector3.dot = function (v0, v1) {
return v0.x * v1.x + v0.y * v1.y + v0.z * v1.z;
};
Vector3.cross = function (v, v0, v1) {
v.x = v0.y * v1.z - v0.z * v1.y;
v.y = v0.z * v1.x - v0.x * v1.z;
v.z = v0.x * v1.y - v0.y * v1.x;
};
Vector3.normalize = function (v) {
var l = v.x * v.x + v.y * v.y + v.z * v.z;
if(l > 0.00001) {
l = 1.0 / Math.sqrt(l);
v.x *= l;
v.y *= l;
v.z *= l;
}
};
Vector3.arrayForm = function(v) {
if(v.array) {
v.array[0] = v.x;
v.array[1] = v.y;
v.array[2] = v.z;
}
else {
v.array = new Float32Array([v.x, v.y, v.z]);
}
return v.array;
};
Matrix44.createIdentity = function () {
return new Float32Array([1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0]);
};
Matrix44.loadProjection = function (m, aspect, vdeg, near, far) {
var h = near * Math.tan(vdeg * Math.PI / 180.0 * 0.5) * 2.0;
var w = h * aspect;
m[0] = 2.0 * near / w;
m[1] = 0.0;
m[2] = 0.0;
m[3] = 0.0;
m[4] = 0.0;
m[5] = 2.0 * near / h;
m[6] = 0.0;
m[7] = 0.0;
m[8] = 0.0;
m[9] = 0.0;
m[10] = -(far + near) / (far - near);
m[11] = -1.0;
m[12] = 0.0;
m[13] = 0.0;
m[14] = -2.0 * far * near / (far - near);
m[15] = 0.0;
};
Matrix44.loadLookAt = function (m, vpos, vlook, vup) {
var frontv = Vector3.create(vpos.x - vlook.x, vpos.y - vlook.y, vpos.z - vlook.z);
Vector3.normalize(frontv);
var sidev = Vector3.create(1.0, 0.0, 0.0);
Vector3.cross(sidev, vup, frontv);
Vector3.normalize(sidev);
var topv = Vector3.create(1.0, 0.0, 0.0);
Vector3.cross(topv, frontv, sidev);
Vector3.normalize(topv);
m[0] = sidev.x;
m[1] = topv.x;
m[2] = frontv.x;
m[3] = 0.0;
m[4] = sidev.y;
m[5] = topv.y;
m[6] = frontv.y;
m[7] = 0.0;
m[8] = sidev.z;
m[9] = topv.z;
m[10] = frontv.z;
m[11] = 0.0;
m[12] = -(vpos.x * m[0] + vpos.y * m[4] + vpos.z * m[8]);
m[13] = -(vpos.x * m[1] + vpos.y * m[5] + vpos.z * m[9]);
m[14] = -(vpos.x * m[2] + vpos.y * m[6] + vpos.z * m[10]);
m[15] = 1.0;
};
var timeInfo = {
'start':0, 'prev':0, // Date
'delta':0, 'elapsed':0 // Number(sec)
};
var gl;
var renderSpec = {
'width':0,
'height':0,
'aspect':1,
'array':new Float32Array(3),
'halfWidth':0,
'halfHeight':0,
'halfArray':new Float32Array(3)
};
renderSpec.setSize = function(w, h) {
renderSpec.width = w;
renderSpec.height = h;
renderSpec.aspect = renderSpec.width / renderSpec.height;
renderSpec.array[0] = renderSpec.width;
renderSpec.array[1] = renderSpec.height;
renderSpec.array[2] = renderSpec.aspect;
renderSpec.halfWidth = Math.floor(w / 2);
renderSpec.halfHeight = Math.floor(h / 2);
renderSpec.halfArray[0] = renderSpec.halfWidth;
renderSpec.halfArray[1] = renderSpec.halfHeight;
renderSpec.halfArray[2] = renderSpec.halfWidth / renderSpec.halfHeight;
};
function deleteRenderTarget(rt) {
gl.deleteFramebuffer(rt.frameBuffer);
gl.deleteRenderbuffer(rt.renderBuffer);
gl.deleteTexture(rt.texture);
}
function createRenderTarget(w, h) {
var ret = {
'width':w,
'height':h,
'sizeArray':new Float32Array([w, h, w / h]),
'dtxArray':new Float32Array([1.0 / w, 1.0 / h])
};
ret.frameBuffer = gl.createFramebuffer();
ret.renderBuffer = gl.createRenderbuffer();
ret.texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, ret.texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, w, h, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.bindFramebuffer(gl.FRAMEBUFFER, ret.frameBuffer);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, ret.texture, 0);
gl.bindRenderbuffer(gl.RENDERBUFFER, ret.renderBuffer);
gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, w, h);
gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, ret.renderBuffer);
gl.bindTexture(gl.TEXTURE_2D, null);
gl.bindRenderbuffer(gl.RENDERBUFFER, null);
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
return ret;
}
function compileShader(shtype, shsrc) {
var retsh = gl.createShader(shtype);
gl.shaderSource(retsh, shsrc);
gl.compileShader(retsh);
if(!gl.getShaderParameter(retsh, gl.COMPILE_STATUS)) {
var errlog = gl.getShaderInfoLog(retsh);
gl.deleteShader(retsh);
console.error(errlog);
return null;
}
return retsh;
}
function createShader(vtxsrc, frgsrc, uniformlist, attrlist) {
var vsh = compileShader(gl.VERTEX_SHADER, vtxsrc);
var fsh = compileShader(gl.FRAGMENT_SHADER, frgsrc);
if(vsh == null || fsh == null) {
return null;
}
var prog = gl.createProgram();
gl.attachShader(prog, vsh);
gl.attachShader(prog, fsh);
gl.deleteShader(vsh);
gl.deleteShader(fsh);
gl.linkProgram(prog);
if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
var errlog = gl.getProgramInfoLog(prog);
console.error(errlog);
return null;
}
if(uniformlist) {
prog.uniforms = {};
for(var i = 0; i < uniformlist.length; i++) {
prog.uniforms[uniformlist[i]] = gl.getUniformLocation(prog, uniformlist[i]);
}
}
if(attrlist) {
prog.attributes = {};
for(var i = 0; i < attrlist.length; i++) {
var attr = attrlist[i];
prog.attributes[attr] = gl.getAttribLocation(prog, attr);
}
}
return prog;
}
function useShader(prog) {
gl.useProgram(prog);
for(var attr in prog.attributes) {
gl.enableVertexAttribArray(prog.attributes[attr]);;
}
}
function unuseShader(prog) {
for(var attr in prog.attributes) {
gl.disableVertexAttribArray(prog.attributes[attr]);;
}
gl.useProgram(null);
}
var projection = {
'angle':60,
'nearfar':new Float32Array([0.1, 100.0]),
'matrix':Matrix44.createIdentity()
};
var camera = {
'position':Vector3.create(0, 0, 100),
'lookat':Vector3.create(0, 0, 0),
'up':Vector3.create(0, 1, 0),
'dof':Vector3.create(10.0, 4.0, 8.0),
'matrix':Matrix44.createIdentity()
};
var pointFlower = {};
var meshFlower = {};
var sceneStandBy = false;
var BlossomParticle = function () {
this.velocity = new Array(3);
this.rotation = new Array(3);
this.position = new Array(3);
this.euler = new Array(3);
this.size = 1.0;
this.alpha = 1.0;
this.zkey = 0.0;
};
BlossomParticle.prototype.setVelocity = function (vx, vy, vz) {
this.velocity[0] = vx;
this.velocity[1] = vy;
this.velocity[2] = vz;
};
BlossomParticle.prototype.setRotation = function (rx, ry, rz) {
this.rotation[0] = rx;
this.rotation[1] = ry;
this.rotation[2] = rz;
};
BlossomParticle.prototype.setPosition = function (nx, ny, nz) {
this.position[0] = nx;
this.position[1] = ny;
this.position[2] = nz;
};
BlossomParticle.prototype.setEulerAngles = function (rx, ry, rz) {
this.euler[0] = rx;
this.euler[1] = ry;
this.euler[2] = rz;
};
BlossomParticle.prototype.setSize = function (s) {
this.size = s;
};
BlossomParticle.prototype.update = function (dt, et) {
this.position[0] += this.velocity[0] * dt;
this.position[1] += this.velocity[1] * dt;
this.position[2] += this.velocity[2] * dt;
this.euler[0] += this.rotation[0] * dt;
this.euler[1] += this.rotation[1] * dt;
this.euler[2] += this.rotation[2] * dt;
};
function createPointFlowers() {
var prm = gl.getParameter(gl.ALIASED_POINT_SIZE_RANGE);
renderSpec.pointSize = {'min':prm[0], 'max':prm[1]};
var vtxsrc = document.getElementById("sakura_point_vsh").textContent;
var frgsrc = document.getElementById("sakura_point_fsh").textContent;
pointFlower.program = createShader(
vtxsrc, frgsrc,
['uProjection', 'uModelview', 'uResolution', 'uOffset', 'uDOF', 'uFade'],
['aPosition', 'aEuler', 'aMisc']
);
useShader(pointFlower.program);
pointFlower.offset = new Float32Array([0.0, 0.0, 0.0]);
pointFlower.fader = Vector3.create(0.0, 10.0, 0.0);
pointFlower.numFlowers = 1600;
pointFlower.particles = new Array(pointFlower.numFlowers);
pointFlower.dataArray = new Float32Array(pointFlower.numFlowers * (3 + 3 + 2));
pointFlower.positionArrayOffset = 0;
pointFlower.eulerArrayOffset = pointFlower.numFlowers * 3;
pointFlower.miscArrayOffset = pointFlower.numFlowers * 6;
pointFlower.buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, pointFlower.buffer);
gl.bufferData(gl.ARRAY_BUFFER, pointFlower.dataArray, gl.DYNAMIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, null);
unuseShader(pointFlower.program);
for(var i = 0; i < pointFlower.numFlowers; i++) {
pointFlower.particles[i] = new BlossomParticle();
}
}
function initPointFlowers() {
pointFlower.area = Vector3.create(20.0, 20.0, 20.0);
pointFlower.area.x = pointFlower.area.y * renderSpec.aspect;
pointFlower.fader.x = 10.0; //env fade start
pointFlower.fader.y = pointFlower.area.z; //env fade half
pointFlower.fader.z = 0.1; //near fade start
var PI2 = Math.PI * 2.0;
var tmpv3 = Vector3.create(0, 0, 0);
var tmpv = 0;
var symmetryrand = function() {return (Math.random() * 2.0 - 1.0);};
for(var i = 0; i < pointFlower.numFlowers; i++) {
var tmpprtcl = pointFlower.particles[i];
tmpv3.x = symmetryrand() * 0.3 + 0.8;
tmpv3.y = symmetryrand() * 0.2 - 1.0;
tmpv3.z = symmetryrand() * 0.3 + 0.5;
Vector3.normalize(tmpv3);
tmpv = 2.0 + Math.random() * 1.0;
tmpprtcl.setVelocity(tmpv3.x * tmpv, tmpv3.y * tmpv, tmpv3.z * tmpv);
tmpprtcl.setRotation(
symmetryrand() * PI2 * 0.5,
symmetryrand() * PI2 * 0.5,
symmetryrand() * PI2 * 0.5
);
tmpprtcl.setPosition(
symmetryrand() * pointFlower.area.x,
symmetryrand() * pointFlower.area.y,
symmetryrand() * pointFlower.area.z
);
tmpprtcl.setEulerAngles(
Math.random() * Math.PI * 2.0,
Math.random() * Math.PI * 2.0,
Math.random() * Math.PI * 2.0
);
tmpprtcl.setSize(0.9 + Math.random() * 0.1);
}
}
function renderPointFlowers() {
var PI2 = Math.PI * 2.0;
var limit = [pointFlower.area.x, pointFlower.area.y, pointFlower.area.z];
var repeatPos = function (prt, cmp, limit) {
if(Math.abs(prt.position[cmp]) - prt.size * 0.5 > limit) {
if(prt.position[cmp] > 0) {
prt.position[cmp] -= limit * 2.0;
}
else {
prt.position[cmp] += limit * 2.0;
}
}
};
var repeatEuler = function (prt, cmp) {
prt.euler[cmp] = prt.euler[cmp] % PI2;
if(prt.euler[cmp] < 0.0) {
prt.euler[cmp] += PI2;
}
};
for(var i = 0; i < pointFlower.numFlowers; i++) {
var prtcl = pointFlower.particles[i];
prtcl.update(timeInfo.delta, timeInfo.elapsed);
repeatPos(prtcl, 0, pointFlower.area.x);
repeatPos(prtcl, 1, pointFlower.area.y);
repeatPos(prtcl, 2, pointFlower.area.z);
repeatEuler(prtcl, 0);
repeatEuler(prtcl, 1);
repeatEuler(prtcl, 2);
prtcl.alpha = 1.0;//(pointFlower.area.z - prtcl.position[2]) * 0.5;
prtcl.zkey = (camera.matrix[2] * prtcl.position[0]
+ camera.matrix[6] * prtcl.position[1]
+ camera.matrix[10] * prtcl.position[2]
+ camera.matrix[14]);
}
pointFlower.particles.sort(function(p0, p1){return p0.zkey - p1.zkey;});
var ipos = pointFlower.positionArrayOffset;
var ieuler = pointFlower.eulerArrayOffset;
var imisc = pointFlower.miscArrayOffset;
for(var i = 0; i < pointFlower.numFlowers; i++) {
var prtcl = pointFlower.particles[i];
pointFlower.dataArray[ipos] = prtcl.position[0];
pointFlower.dataArray[ipos + 1] = prtcl.position[1];
pointFlower.dataArray[ipos + 2] = prtcl.position[2];
ipos += 3;
pointFlower.dataArray[ieuler] = prtcl.euler[0];
pointFlower.dataArray[ieuler + 1] = prtcl.euler[1];
pointFlower.dataArray[ieuler + 2] = prtcl.euler[2];
ieuler += 3;
pointFlower.dataArray[imisc] = prtcl.size;
pointFlower.dataArray[imisc + 1] = prtcl.alpha;
imisc += 2;
}
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
var prog = pointFlower.program;
useShader(prog);
gl.uniformMatrix4fv(prog.uniforms.uProjection, false, projection.matrix);
gl.uniformMatrix4fv(prog.uniforms.uModelview, false, camera.matrix);
gl.uniform3fv(prog.uniforms.uResolution, renderSpec.array);
gl.uniform3fv(prog.uniforms.uDOF, Vector3.arrayForm(camera.dof));
gl.uniform3fv(prog.uniforms.uFade, Vector3.arrayForm(pointFlower.fader));
gl.bindBuffer(gl.ARRAY_BUFFER, pointFlower.buffer);
gl.bufferData(gl.ARRAY_BUFFER, pointFlower.dataArray, gl.DYNAMIC_DRAW);
gl.vertexAttribPointer(prog.attributes.aPosition, 3, gl.FLOAT, false, 0, pointFlower.positionArrayOffset * Float32Array.BYTES_PER_ELEMENT);
gl.vertexAttribPointer(prog.attributes.aEuler, 3, gl.FLOAT, false, 0, pointFlower.eulerArrayOffset * Float32Array.BYTES_PER_ELEMENT);
gl.vertexAttribPointer(prog.attributes.aMisc, 2, gl.FLOAT, false, 0, pointFlower.miscArrayOffset * Float32Array.BYTES_PER_ELEMENT);
for(var i = 1; i < 2; i++) {
var zpos = i * -2.0;
pointFlower.offset[0] = pointFlower.area.x * -1.0;
pointFlower.offset[1] = pointFlower.area.y * -1.0;
pointFlower.offset[2] = pointFlower.area.z * zpos;
gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);
gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);
pointFlower.offset[0] = pointFlower.area.x * -1.0;
pointFlower.offset[1] = pointFlower.area.y * 1.0;
pointFlower.offset[2] = pointFlower.area.z * zpos;
gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);
gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);
pointFlower.offset[0] = pointFlower.area.x * 1.0;
pointFlower.offset[1] = pointFlower.area.y * -1.0;
pointFlower.offset[2] = pointFlower.area.z * zpos;
gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);
gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);
pointFlower.offset[0] = pointFlower.area.x * 1.0;
pointFlower.offset[1] = pointFlower.area.y * 1.0;
pointFlower.offset[2] = pointFlower.area.z * zpos;
gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);
gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);
}
pointFlower.offset[0] = 0.0;
pointFlower.offset[1] = 0.0;
pointFlower.offset[2] = 0.0;
gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);
gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);
gl.bindBuffer(gl.ARRAY_BUFFER, null);
unuseShader(prog);
gl.enable(gl.DEPTH_TEST);
gl.disable(gl.BLEND);
}
function createEffectProgram(vtxsrc, frgsrc, exunifs, exattrs) {
var ret = {};
var unifs = ['uResolution', 'uSrc', 'uDelta'];
if(exunifs) {
unifs = unifs.concat(exunifs);
}
var attrs = ['aPosition'];
if(exattrs) {
attrs = attrs.concat(exattrs);
}
ret.program = createShader(vtxsrc, frgsrc, unifs, attrs);
useShader(ret.program);
ret.dataArray = new Float32Array([
-1.0, -1.0,
1.0, -1.0,
-1.0, 1.0,
1.0, 1.0
]);
ret.buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, ret.buffer);
gl.bufferData(gl.ARRAY_BUFFER, ret.dataArray, gl.STATIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, null);
unuseShader(ret.program);
return ret;
}
function useEffect(fxobj, srctex) {
var prog = fxobj.program;
useShader(prog);
gl.uniform3fv(prog.uniforms.uResolution, renderSpec.array);
if(srctex != null) {
gl.uniform2fv(prog.uniforms.uDelta, srctex.dtxArray);
gl.uniform1i(prog.uniforms.uSrc, 0);
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, srctex.texture);
}
}
function drawEffect(fxobj) {
gl.bindBuffer(gl.ARRAY_BUFFER, fxobj.buffer);
gl.vertexAttribPointer(fxobj.program.attributes.aPosition, 2, gl.FLOAT, false, 0, 0);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
}
function unuseEffect(fxobj) {
unuseShader(fxobj.program);
}
var effectLib = {};
function createEffectLib() {
var vtxsrc, frgsrc;
var cmnvtxsrc = document.getElementById("fx_common_vsh").textContent;
frgsrc = document.getElementById("bg_fsh").textContent;
effectLib.sceneBg = createEffectProgram(cmnvtxsrc, frgsrc, ['uTimes'], null);
frgsrc = document.getElementById("fx_brightbuf_fsh").textContent;
effectLib.mkBrightBuf = createEffectProgram(cmnvtxsrc, frgsrc, null, null);
frgsrc = document.getElementById("fx_dirblur_r4_fsh").textContent;
effectLib.dirBlur = createEffectProgram(cmnvtxsrc, frgsrc, ['uBlurDir'], null);
vtxsrc = document.getElementById("pp_final_vsh").textContent;
frgsrc = document.getElementById("pp_final_fsh").textContent;
effectLib.finalComp = createEffectProgram(vtxsrc, frgsrc, ['uBloom'], null);
}
function createBackground() {
}
function initBackground() {
}
function renderBackground() {
gl.disable(gl.DEPTH_TEST);
useEffect(effectLib.sceneBg, null);
gl.uniform2f(effectLib.sceneBg.program.uniforms.uTimes, timeInfo.elapsed, timeInfo.delta);
drawEffect(effectLib.sceneBg);
unuseEffect(effectLib.sceneBg);
gl.enable(gl.DEPTH_TEST);
}
var postProcess = {};
function createPostProcess() {
}
function initPostProcess() {
}
function renderPostProcess() {
gl.enable(gl.TEXTURE_2D);
gl.disable(gl.DEPTH_TEST);
var bindRT = function (rt, isclear) {
gl.bindFramebuffer(gl.FRAMEBUFFER, rt.frameBuffer);
gl.viewport(0, 0, rt.width, rt.height);
if(isclear) {
gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
}
};
bindRT(renderSpec.wHalfRT0, true);
useEffect(effectLib.mkBrightBuf, renderSpec.mainRT);
drawEffect(effectLib.mkBrightBuf);
unuseEffect(effectLib.mkBrightBuf);
for(var i = 0; i < 2; i++) {
var p = 1.5 + 1 * i;
var s = 2.0 + 1 * i;
bindRT(renderSpec.wHalfRT1, true);
useEffect(effectLib.dirBlur, renderSpec.wHalfRT0);
gl.uniform4f(effectLib.dirBlur.program.uniforms.uBlurDir, p, 0.0, s, 0.0);
drawEffect(effectLib.dirBlur);
unuseEffect(effectLib.dirBlur);
bindRT(renderSpec.wHalfRT0, true);
useEffect(effectLib.dirBlur, renderSpec.wHalfRT1);
gl.uniform4f(effectLib.dirBlur.program.uniforms.uBlurDir, 0.0, p, 0.0, s);
drawEffect(effectLib.dirBlur);
unuseEffect(effectLib.dirBlur);
}
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
gl.viewport(0, 0, renderSpec.width, renderSpec.height);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
useEffect(effectLib.finalComp, renderSpec.mainRT);
gl.uniform1i(effectLib.finalComp.program.uniforms.uBloom, 1);
gl.activeTexture(gl.TEXTURE1);
gl.bindTexture(gl.TEXTURE_2D, renderSpec.wHalfRT0.texture);
drawEffect(effectLib.finalComp);
unuseEffect(effectLib.finalComp);
gl.enable(gl.DEPTH_TEST);
}
var SceneEnv = {};
function createScene() {
createEffectLib();
createBackground();
createPointFlowers();
createPostProcess();
sceneStandBy = true;
}
function initScene() {
initBackground();
initPointFlowers();
initPostProcess();
camera.position.z = pointFlower.area.z + projection.nearfar[0];
projection.angle = Math.atan2(pointFlower.area.y, camera.position.z + pointFlower.area.z) * 180.0 / Math.PI * 2.0;
Matrix44.loadProjection(projection.matrix, renderSpec.aspect, projection.angle, projection.nearfar[0], projection.nearfar[1]);
}
function renderScene() {
Matrix44.loadLookAt(camera.matrix, camera.position, camera.lookat, camera.up);
gl.enable(gl.DEPTH_TEST);
gl.bindFramebuffer(gl.FRAMEBUFFER, renderSpec.mainRT.frameBuffer);
gl.viewport(0, 0, renderSpec.mainRT.width, renderSpec.mainRT.height);
gl.clearColor(0.005, 0, 0.05, 0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
renderBackground();
renderPointFlowers();
renderPostProcess();
}
function onResize(e) {
makeCanvasFullScreen(document.getElementById("sakura"));
setViewports();
if(sceneStandBy) {
initScene();
}
}
function setViewports() {
renderSpec.setSize(gl.canvas.width, gl.canvas.height);
gl.clearColor(0.2, 0.2, 0.5, 1.0);
gl.viewport(0, 0, renderSpec.width, renderSpec.height);
var rtfunc = function (rtname, rtw, rth) {
var rt = renderSpec[rtname];
if(rt) deleteRenderTarget(rt);
renderSpec[rtname] = createRenderTarget(rtw, rth);
};
rtfunc('mainRT', renderSpec.width, renderSpec.height);
rtfunc('wFullRT0', renderSpec.width, renderSpec.height);
rtfunc('wFullRT1', renderSpec.width, renderSpec.height);
rtfunc('wHalfRT0', renderSpec.halfWidth, renderSpec.halfHeight);
rtfunc('wHalfRT1', renderSpec.halfWidth, renderSpec.halfHeight);
}
function render() {
renderScene();
}
var animating = true;
function toggleAnimation(elm) {
animating ^= true;
if(animating) animate();
if(elm) {
elm.innerHTML = animating? "Stop":"Start";
}
}
function stepAnimation() {
if(!animating) animate();
}
function animate() {
var curdate = new Date();
timeInfo.elapsed = (curdate - timeInfo.start) / 1000.0;
timeInfo.delta = (curdate - timeInfo.prev) / 1000.0;
timeInfo.prev = curdate;
if(animating) requestAnimationFrame(animate);
render();
}
function makeCanvasFullScreen(canvas) {
var b = document.body;
var d = document.documentElement;
fullw = Math.max(b.clientWidth , b.scrollWidth, d.scrollWidth, d.clientWidth);
fullh = Math.max(b.clientHeight , b.scrollHeight, d.scrollHeight, d.clientHeight);
canvas.width = fullw;
canvas.height = fullh;
}
window.addEventListener('load', function(e) {
var canvas = document.getElementById("sakura");
try {
makeCanvasFullScreen(canvas);
gl = canvas.getContext('experimental-webgl');
} catch(e) {
alert("WebGL not supported." + e);
console.error(e);
return;
}
window.addEventListener('resize', onResize);
setViewports();
createScene();
initScene();
timeInfo.start = new Date();
timeInfo.prev = timeInfo.start;
animate();
});
(function (w, r) {
w['r'+r] = w['r'+r] || w['webkitR'+r] || w['mozR'+r] || w['msR'+r] || w['oR'+r] || function(c){ w.setTimeout(c, 1000 / 60); };
})(window, 'equestAnimationFrame');
</script>
</BODY>
</HTML>
11. 价格表
效果展示：
源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="css/style.css"/>
<title>Document</title></head>
<body>
<div class="price-table">
<div class="price-card"><h2 class="price-card__title">Basic</h2>
<div class="price-card__ribbon"><span
class="price-card__ribbon-text">¥3.</span class="price-card__ribbon-text-highlight">99</span> </span>
</div>
<div class="price-card__info"><p> 1 User</p>
<p> 1 Project</p>
<p> 2GB Disk Space</p>
<p> Standard Support</p></div>
</div>
<div class="price-card price-card--highlight"><h2 class="price-card__title">Advanced</h2>
<div class="price-card__ribbon"><span class="price-card__ribbon-text">¥8.<span
class="price-card__ribbon-text-highlight">99</span> </span></div>
<div class="price-card__info"><p>25 Users</p>
<p>Unlimited Projects</p>
<p>10GB Disk Space</p>
<p>Standard Support</p></div>
</div>
<div class="price-card"><h2 class="price-card__title">Premium</h2>
<div class="price-card__ribbon"><span class="price-card__ribbon-text"></span> ¥15.<span
class="price-card__ribbon-text-highlight">99</span></span > </div>
<div class="price-card__info"><p>100 Users</p>
<p>Unlimited Projects</p>
<p>50GB Disk Space</p>
<p>Premium Support</p></div>
</div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--c-ribbon: #2f2f2f;
--c-ribbon-shadow: #666;
--c-ribbon-text: #efefef;
--c-title: #2f2f2f;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #ddd;
}
.price-table {
position: relative;
display: flex;
justify-content: center;
align-items: center;
user-select: none;
}
.price-card {
color: #555;
background-color: #fff;
width: 25%;
aspect-ratio: 9/14.5;
min-width: 12rem;
max-width: 15rem;
text-align: center;
margin: 0 2rem;
margin: 0.5rem 0 1rem;
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
transition: 0.5s;
cursor: pointer;
}
.price-card:hover {
transform: translateY(-20px);
}
.price-card__ribbon {
position: relative;
padding: 2rem 1rem;
margin: 2rem --0 .8rem 2rem;
background-color: var(--c-ribbon);
transform: skew(0, -10deg);
border-radius: 3px 0;
box-shadow: 0 2rem 1.2rem -2rem var(--c-ribbon-shadow);
}
.price-card__ribbon::before, .price-card__ribbon::after {
position: absolute;
content: "";
width: 0;
height: 0;
border-style: solid;
}
.price-card__ribbon::before {
border-width: 0 0.8rem 0.8rem 0;
border-color: transparent var(--c-ribbon-shadow) transparent transparent;
left: 0;
bottom: 0;
transform: translateY(100%);
}
.price-card__ribbon::after {
border-width: 0.8rem 0 0 0.8rem;
border-color: transparent transparent transparent var(--c-ribbon-shadow);
right: 0;
top: 0;
transform: translateY(-100%);
}
.price-card__ribbon-text {
color: var(--c-ribbon-text);
font-size: 2rem;
line-height: 1.4;
font-weight: 700;
display: block;
transform: skew(0, 10deg);
}
.price-card__ribbon-text-highlight {
color: yellow;
font-size: 0.5em;
}
.price-card__title {
color: var(--c-title);
}
.price-card--highlight {
--c-ribbon: #f94289;
--c-ribbon-text: #fff;
--c-ribbon-shadow: #ff619b;
--c-title: #f94289;
box-shadow: 0 0 3rem -1.5rem rgba(0, 0, 0, 0.5);
}
.price-card__info {
display: flex;
flex-direction: column;
gap: 10px;
}
.price-card__info p {
font-size: 0.4em;
}
12.按钮样式
动态按钮
源码：
/* 按钮样式 */
.button {
display: inline-block;
position: relative;
z-index: 1;
overflow: hidden;
text-decoration: none;
font-family: sans-serif;
font-weight: 600;
font-size: 2em;
padding: 0.75em 1em;
color: blue;
border: 0.15em solid blue;
border-radius: 1em;
transition: 4s;
transform: scale(0.5);
}
.button:before, .button:after {
content: "";
position: absolute;
top: -1.5em;
z-index: -1;
width: 200%;
aspect-ratio: 1;
border: none;
border-radius: 40%;
background-color: rgba(0, 0, 255, 0.25);
transition: 4s;
}
.button:before {
left: -80%;
transform: translate3d(0, 5em, 0) rotate(-340deg);
}
.button:after {
right: -80%;
transform: translate3d(0, 5em, 0) rotate(390deg);
}
.button:hover .button:focus {
color: white;
}
.button:hover:before, .button:hover:after, .button:focus:before, .button:focus::after {
transform: none;
background-color: rgba(0, 0, 255, 0.75);
}
13.月亮开关按钮
效果展示：
源码：略
14.JS实现全屏覆盖导航栏
效果展示：
源码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>全屏导航栏菜单</title>
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style> * { /* 初始化 取消页面的内外边距 */
margin: 0;
padding: 0; /* 这个是告诉浏览器：你想要设置的边框和内边距的值是包含在总宽高内的 */
box-sizing: border-box;
}
.con { /* 弹性布局 水平、垂直居中 */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center; /* 100%的窗口高度 */
height: 100vh; /* 行高 */
line-height: 80px;
font-size: 30px; /* 字间距 */
letter-spacing: 15px;
}
.wrapper { /* 固定定位 窗口滚动也不会移动 */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%; /* 渐变背景 */
background: linear-gradient(200deg, #91ff00, #ffbb00); /* 将元素剪切为一个圆形【25px表示圆的直径】【calc(100% - 45px) 45px表示圆心】 */
clip-path: circle(25px at calc(100% - 45px) 45px); /* 过渡动画 */
transition: all 0.3s ease-in-out;
}
.menu-btn {
position: absolute;
right: 20px;
top: 20px;
z-index: 2; /* 渐变背景 */
background: linear-gradient(200deg, #f02f86, #00e1ff);
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
border-radius: 50%;
color: #fff;
font-size: 20px;
cursor: pointer; /* 这里也加个过渡动画 */
transition: all 0.3s ease;
}
/* 把复选框隐藏 */
#menu_btn {
display: none;
}
#menu_btn:checked ~ .wrapper { /* 将元素剪切为一个圆形 75%表示圆的直径 */
clip-path: circle(75%);
}
#menu_btn:checked ~ .menu-btn {
color: #d576ba;
background: #fff;
}
/* 当复选框为选中态时，改变图标 */
#menu_btn:checked ~ .menu-btn i::before {
content: "\f00d";
}
.wrapper ul {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
list-style: none;
text-align: center;
}
.wrapper ul li {
margin: 30px 0px;
}
.wrapper ul li a {
color: #fff;
text-decoration: none;
font-size: 30px;
font-weight: 500;
padding: 5px 50px;
position: relative;
line-height: 50px;
}
.wrapper ul li a::after {
content: "";
position: absolute;
width: 100%;
height: 50px;
background: #fff;
z-index: -1;
border-radius: 50px;
left: 0px;
transform: scaleY(0); /* 加个动画过渡 */
transition: transform 0.3s ease;
}
.wrapper ul li a:hover::after {
transform: scaleY(1);
}
.wrapper ul li a:hover {
color: #d576ba;
} </style>
</head>
<body><input type="checkbox" id="menu_btn"> <label class="menu-btn" for="menu_btn"> <i class="fa fa-bars"
aria-hidden="true"></i> </label>
<div class="con"><h1>全屏覆盖导航栏</h1></div>
<div class="wrapper">
<ul class="menu">
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">用户反馈</a></li>
</ul>
</div>
</body>
</html>
