效果
主要整理了幾個常用的，方便平時做項(xiàng)目的時候參考
文本橫向滾動
文本無限滾動
無縫輪播
無縫滾動
盒子上下滾動
櫻花飄落效果文章來源：http://www.zghlxwxcb.cn/news/detail-787475.html
參考代碼
文本橫向滾動
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>橫向滾動文字</title>
</head>
<body>
<div class="scroll-container">
<div class="scroll-content">
<p>這是要滾動的文本內(nèi)容。</p>
</div>
</div>
<style>
.scroll-container {
width: 300px;
height: 30px;
margin: 20px auto;
border: 1px solid gray;
display: flex;
align-items: center;
overflow: hidden;
white-space: nowrap;
}
.scroll-content {
display: inline-block;
animation: scroll 10s linear infinite;
/* 調(diào)整滾動速度，單位為秒 */
}
@keyframes scroll {
from {
transform: translateX(100%);
}
to {
transform: translateX(-100%);
}
}
</style>
</body>
</html>
文本無限滾動
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box">
<div class="list">
<div>1.這是一段文字</div>
<div>2.這是一段文字</div>
<div>3.這是一段文字</div>
<div>4.這是一段文字</div>
<div>5.這是一段文字</div>
<div>6.這是一段文字</div>
<div>7.這是一段文字</div>
<div>8.這是一段文字</div>
</div>
</div>
<style>
.box {
margin: 20px auto;
width: 300px;
height: 160px;
overflow: hidden;
position: relative;
border: 1px solid gray;
}
.list {
position: absolute;
top: 0;
display: flex;
flex-direction: column;
align-items: center;
}
.list>div {
width: 300px;
height: 20px;
box-sizing: border-box;
}
</style>
<script>
let list = document.querySelector(".list");
let box = document.querySelector(".box");
list.innerHTML += list.innerHTML;
let currentTop = 0;
let timer;
const move = () => {
timer = setInterval(() => {
currentTop -= 2;
if (currentTop == -(6 * 20)) {
currentTop = 0
}
list.style.top = currentTop + 'px'
}, 20)
}
move()
box.onmouseenter = () => {
clearInterval(timer)
}
box.onmouseleave = () => {
move()
}
</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>Document</title>
</head>
<body>
<div class="box">
<div class="list">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</div>
<style>
.box {
width: 320px;
height: 80px;
overflow: hidden;
position: relative;
border: 1px solid gray;
margin: 20px auto;
}
.list {
position: absolute;
left: 0;
display: flex;
align-items: center;
transition: left 0.5s ease; /* Added transition property */
}
.list>div {
width: 80px;
height: 80px;
border: 1px solid gray;
box-sizing: border-box;
}
</style>
<script>
let list = document.querySelector(".list");
list.innerHTML += list.innerHTML;
let left = 0;
setInterval(() => {
left -= 80;
if (left === -(5 * 80)) {
list.style.transition = "none"; // Remove transition
left = 0;
setTimeout(() => {
list.style.transition = "left 0.5s ease"; // Restore transition after a short delay
}, 0);
}
list.style.left = left + "px";
}, 2000);
</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>Document</title>
</head>
<body>
<div class="box">
<div class="list">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</div>
<style>
.box {
margin: 20px auto;
width: 300px;
height: 80px;
overflow: hidden;
position: relative;
border: 1px solid gray;
}
.list {
position: absolute;
left: 0;
display: flex;
align-items: center;
}
.list>div {
width: 80px;
height: 80px;
border: 1px solid gray;
box-sizing: border-box;
}
</style>
<script>
let list = document.querySelector(".list");
let box = document.querySelector(".box");
list.innerHTML += list.innerHTML;
let left = 0;
let timer;
const move = () => {
timer = setInterval(() => {
left -= 2;
if (left == -(6 * 80)) {
left = 0
}
list.style.left = left + 'px'
}, 20)
}
move()
box.onmouseenter = () => {
clearInterval(timer)
}
box.onmouseleave = () => {
move()
}
</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>Document</title>
</head>
<body>
<div class="box">
<div class="box1">
</div>
</div>
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid gray;
margin: 0 auto;
position: relative;
}
.box1 {
width: 50px;
height: 50px;
background: skyblue;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
transition: top 1s ease-in-out;
}
</style>
</body>
<script>
document.addEventListener("DOMContentLoaded", function () {
let box = document.querySelector(".box")
let box1 = document.querySelector(".box1")
setInterval(() => {
let currentTop = parseInt(window.getComputedStyle(box1).top);
let newTop = (currentTop == 0) ? box.clientHeight - box1.clientHeight : 0;
box1.style.top = newTop + 'px';
}, 1000)
})
</script>
</html>
櫻花飄落
添加插件sakura.js就可以了，不用什么代碼文章來源地址http://www.zghlxwxcb.cn/news/detail-787475.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<body>
<script src="https://cdn.jsdelivr.net/gh/1999cyx/cdn@2.0/js/sakura.js"></script>
</body>
</body>
</html>
到了這里，關(guān)于前端常用js、css效果的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
