最近跟着小破站的视频做了一些前端样式的小练习，都是一些简单的案例，但别说做出来的那一刻还真是挺有成就感的
滚轮事件
滚动前：
滚动后：
代码展示：
<!DOCTYPE html>
<html>
<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>一条代码咸鱼的小练习</title>
<style>
html,
body {
margin: 0;
padding: 0;
height: 200vh;
overflow-x: hidden;
}
.background{
background-image: url(http://5b0988e595225.cdn.sohucs.com/images/20181123/c45df8f757b5463cbb7b3fceaab44951.jpg);
background-size: cover;
background-position: 50% 50%;
height: 200vh;
font: 900 28rem '';
line-height: 130vh;
/*按区域向外裁剪*/
-webkit-background-clip: text;
/*将文字透明镂空*/
-webkit-text-fill-color:transparent;
position: relative;
text-align: center;
overflow:hidden;
}
.background::before{
content: '';
background-size: cover;
background-image: inherit;
background-position: 50% 50%;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -99;
}
h1{
position: absolute;
text-align: center;
width: 100%;
letter-spacing:10px;
color: #fff;
}
h2{
position: absolute;
letter-spacing: 2px;
top: 120vh;
width: 70%;
color: #fff;
left: 50%;
transform: translateX(-50%);
padding: 50px;
background-color: rgba(0,0,0,.3);
}
</style>
</head>
<body>
<h1>一条代码咸鱼</h1>
<div class="background"><span>断桥</span></div>
<h2>中南大桥突然垮塌，桥墩中一副人骨赫然惊现。死者女儿闻晓雨（马思纯 饰）为追查父亲死因，得到一个自称孟超（王俊凯 饰）的男孩协助，并携手走上探寻真相与复仇之路。渐渐地，他们发现，闻晓雨的养父朱方正（范伟 饰）背后竟然隐藏着惊天的秘密……</h2>
<script>
const background = document.querySelector(".background")
document.addEventListener('scroll', () => {
const scrollY = window.scrollY
if (scrollY !== 0) {
background.style.backgroundPosition = `calc(30% + ${scrollY}px) calc(30% + ${scrollY}px)`
}else{
background.style.backgroundPosition = ''
}
})
</script>
</body>
</html>飞奔而来的小碎片
样式图
代码展示
html文件：
<!DOCTYPE html>
<html>
<head>
<title>Background Mini Pictures</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section>
<h2>Karry On</h2>
<div class="banner">
<div class="blocks"></div>
</div>
</section>
<script>
const banner = document.getElementsByClassName('banner')[0];
const blocks = document.getElementsByClassName('blocks');
for (var i = 1; i <400; i++) {
banner.innerHTML += "<div class='blocks'></div>";
const duration = Math.random() * 5;
blocks[i].style.animationDuration = 2+duration+'s';
blocks[i].style.animationdelay = duration+'s';
}
const section = document.querySelector('section');
setTimeout(function(){
section.classList.add('active')
},10000)
</script>
</body>
</html>css文件：
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins',sans-serif;
}
body
{
background: #003843;
}
section
{
position: relative;
width: 100%;
height: 100vh;
transform-style: preserve-3d;
perspective: 500px;
}
section h2
{
position: relative;
width: 100%;
height:100vh;
text-align: center;
line-height: 100vh;
font-size: 10vw;
color: #fff;
font-weight: 700:
}
.banner
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
flex-wrap: wrap;
}
.banner .blocks
{
position: relative;
display: block;
width: 5vw;
height: 5vh;
background: #fff;
animation: animate 2s ease-in-out forwards;
animation-delay: 1s;
}
@keyframes animate
{
0%
{
transform: translateZ(2000px);
background:url(minpicture.jpg);
background-position: center;
background-size: cover;
background-attachment: fixed;
box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}
100%
{
transform: translateZ(0px);
background:url(minpicture.jpg);
background-position: center;
background-size: cover;
background-attachment: fixed;
border: 1px solid rgba(0,0,0,.1)
box-shadow: 0 5px 15px rgba(0,0,0,0);
}
}
section.active .banner .blocks
{
animation: animateTwo 2s ease-in-out forwards;
background:url(minpicture.jpg);
background-position: center;
background-size: cover;
background-attachment: fixed;
border: 1px solid rgba(0,0,0,.1)
}
@keyframes animateTwo{
0%
{
transform: translateZ(0px);
background:url(minpicture.jpg);
background-position: center;
background-size: cover;
background-attachment: fixed;
box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}
100%
{
transform: translateZ(2000px);
background:url(minpicture.jpg);
background-position: center;
background-size: cover;
background-attachment: fixed;
border: 1px solid rgba(0,0,0,.1)
box-shadow: 0 5px 15px rgba(0,0,0,0);
}变幻的小圆圈
鼠标触碰之后会发生变化
HTML文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Css Exercise</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="loader">
<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>
</div>
</body>
</html>css文件
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: hidden;
background: #001f25;
}
.loader{
position: relative;
width: 300px;
height: 300px;
}
.loader span{
position: absolute;
top: 100px;
left: 0;
width: 100%;
height: 100%;
transform: rotate(calc(36deg * var(--i)));
}
.loader span::before{
content: '';
position: absolute;
top: 0px;
left: 0;
width: 25px;
height: 25px;
border-radius: 50%;
background: transparent;
border: 4px solid #00efff;
box-sizing: border-box;
box-shadow: 0 0 20px #00efff,
-30px -30px 0 #00efff,
-30px -30px 20px #00efff,
30px 30px 0 #00efff,
30px 30px 20px #00efff,
30px -30px 0 #00efff,
30px -30px 20px #00efff,
-30px 30px 0 #00efff,
-30px 30px 20px #00efff;
animation: animate 5s linear infinite;
animation-delay: calc(-0.25s * var(--i));
transform-origin: 20px;
transition: 2s;
}
.loader:hover span::before{
box-shadow: 0 0 20px #00efff,
-200px -200px 0 #00efff,
-200px -200px 20px #00efff,
200px 200px 0 #00efff,
200px 200px 20px #00efff,
200px -200px 0 #00efff,
200px -200px 20px #00efff,
-200px 200px 0 #00efff,
-200px 200px 20px #00efff;
transform-origin: 250px;
}
@keyframes animate
{
0%{
transform: rotate(0deg);
filter: hue-rotate(0deg);
}
100%{
transform: rotate(360deg);
filter: hue-rotate(360deg);
}
}
582
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
