/* 无缝滚动 ------------------------------------------------------------------------
特点:
1.滚动中没有停顿
2.从头至尾再循环播放时没有停顿
<div class="inner-container">
<p class="text" v-for="(text, index) in arr" :key="index">{{text}}</p>
</div>
*/
.seamless_scrolling {
animation: seamless_move 5s linear infinite;
animation-fill-mode: forwards;
}
/*文字无缝滚动------------------------------------------------------------------------
*/
@keyframes seamless_move {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-150px);
}
}
/*
*停顿滚动------------------------------------------------------------------------
*/
.pause_scrolling {
animation: pause_move 5s linear infinite;
animation-fill-mode: forwards;
}
@keyframes pause_move {
0% {
transform: translateY(0);
}
10% {
transform: translateY(-30px);
}
20% {
transform: translateY(-30px);
}
30% {
transform: translateY(-60px);
}
40% {
transform: translateY(-60px);
}
50% {
transform: translateY(-90px);
}
60% {
transform: translateY(-90px);
}
70% {
transform: translateY(-120px);
}
80% {
transform: translateY(-120px);
}
90% {
transform: translateY(-150px);
}
100% {
transform: translateY(-150px);
}
}
/*
控制文本渐变------------------------------------------------------------------------
<h1 class="gradient-text">Full Stack Developer</h1>
*/
.gradient-text {
background-image: linear-gradient(90deg, $red, $orange);
background-clip: text;
line-height: 60px;
font-size: 60px;
animation: hue 5s linear infinite;
-webkit-text-fill-color: transparent;
}
@keyframes hue {
from {
filter: hue-rotate(0);
}
to {
filter: hue-rotate(-1turn);
}
}
/*
*旋转------------------------------------------------------------------------
*/
.rotate3d {
animation: loading 1s steps(12, end) infinite;
}
@-webkit-keyframes loading {
0% {
transform: rotate3d(0, 0, 1, 0deg);
}
100% {
transform: rotate3d(0, 0, 1, 360deg);
}
}
@keyframes loading {
0% {
transform: rotate3d(0, 0, 1, 0deg);
}
100% {
transform: rotate3d(0, 0, 1, 360deg);
}
}
/*
*自动打字------------------------------------------------------------------------
<div class="bruce flex-ct-x">
<div class="auto-typing">Do You Want To Know More About CSS Development Skill</div>
</div>
*/
.auto-typing {
font-weight: bold;
font-size: 30px;
color: $blue;
@include typing(52, 5);
}
@mixin typing($count: 0, $duration: 0, $delay: 0) {
overflow: hidden;
border-right: 1px solid transparent;
width: #{$count + 1}ch;
font-family: Consolas, Monaco, Monospace;
white-space: nowrap;
animation: typing #{$duration}s steps($count + 1) #{$delay}s backwards,
caret 500ms steps(1) #{$delay}s $duration * 2 forwards;
}
@keyframes typing {
from {
width: 0;
}
}
@keyframes caret {
50% {
border-right-color: currentColor;
}
}
/*倒影加载条,带有渐变倒影的加载条------------------------------------------------------------------------
<div class="bruce flex-ct-x">
<ul class="reflect-loading">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>*/
// .reflect-loading {
// display: flex;
// height: 100px;
// -webkit-box-reflect: below 0 linear-gradient(rgba(#fff, 0), rgba(#fff, .7));
// li {
// width: 20px;
// @for $i from 0 to $count {
// $args: append($color, $i * 100% / ($count - 1));
// &:nth-child(#{$i + 1}) {
// background-color: mix($args...);
// animation: rotate 3s cubic-bezier(.81, .04, .4, .7) infinite;
// animation-delay: $i * 50ms;
// }
// }
// }
// }
// @keyframes rotate {
// 0% {
// transform: rotate(-.5turn) rotateX(-1turn);
// }
// 75%,
// 100% {
// transform: none;
// }
// }
/*
故障文本------------------------------------------------------------------------
<div class="fault-text_bk flex-ct-x">
<div class="fault-text" data-text="ERROR">ERROR</div>
</div>
*/
.fault-text_bk {
background-color: #000;
}
.fault-text {
position: relative;
font-weight: bold;
font-size: 100px;
color: #fff;
&::before,
&::after {
overflow: hidden;
position: absolute;
top: 0;
background-color: #000;
clip: rect(0, 900px, 0, 0);
color: #fff;
content: attr(data-text);
animation: shake 3s linear infinite alternate-reverse;
}
&::before {
left: -2px;
text-shadow: 1px 0 $blue;
}
&::after {
left: 2px;
text-shadow: -1px 0 $red;
animation-duration: 2s;
}
}
@keyframes shake {
$steps: 20;
@for $i from 0 through $steps {
#{percentage($i * (1 / $steps))} {
clip: rect(random(100) + px, 9999px, random(100) + px, 0);
}
}
}
/* 气泡背景墙------------------------------------------------------------------------
<ul class="bubble-bgwall">
<li>Love</li>
<li>Love</li>
<li>Love</li>
<li>Love</li>
<li>Love</li>
<li>Love</li>
<li>Love</li>
<li>Love</li>
<li>Love</li>
<li>Love</li>
</ul>
*/
.bubble-bgwall {
overflow: hidden;
position: relative;
margin: 0 auto;
width: 1200px;
height: 100%;
li {
display: flex;
position: absolute;
bottom: -200px;
justify-content: center;
align-items: center;
border-radius: 10px;
width: 50px;
height: 50px;
background-color: rgba(#fff, .15);
color: #ccc;
animation: bubble 15s infinite;
&:nth-child(1) {
left: 10%;
}
&:nth-child(2) {
left: 20%;
width: 90px;
height: 90px;
animation-duration: 7s;
animation-delay: 2s;
}
&:nth-child(3) {
left: 25%;
animation-delay: 4s;
}
&:nth-child(4) {
left: 40%;
width: 60px;
height: 60px;
background-color: rgba(#fff, .3);
animation-duration: 8s;
}
&:nth-child(5) {
left: 70%;
}
&:nth-child(6) {
left: 80%;
width: 120px;
height: 120px;
background-color: rgba(#fff, .2);
animation-delay: 3s;
}
&:nth-child(7) {
left: 32%;
width: 160px;
height: 160px;
animation-delay: 2s;
}
&:nth-child(8) {
left: 55%;
width: 40px;
height: 40px;
font-size: 12px;
animation-duration: 15s;
animation-delay: 4s;
}
&:nth-child(9) {
left: 25%;
width: 40px;
height: 40px;
background-color: rgba(#fff, .3);
font-size: 12px;
animation-duration: 12s;
animation-delay: 2s;
}
&:nth-child(10) {
left: 85%;
width: 160px;
height: 160px;
animation-delay: 5s;
}
}
}
@keyframes bubble {
0% {
opacity: .5;
transform: translateY(0) rotate(45deg);
}
25% {
opacity: .75;
transform: translateY(-400px) rotate(90deg);
}
50% {
opacity: 1;
transform: translateY(-600px) rotate(135deg);
}
100% {
opacity: 0;
transform: translateY(-1000px) rotate(180deg);
}
}
/*
蛇形边框------------------------------------------------------------------------
<div class="bruce flex-ct-x">
<div class="snakelike-border"></div>
</div>
*/
.snakelike-border {
position: relative;
width: 190px;
height: 190px;
&::before,
&::after {
position: absolute;
left: -5px;
right: -5px;
top: -5px;
bottom: -5px;
border: 5px solid;
content: "";
animation: move 5s linear infinite;
}
&::before {
border-color: red;
}
&::after {
border-color: blue;
animation-delay: -2.5s;
}
}
@keyframes move {
0%,
100% {
clip: rect(0 200px 5px 0);
}
25% {
clip: rect(0 200px 200px 195px);
}
50% {
clip: rect(195px 200px 200px 0);
}
75% {
clip: rect(0 5px 200px 0);
}
}
/*
三维立方体------------------------------------------------------------------------
<div class="td-cube">
<ul>
<li class="front">1</li>
<li class="back">2</li>
<li class="top">3</li>
<li class="bottom">4</li>
<li class="left">5</li>
<li class="right">6</li>
</ul>
</div>
*/
$width: 150px;
$height: 150px;
$length: 150px;
.td-cube {
width: $width;
height: $height;
perspective: 1000px;
ul {
position: relative;
width: 100%;
height: 100%;
transform: rotateX(-15deg) rotateY(15deg);
transform-style: preserve-3d;
animation: rotate 5s infinite linear;
}
li {
display: flex;
position: absolute;
justify-content: center;
align-items: center;
width: $width;
height: $height;
opacity: .8;
font-size: 50px;
color: #fff;
}
.front {
background-color: $red;
transform: translateZ($length / 2);
}
.back {
background-color: purple;
transform: rotateY(180deg) translateZ($length / 2);
}
.top {
background-color: $range;
transform: rotateX(90deg) translateZ($height / 2);
}
.bottom {
background-color: blue;
transform: rotateX(-90deg) translateZ($height / 2);
}
.left {
background-color: cyan;
transform: rotateY(-90deg) translateZ($width / 2);
}
.right {
background-color: green;
transform: rotateY(90deg) translateZ($width / 2);
}
}
@keyframes rotate {
from {
transform: rotateY(0) rotateX(0);
}
to {
transform: rotateY(-1turn) rotateX(-1turn);
}
}
/*螺纹进度条------------------------------------------------------------------------
<div class="thread-progressbar"></div>
*/
.thread-progressbar {
position: relative;
padding-right: 200px;
width: 500px;
height: calc(1.4142 * 20px);
background: repeating-linear-gradient(45deg, green, green 10px, transparent 11px, transparent 19px, green 20px) 0 0 content-box;
animation: twill 1s linear infinite;
&::after {
position: absolute;
width: 100%;
height: 100%;
background-image: linear-gradient(rgba(#000, .5), rgba(#fff, .5), rgba(#000, .5));
content: "";
}
}
@keyframes twill {
from {
background-position-y: 0;
}
to {
background-position-y: calc(-1 * 1.4142 * 40px);
}
}
/*
状态悬浮球------------------------------------------------------------------------
<div class="state-ball warning">
<div class="wave"></div>
</div>
*/
.state-ball {
overflow: hidden;
position: relative;
padding: 5px;
border: 3px solid $green;
border-radius: 100%;
width: 150px;
height: 150px;
background-color: #fff;
&::before,
&::after {
position: absolute;
left: 50%;
top: 0;
z-index: 20;
margin-left: -100px;
width: 200px;
height: 200px;
content: "";
}
&::before {
margin-top: -150px;
border-radius: 45%;
background-color: rgba(#fff, .5);
animation: rotate 10s linear -5s infinite;
}
&::after {
margin-top: -160px;
border-radius: 40%;
background-color: rgba(#fff, .8);
animation: rotate 15s infinite;
}
&.warning {
border-color: orange;
.wave {
background-image: linear-gradient(-180deg, #f0c78a 13%, orange 91%);
}
}
&.danger {
border-color: $red;
.wave {
background-image: linear-gradient(-180deg, #f78989 13%, $red 91%);
}
}
.wave {
position: relative;
border-radius: 100%;
width: 100%;
height: 100%;
background-image: linear-gradient(-180deg, #af8 13%, $green 91%);
}
}
@keyframes rotate {
from {
transform: rotate(0);
}
to {
transform: rotate(1turn);
}
}