毛玻璃效果
<style>
body{
display: flex;
justify-content: center;
background:linear-gradient(
to left,
rgb(238, 92, 92),
rgb(154, 127, 250)) ;
}
*{
padding: 0;
margin: 0;
}
.a{
position: relative;
width: 400px;
height: 250px;
top: 150px;
}
.b{
position: absolute;
width: 400px;
height: 250px;
border-radius: 20px;
background: linear-gradient(
to right bottom,
rgba(255,255,255,.6),
rgba(255,255,255,.3),
rgba(255,255,255,.2)
);
backdrop-filter: blur(11px);
border-top: 1px solid rgba(255,255,255,.8);
border-left: 1px solid rgba(255,255,255,.8);
}
.b span{
font: 900 50px '';
position: absolute;
top: 10px;
left: 20px;
color: rgba(0,0,0,.5);
text-shadow: 1px 1px 3px rgba(255,255,255,.7);
}
.b p{
font: 900 25px '';
position: absolute;
bottom: 20px;
right: 20px;
color: rgba(255,255,255,.3);
letter-spacing: 3px;
}
.c{
width: 160px;
height: 160px;
border-radius: 50%;
background-color: rgb(240,160,0);
position: absolute;
top: 140px;
left: -40px;
z-index: -99;
}
.d{
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #77fdd7;
position: absolute;
top: -50px;
left: 260px;
z-index: -99;
}
</style>
</head>
<body>
<div class="a">
<div class="b">
<span>OSVUE</span>
<P>2020_9_9/lusifer</P>
</div>
<div class="c"></div>
<div class="d"></div>
</div>
</body>
登录效果
<style>
body {
display: flex;
justify-content: center;
background-image: linear-gradient(to left, #fd79a8, #a29bfe);
}
.a{
background-color: #fff;
width: 350px;
height: 500px;
position: relative;
display: flex;
border-radius: 10px;
justify-content: center;
align-items: center;
top: 100px;
}
.b{
width: 300px;
height: 450px;
overflow: hidden;
}
.c{
font: 900 40px '';
margin: 60px 0;
text-align: center;
letter-spacing: 5px;
}
.e{
width: 100%;
margin-bottom: 20px;
outline: none;
border: 0;
padding: 10px;
border-bottom: 2px solid rgb(60,60,70);
font: 900 16px '';
}
.f{
text-align: center;
height: 24px;
padding: 12px;
font: 900 20px '';
border-radius: 10px;
background-image: linear-gradient(to left, #fd79a8, #a29bfe);
}
.g{
margin: 33px;
}
</style>
</head>
<body>
<div class="a">
<div class="b">
<p class="c">Login</p>
<div class="d">
<input type="text" class="e" placeholder="账号">
<input type="password" class="e" placeholder="密码">
<div class="f">GO</div>
</div>
<div class="g">Forget the password?<a href="#">Retrieve</a></div>
</div>
</div>
</body>
轮播图
<style>
* {
padding: 0;
margin: 0;
}
body {
background-color: rgba(206, 182, 182, 0.637);
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
}
.a{
position: relative;
width: 650px;
display: flex;
justify-content: space-evenly;
}
.b{
width: 400px;
height: 500px;
transition: .4s;
background-size: cover;
}
.c{
width: 200px;
height: 500px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.d{
position: relative;
width: 200px;
height: 90px;
right: 0;
transition:.5s;
overflow: hidden;
}
.d img{
position: absolute;
width: 200px;
transform: translate(0,-50px);
transition: .5s;
right: 0;
}
.d.dd{
opacity: 0;
right: 250px;
}
.d:hover img{
opacity: 0;
right: 250px;
}
</style>
</head>
<body>
<div class="a">
<div class="b"></div>
<div class="c">
<div class="d dd"><img src="1.jpg" alt=""></div>
<div class="d"><img src="2.jpg" alt=""></div>
<div class="d"><img src="3.jpg" alt=""></div>
<div class="d"><img src="4.jpg" alt=""></div>
<div class="d"><img src="5.jpg" alt=""></div>
</div>
</div>
<script>
let b = document.querySelector(".b")
let d = document.getElementsByClassName("d")
let time
let index = 0
let a = function(){
for(let i = 0;i < d.length; i++){
d[i].className = "d"
}
}
let aa = function(){
a()
d[index].className = "d dd"
}
function ts(){
time = setInterval(function(){
aa()
index++
b.style.backgroundImage = "url('"+[index]+".jpg')"
if(index == 5){
index=0
}
},1500);
}
for(let i = 0;i < d.length;i++){
d[i].onmousemove = function(){
b.style.backgroundImage = "url('"+[i + 1]+".jpg')"
a()
clearInterval(time)
index = i + 1
ts()
}
}
ts()
</script>
鼠标监听
document.addEventListener('mousemove',e => {
const item = document.querySelectorAll(".item")
const mouseX = e.clientX
const mouseY = e.clientY
item.forEach(sqr => {
const sqrX = sqr.offsetLeft
const sqrY = sqr.offsetTop
const diffX = mouseX -sqrX
const diffY = mouseY -sqrY
const radians = Math.atan2(diffY,diffX)
const angle = radians * 180 / Math.PI
sqr.style.transform = `rotate(${angle}deg)`
})
})
滑动侧边栏
<style>
* {
list-style-type: none;
padding: 0;
margin: 0;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #d3dafa;
}
.shell{
position:fixed;
width: 280px;
height: 650px;
background-color: #8a98c9;
}
.buttons{
margin: 60px 0;
color: #fff;
}
.li{
letter-spacing: 2px;
font: 600 17px '';
padding: 16px 52px;
transition: .3s;
}
.li::after{
content: '';
position: absolute;
left: 20px;
margin-top: -22px;
display: block;
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 50%;
}
.buttons>li:hover{
background-color: #beb5df;
}
.li ul{
width: 0;
height: 530px;
padding: 60px 0;
position: absolute;
top: 0;
right: 0;
overflow: hidden;
background-color: #59699b;
transition: .3s;
}
.li ul li{
padding: 16px 24px;
transition: .3s;
}
.li:hover ul{
width: 50%;
}
.li ul li:hover{
background-color: #828eb9;
}
</style>
</head>
<body>
<nav class="shell">
<ul class="buttons">
<li class="li">
management
<ul>
<li>Sold baby</li>
<li>Evaluation</li>
<li>Shopkeeper</li>
<li>Management</li>
</ul>
</li>
<li class="li">
logisitcs
<ul>
<li>Warehouse </li>
<li>deliver goods</li>
<li>stock </li>
<li>mail </li>
<li>return goods </li>
</ul>
</li>
<li class="li">
treasure
<ul>
<li>Release baby </li>
<li>Posting Details</li>
<li>Shop decoration</li>
</ul>
</li>
<li class="li">
financial service
<ul>
<li>payment </li>
<li>Loan goods </li>
<li>Collection in advance</li>
</ul>
</li>
</ul>
</nav>
</body>
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: space-evenly;
background: rgb(156, 156, 248);
}
.shell {
position: relative;
perspective: 700px;
transform-style: preserve-3d;
}
.card {
height: 260px;
width: 460px;
transform: translateX(10px) rotateY(25deg) rotateX(10deg);
background-color: rgba(250, 200, 30, .8);
display: flex;
align-items: center;
}
h1 {
font-size: 70px;
}
.card .word {
background-color: #000;
line-height: 1;
color: rgba(250, 200, 30, 1);
padding: 0 10px;
margin: 0 15px 0 30px;
display: inline-flex;
}
.shell::before {
content: '';
height: 260px;
width: 460px;
position: absolute;
margin-top: -9px;
margin-left: -9px;
border: 9px solid #000;
transform: translateX(-60px) rotateY(-30deg) rotateX(15deg) scale(1.03);
}
.shell:hover>div,
.shell:hover::before{
transform: none;
}
.shell>div,
.shell::before{
transition: .3s;
}
</style>
</head>
<body>
<div class="shell">
<div class="card">
<h1><span class="word">OS</span>VUE</h1>
</div>
</div>
</body>
grid布局键盘
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.keyboard-base{
min-width: 1085px;
padding: 20px;
background-color: rgb(56, 56, 56);
border-radius: 10px;
display: grid;
grid-template-columns: repeat(30,30px);
grid-template-rows: repeat (5,60px);
grid-gap: 5px;
}
.key{
background-color: rgb(243, 243, 243);
border-radius: 5px;
grid-column: span 2;
font: 500 20px '';
text-align: center;
padding: 17px;
border: 2px solid black;
}
.key:hover{
box-shadow: inset 0 0 7px rgba(0,0,0,0.8);
}
.color{
background-color: rgb(180, 180, 180);
}
.delete{
grid-column: span 4;
}
.tab{
grid-column: span 3;
}
.backslash{
grid-column: span 3;
}
.capslock{
grid-column: span 4;
}
.return{
background-color: rgb(250, 140, 70);
grid-column: span 4;
}
.leftshift{
grid-column: span 5;
}
.rightshift{
grid-column: span 5;
}
.leftctrl{
grid-column: span 3;
}
.command{
grid-column: span 3;
font-size: 14px;
}
.space{
background-color: rgb(250, 140, 70);
grid-column: span 13;
}
</style>
<body>
<div class="keyboard-base">
<div class="key color">~</div>
<div class="key">1</div>
<div class="key">2</div>
<div class="key">3</div>
<div class="key">4</div>
<div class="key">5</div>
<div class="key">6</div>
<div class="key">7</div>
<div class="key">8</div>
<div class="key">9</div>
<div class="key">0</div>
<div class="key">-</div>
<div class="key">+</div>
<div class="key delete color">Delete</div>
<div class="key tab color">Tab</div>
<div class="key">Q</div>
<div class="key">w</div>
<div class="key">E</div>
<div class="key">R</div>
<div class="key">T</div>
<div class="key">Y</div>
<div class="key">U</div>
<div class="key">I</div>
<div class="key">O</div>
<div class="key">P</div>
<div class="key">[</div>
<div class="key">]</div>
<div class="key backslash color">\</div>
<div class="key capslock color">CapsLock</div>
<div class="key">A</div>
<div class="key">S</div>
<div class="key">D</div>
<div class="key">F</div>
<div class="key">G</div>
<div class="key">H</div>
<div class="key">J</div>
<div class="key">K</div>
<div class="key">L</div>
<div class="key">;</div>
<div class="key">'</div>
<div class="key return">Return</div>
<div class="key leftshift color">Shift</div>
<div class="key">Z</div>
<div class="key">X</div>
<div class="key">C</div>
<div class="key">V</div>
<div class="key">B</div>
<div class="key">N</div>
<div class="key">M</div>
<div class="key">,</div>
<div class="key">.</div>
<div class="key">/</div>
<div class="key rightshift color">Shift</div>
<div class="key leftctrl color">Ctrl</div>
<div class="key color">Alt</div>
<div class="key command color">Command</div>
<div class="key space">Space</div>
<div class="key command color">command</div>
<div class="key color">Alt</div>
<div class="key color">Ctrl</div>
<div class="key color">Fn</div>
</div>
</body>
<style>
* {
padding: 0;
margin: 0;
}
.shell{
height: 100vh;
overflow-x: hidden;
perspective: 3px;
}
.shell div{
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-style: 30px;
letter-spacing: 2px;
}
.image{
transform: translateZ(-1px) scale(1.6);
background-size: cover;
height: 100vh;
z-index: -1;
}
.text{
height: 50vh;
background-color: #fff;
}
.text h1{
color: #000;
}
.heading{
z-index: -1;
transform: translateY(-30vh) translateZ(1px);
color: #fff;
font-size: 30px;
}
</style>
<body>
<div class="shell">
<div class="image" style="background-image: url('./1.jpg');"></div>
<div class="heading">
<h1>When you are confused</h1>
</div>
<div class="text">
<h1>Set goals in your mind</h1>
</div>
<div class="image" style="background-image: url('./2.jpg');"></div>
<div class="heading">
<h1>When you're down</h1>
</div>
<div class="text">
<h1>Try to wake up the beast in your heart</h1>
</div>
<div class="image" style="background-image: url('./3.jpg');"></div>
<div class="heading">
<h1>When prople leave you</h1>
</div>
<div class="text">
<h1>It's time to start your season</h1>
</div>
<div class="image" style="background-image: url('./4.jpg');"></div>
<div class="heading">
<h1>Come on,stranger.</h1>
</div>
</div>
</body>
伪元素应用登录
<style>
* {
padding: 0;
margin: 0;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-image: linear-gradient(to bottom right, #bdbef8, #b9a3fd);
}
.shell{
width: 640px;
height: 320px;
display: flex;
}
.box-left{
background-color: #fff;
height: 280px;
top: 20px;
position: relative;
width: 50%;
}
.box-left h2{
font: 900 50px '';
margin: 50px 40px 40px;
}
.box-left span{
display: block;
color: #999;
font-style: 14px;
margin: 40px;
}
.box-right{
background-color: #474a59;
box-shadow: 0 0 40px 16px rgba(0,0,0,.2);
color: #f1f1f2;
width: 50%;
}
.form{
margin: 40px;
position: absolute;
}
label{
color: #c2c2c5;
display: block;
font-size: 14px;
height: 16px;
margin-top: 20px;
margin-bottom: 5px;
position: relative;
}
input{
background: transparent;
border: 0;
color: #f2f2f2;
font-style: 20px;
height: 30px;
line-height: 30px;
width: 100%;
outline: none !important;
}
label::before{
content: '';
display: block;
position: absolute;
top: 52px;
width: 100%;
height: 3px;
background-image: linear-gradient(to right,#44ffff,#b888ff);
}
#submit{
color: #fff;
margin-top: 40px;
width: 100px;
height: 35px;
background-color: rgba(255,255,255,.1);
border-radius: 20px;
float: right;
transition: .3s;
}
#submit:hover{
letter-spacing: 2px;
color: #000;
background-color: #fff;
}
</style>
</head>
<body>
<div class="shell">
<div class="box-left">
<h2>Login</h2>
<span>Just log in, you can enjoy more services, interact with me here, and publish your opinions</span>
</div>
<div class="box-right">
<div class="form">
<label for="email">Email</label>
<input type="email" id="email">
<label for="password">Password</label>
<input type="password" id="password">
<input type="submit" id="submit" value="Submit">
</div>
</div>
</div>
</body>
