一.交叉动画效果
<!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;
list-style: none;
}
.wrapper {
background-color: #222;
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.dot {
width: 2em;
height: 2em;
margin: 1em;
border-radius: 50%;
background-color: red;
position: relative;
}
.dot::before {
width: 100%;
height: 100%;
position: absolute;
background-color: inherit;
border-radius: inherit;
content: "";
animation: wave 2s ease-out infinite;
}
/* .dot:nth-of-type(1)::before {
animation-delay: .2s;
}
.dot:nth-of-type(2)::before {
animation-delay: .4s;
} */
/* .dot:nth-of-type(3)::before {
animation-delay: .6s;
}
.dot:nth-of-type(4)::before {
animation-delay: .8s;
}
.dot:nth-of-type(5)::before {
animation-delay: 1s;
} */
/* .dot:nth-of-type(1) {
background-color: green;
}
.dot:nth-of-type(2) {
background-color: yellow;
}
.dot:nth-of-type(3) {
background-color: blue;
}
.dot:nth-of-type(4) {
background-color: yellowgreen;
}
.dot:nth-of-type(5) {
background-color: white;
} */
@keyframes wave {
50% {
transform: scale(2.5);
}
100% {
opacity: 0;
}
}
</style>
</head>
<body>
<div class="wrapper">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function()
{
var $dot=$(".dot");
for(var i=0;i<$dot.length;i++)
{
$(`.dot:nth-of-type(${i+1})`).css({
"background-color":`rgb(${random(0,255)},${random(0,255)},${random(0,255)})`
})
// $(`.dot:nth-of-type(${i+1})::before`).css({
// "animation-delay":i*0.2+"s"
// })
$("head").append(
`<style>
.dot:nth-of-type(${i+1})::before
{
animation-delay:${i*0.2}s
}
</style>`
)
}
})
function random(min,max)
{
return Math.floor(Math.random()*(max-min)+min)
}
</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;
list-style: none;
}
body{
height: 100vh;
background: #000;
display: flex;
justify-content: center;
align-items: center;
}
.btn{
padding: 1rem 3rem;
font-size: 1rem;
line-height: 1.5;
color: #fff;
--hue:190;
background: hsl(var(--hue), 100%, 40%);
border: 1px solid hsl(var(--hue), 100%, 40%);
text-transform: uppercase;
}
.btn:hover{
background: hsl(var(--hue), 100%, 20%);
/* --hue:150; */
}
.btn.btn-ghost{
background: transparent;
}
.btn.btn-shine{
position: relative;
overflow: hidden;
}
.btn.btn-shine::before{
position: absolute;
width: 100%;
height: 100%;
top:0;
left:0;
background: linear-gradient(120deg,transparent,
hsla(var(--hue), 100%, 40%,0.5),transparent);
content: "";
transform: translateX(-100%);
transition: 0.8s;
}
.btn.btn-shine:hover::before{
transform: translateX(100%);
}
.btn.btn-shine:hover{
box-shadow: 0 0 20px 10px hsla(var(--hue), 100%, 40%,0.5);
}
.btn.btn-success
{
--hue:350;
}
</style>
</head>
<body>
<button class="btn btn-ghost btn-shine btn-success">hover me</button>
</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;
list-style: none;
}
body {
height: 100vh;
background: radial-gradient(ellipse at bottom,
#1b2735 0, #090a0f 100%);
filter: drop-shadow(0 0 10px white);
position: relative;
}
.snow {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #fff;
position: absolute;
}
.mywords
{
position: fixed;
left: 50%;
top:50%;
transform: translate(-50%,-50%);
color: #fff;
font-size: 1.5em;
line-height: 2em;
font-weight: 500;
display: flex;
flex-wrap: wrap;
}
.mywords span{
animation: jumpin 0.5s ease-out both;
}
@keyframes jumpin {
from{
transform: translateY(-20%);
opacity: 0;
}
to{
transform: translateY(0);
opacity: 1;
}
}
</style>
</head>
<body>
<p class="mywords">
余生我只想和你看雪看星星看月亮，从诗词歌赋谈到人生理想。
</p>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function () {
var words=$(".mywords").text().split("");
$(".mywords").empty();
words.forEach((w,i)=>{
$(`<span>${w}</span>`).css({
"animation-delay": 0.1*i+'s'
}).appendTo($(".mywords"));
});
for(var i=0;i<200;i++)
{
var x=Math.random()*100;
var y=Math.random()*100;
var scale=Math.random();
var opacity=Math.random();
var t1=Math.random()*20+10;
var t2=Math.random()*30;
var o=Math.random()*20-10;
var x1=x+o;
var x2=x+o/2;
$(`<style> @keyframes fall${i} {
${y}%{
transform: translate(${x1}vw, ${y}vh) scale(${scale});
}
to{
transform: translate(${x2}vw,100vh) scale(${scale});
}
}
</style>`).appendTo($("head"));
$('<div class="snow"></div>')
.css({
"transform": `translate(${x}vw, -10px) scale(${scale})`,
"opacity": opacity,
"animation": `fall${i} ${t1}s -${t2}s linear infinite`
})
.appendTo($("body")).end()
}
})
</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;
list-style: none;
}
body{
background: black;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.moon
{
width: 8em;
height: 8em;
border-radius: 50%;
background: black;
box-shadow: inset 0.5em -0.5em crimson;
position: relative;
animation: move 2s linear infinite;
}
.moon::before,.moon::after
{
position: absolute;
width: 100%;
height: 100%;
background: inherit;
box-shadow: inherit;
border-radius: inherit;
content: "";
}
.moon::before{
filter: blur(5px);
}
.moon::after{
filter: blur(10px);
}
@keyframes move {
to{
transform: rotate(1turn);
}
}
</style>
</head>
<body>
<div class="moon"></div>
</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;
list-style: none;
}
body {
background-color: #0f0f0f;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.mywords {
color: #fff;
font-size: 1.5em;
line-height: 1.8em;
margin: 0 1em;
}
.mywords span {
animation: lightin 0.8s both;
}
@keyframes lightin {
from {
opacity: 0;
}
65% {
opacity: 1;
text-shadow: 0 0 30px #fff;
}
75% {
opacity: 1;
}
to {
opacity: 0.7;
}
}
</style>
</head>
<body>
<p class="mywords">
不管前方的路有多苦，只要走的方向正确，不管多么崎岖不平，都比站在原地更接近幸福。
</p>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function()
{
var words=$(".mywords").text().split("");
$(".mywords").empty();
words.forEach((w,i)=>{
$(`<span>${w}</span>`)
.css({
"animation-delay": 0.05*i+'s'
})
.appendTo($(".mywords"));
})
})
</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;
list-style: none;
}
body {
background-color: #0f0f0f;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.mywords {
color:transparent;
font-size: 1.5em;
line-height: 1.8em;
position: relative;
animation: fontcolor 2s 1.6s forwards;
}
@keyframes fontcolor {
to{
color: #fff;
}
}
.mywords.from {
margin: 1em 0;
}
.mywords::before{
content: "";
position: absolute;
left: 0;
top:0;
width: 100%;
height: 100%;
background-color: cyan;
transform: scaleX(0);
transform-origin:left ;
animation: move 2s cubic-bezier(0.75,0,0,1) forwards;
}
.mywords.from::before{
background-color: orange;
animation-delay: 2s;
/* animation: move 2s 2s cubic-bezier(0.75,0,0,1) forwards; */
}
.mywords.from
{
animation-delay: 3.2s;
}
@keyframes move {
50%{
transform-origin: left;
transform: scaleX(1);
}
50.1%
{
transform-origin: right;
}
100%
{
transform-origin: right;
transform: scaleX(0);
}
}
</style>
</head>
<body>
<p class="mywords">我不知道将去何方，但我已在路上</p>
<p class="mywords from">千与千寻</p>
</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;
list-style: none;
}
body{
height: 100vh;
position: relative;
}
img,h1{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
img{
object-fit: cover;
}
h1{
font-size: 20vw;
text-align: center;
line-height: 100vh;
mix-blend-mode: screen;
background-color: #fff;
}
</style>
</head>
<body>
<img src="bg.gif" alt="">
<h1>花未眠</h1>
</body>
</html>
转载：https://blog.csdn.net/Miracle1203/article/details/105973389
查看评论