前端动画案例分享(三)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loading Text Outline Effect</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #333;
}
.loading-text {
font-family: Arial, sans-serif;
font-size: 30px;
font-weight: bold;
color: transparent;
position: relative;
text-transform: uppercase;
letter-spacing: 5px;
}
.loading-text .text {
position: relative;
z-index: 1;
}
.loading-text::before {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
color: transparent;
-webkit-text-stroke: 2px #fff;
z-index: 0;
}
.loading-text::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
color: white;
z-index: 0;
clip-path: inset(0 100% 0 0);
animation: loading 3s linear infinite;
}
@keyframes loading {
0% {
clip-path: inset(0 100% 0 0);
}
50% {
clip-path: inset(0 0 0 0);
}
100% {
clip-path: inset(0 0 0 100%);
}
}
</style>
</head>
<body>
<div class="loading-text" data-text="Loading...">
<span class="text">Loading...</span>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.dot-trail-loader {
position: relative;
width: 100px;
height: 100px;
}
.dot {
position: absolute;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #ff6b6b;
animation: dotTrail 1.5s infinite ease-in-out;
}
.dot:nth-child(2) {
animation-delay: 0.3s;
}
.dot:nth-child(3) {
animation-delay: 0.6s;
}
@keyframes dotTrail {
0% { transform: translate(0, 0); opacity: 1; }
50% { transform: translate(50px, 50px); opacity: 0.5; }
100% { transform: translate(100px, 0); opacity: 1; }
}
</style>
</head>
<body>
<div class="dot-trail-loader">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.star-spinner {
width: 80px;
height: 80px;
border-radius: 50%;
position: relative;
animation: rotateStar 2s infinite linear;
}
.star {
width: 80px;
height: 80px;
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
background-color: #ff6b6b;
}
@keyframes rotateStar {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="star-spinner">
<div class="star"></div>
</div>
</body>
</html>
想要获取更多特效，点击免费使用小奈AI
原文地址：https://blog.csdn.net/m0_55472195/article/details/142657149
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！