纯CSS 动画

最新推荐文章于 2022-10-06 08:07:27 发布

gaodda

最新推荐文章于 2022-10-06 08:07:27 发布

阅读量233

点赞数

分类专栏： css 文章标签：前端

本文链接：https://blog.csdn.net/gaodda/article/details/124582477

版权

css 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

<div class="container">
    <div class="box">
      <span style="--x:1;"><i> I </i> LOVE <i>YOU</i> TOO!</span>
      <span style="--x:2;"><i> I </i> LOVE <i>YOU</i> TOO!</span>
      <span style="--x:3;"><i> I </i> LOVE <i>YOU</i> TOO!</span>
      <span style="--x:4;"><i> I </i> LOVE <i>YOU</i> TOO!</span>
      <span style="--x:5;"><i> I </i> LOVE <i>YOU</i> TOO!</span>
      <span style="--x:6;"><i> I </i> LOVE <i>YOU</i> TOO!</span>
      <span style="--x:7;"><i> I </i> LOVE <i>YOU</i> TOO!</span>
      <span style="--x:8;"><i> I </i> LOVE <i>YOU</i> TOO!</span>
      <span style="--x:9;"><i> I </i> LOVE <i>YOU</i> TOO!</span>
      <span style="--x:10;"><i> I </i> LOVE <i>YOU</i> TOO!</span>
      <span style="--x:11;"><i> I </i> LOVE <i>YOU</i> TOO!</span>
      <span style="--x:12;"><i> I </i> LOVE <i>YOU</i> TOO!</span>
    </div>
 </div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Arial', 'Helvetica', 'sans-serif';
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #222;
  overflow: hidden;
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
 
.container .box {
  transform-style: preserve-3d;
  animation: animate 5s linear infinite;
}

@keyframes animate {
  0% {
    transform: perspective(1000px) rotateX(0deg) rotate(25deg);
  }
  100% {
    transform: perspective(1000px) rotateX(360deg) rotate(25deg);
  }
}

.container .box span {
  position: absolute;
  color: #fff;
  font-size: 3em;
  white-space: nowrap;
  text-transform: uppercase;
  font-weight: 900;
  padding: 0 10px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.5) transparent);
  line-height: 0.8em;
  transform-style: preserve-3d;
  text-shadow: 0 5px 15px rgba(0,0,0,0.25);
  transform: translate(-50%, -50%) rotateX(calc(var(--x) * 30deg)) translateZ(100px);
}

.container .box span i:nth-child(1){
  font-style: inherit;
  color: red;
}
.container .box span i:nth-child(2){
  font-style: inherit;
  color: blue;
}