css动画从左向右渐变滑动效果

xiaoming_0208

已于 2023-12-15 11:26:26 修改

阅读量4.8k

点赞数 1

文章标签： css 前端

于 2023-03-14 15:21:39 首次发布

原文链接：https://blog.csdn.net/yq2256116/article/details/124529724

版权

20230314_152327

第一步，先布局

<div class="develop-one-main">
        <div class="develop-one-round"></div>
        <p class="develop-one-idea">创新发展、追求卓越的</p>
        <p class="develop-one-idea-1">核心文化理念</p>
</div>

第二步，设置诗句的基本属性，字体大小，文字间隔，以及初始位置transform: translate(0)

p {
        font-size: 45px;
        font-weight: 700;
        margin-bottom: 25px;
        transform: translate(0);
      }

第三步，添加css3动画animation

animation: example1 1s ease-out 0s backwards;

.develop-one-main {
      width: 1200px;
      position: absolute;
      top: 30%;
      left: 18%;
      animation: example1 1s ease-out 0s backwards;
}

第四步，使用@keyframes规则，创建动画

创建动画是通过逐步改变从一个CSS样式设定到另一个。指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同。0％是开头动画，100％是当动画完成

@keyframes example1 {
  0% {
    transform: translate(-100px);
    opacity: 0;
  }

  50% {
    transform: translate();
    opacity: 0.5;
  }

  100% {
    transform: translate(0);
    // opacity: 1;
  }
}