::-webkit-scrollbar
::-webkit-scrollbar CSS伪类选择器影响了一个元素的滚动条的样式
::-webkit-scrollbar 仅仅在支持WebKit的浏览器
::-webkit-scrollbar — 整个滚动条.
::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).
::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.
::-webkit-scrollbar-track — 滚动条轨道.
::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.
::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.
::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).
难点的按钮
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>难点的按钮</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body style="display: flex; min-height: 100vh; justify-content: center; align-items: center;">
<div style="position: relative; width: 300px;">
<img src="./bg.jpg" alt="" srcset="">
<button style="position:absolute; left: 0; top: 280px; width: 100%;">可以</button><br>
<button style="position: absolute; top: 300px;" class="btn">不行</button>
</div>
<script>
// 可以
let ok = this.document.querySelectorAll('button')[0]
ok.onclick = () => {
alert("晚上来吃饭吗")
}
// 不了
let btn = this.document.querySelector(".btn")
btn.addEventListener("mouseover",()=>{
let w = btn.offsetLeft
let t = btn.offsetTop
btn.style.top = Math.floor(Math.random() * 50 + w) + 'px'
btn.style.left = Math.floor(Math.random() * 50 + t) + 'px'
console.log('w:' + w);
console.log('t:' + t);
})
</script>
</body>
</html>
图片微动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图片微动</title> <style>
* {
margin: 0;
padding: 0;
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body> <img src=". /bg.jpg" alt="" srcset="">
<script> document.querySelector('img').addEventListener('mousemove', (e) => { let w = e.clientX / parseInt(getComputedStyle(document.querySelector('img')).width, 10) let h = e.clientY / parseInt(getComputedStyle(document.querySelector('img')).height, 10) document.querySelector('img').style.transform = `translate(${w * 5 / 0.5}px, ${h * 5 / 0.5}px)` }) </script>
</body>
</html>
打字动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>打字动画</title> <style>
:root {
font-size: 20px;
color: #fff;
}
body {
display: flex;
justify-content: center;
background-color: #333333;
align-items: center;
min-height: 100vh;
}
h1 {
font-family: monospace;
/* 等宽字体 */
font-size: 6rem;
margin: 0;
padding: 0;
position: relative;
}
h1::after {
content: '';
display: inline-block;
position: absolute;
width: 20px;
height: 6rem;
background-color: #ffffff;
border-radius: 2px;
right: -30px;
}
h1.ended::after {
animation: 1.1s cursor steps(2, jump-none) infinite;
}
h1 span {
--delay: 10s;
display: inline-block;
overflow: hidden;
width: 0ch;
animation: .1s text-in ease-in-out forwards;
animation-delay: var(--delay);
}
@keyframes text-in {
from {
width: 0ch;
}
to {
width: 1ch;
}
}
@keyframes cursor {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>
</head>
<body> <h1>Welcome</h1>
<script> const h1 = document.querySelector('h1') h1.innerHTML = h1.textContent.replace(/\S/g, "<span>$&</span>") let delay = 0 document.querySelectorAll('span').forEach((span, index) => { delay += 1 if (index === 3) delay += 0.3 span.style.setProperty('--delay', `${delay}s`) }) h1.addEventListener('animationend', (e) => { if (e.target === document.querySelector('h1 span:last-child')) { h1.classList.add('ended') } }) </script>
</body>
</html>
弹窗动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>弹窗动画</title> <style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.boxF {
position: relative;
width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff173;
padding: 20px;
}
.active {
filter: blur(20px);
pointer-events: none;
user-select: none;
}
.box {
position: relative;
max-width: 700px;
}
h2 {
font-weight: 600;
margin-bottom: 10px;
color: #333333;
}
.box img {
max-width: 100%;
display: block;
}
a {
margin-top: 20px;
position: relative;
padding: 5px 20px;
display: inline-block;
text-decoration: none;
color: #ffffff;
background-color: #111111;
}
.popup {
position: fixed;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
padding: 50px;
box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);
background-color: #ffffff;
visibility: hidden;
opacity: 0;
transition: 0.5s;
}
.popupActive {
top: 50%;
visibility: visible;
opacity: 1;
transition: 0.5s;
}
</style>
</head>
<body> <div class="boxF" id="blue"> <div class="box"> <h2>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit
dolorem rem fugiat, assumenda non sit. </h2> <img src=". /bgc.png" alt="" />
<a href="#" onclick="toggle()">Lorem, ipsum dolor.</a> <button>弹窗</button> </div>
</div> <div class="popup"> <h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, quo. </h2> <p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odio quas aut
vero illo tenetur optio veritatis consectetur qui aliquid provident
modi, ab expedita fugiat reprehenderit obcaecati ratione nihil assumenda dolorem? </p>
<a href="#" onclick="toggle()">Close</a> </div>
<script> function toggle() { let blue = document.querySelector("#blue"); blue.classList.toggle("active"); let popup = document.querySelector(".popup"); popup.classList.toggle("popupActive"); } </script>
</body>
</html>
