CSS动画特效

最新推荐文章于 2024-09-18 17:50:57 发布
最新推荐文章于 2024-09-18 17:50:57 发布
阅读量183 收藏
点赞数 1
文章标签： css 前端 html css3 动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/UI_linlan/article/details/132589996
版权

特效实现

在学习前端HTML和CSS时遇到一些好看的页面里的效果动效时总会以为是拿JS写的

CSS3特效2

css3特效1

其实我们只需要用到一点CSS3的样式就可以实现了。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        /* background-color: #423933; */
      }
      .box {
        width: 710px;
        height: 200px;
        background-color: #423933;
        margin-top: 300px;
        margin-left: 350px;
        overflow: hidden;
      }
      .sou {
        width: 70px;
        height: 70px;
        border-radius: 50px;
        background-color: #db2f00;
        text-align: center;
        line-height: 70px;
        font-size: 25px;
        margin-top: 65px;
        color: white;
        float: left;
        animation-name: run;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-delay: 0.1s;
      }
      .sou2 {
        width: 70px;
        height: 70px;
        border-radius: 50px;
        background-color: #ff6d38;
        text-align: center;
        margin-top: 65px;
        line-height: 70px;
        font-size: 25px;
        color: white;
        float: left;
        margin-left: 10px;
        animation-name: run;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-delay: 0.2s;
      }
      .sou3 {
        width: 70px;
        height: 70px;
        border-radius: 50px;
        background-color: #ffa588;
        text-align: center;
        line-height: 70px;
        font-size: 25px;
        margin-top: 65px;
        color: white;
        float: left;
        margin-left: 10px;
        animation-name: run;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-delay: 0.3s;
      }
      .sou4 {
        width: 70px;
        height: 70px;
        border-radius: 50px;
        background-color: white;
        text-align: center;
        line-height: 70px;
        font-size: 25px;
        margin-top: 65px;
        color: black;
        float: left;
        margin-left: 10px;
        animation-name: run;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-delay: 0.4s;
      }
      .sou5 {
        width: 70px;
        height: 70px;
        border-radius: 50px;
        background-color: #98d3d3;
        text-align: center;
        line-height: 70px;
        font-size: 25px;
        margin-top: 65px;
        color: white;
        float: left;
        margin-left: 10px;
        animation-name: run;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-delay: 0.5s;
      }
      .sou6 {
        width: 70px;
        height: 70px;
        border-radius: 50px;
        background-color: #13a2a4;
        text-align: center;
        line-height: 70px;
        font-size: 25px;
        color: white;
        float: left;
        margin-top: 65px;
        margin-left: 10px;
        animation-name: run;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-delay: 0.6s;
      }
      .sou7 {
        width: 70px;
        height: 70px;
        border-radius: 50px;
        background-color: #ffa588;
        text-align: center;
        line-height: 70px;
        margin-top: 65px;
        font-size: 25px;
        color: white;
        float: left;
        margin-left: 10px;
        animation-name: run;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-delay: 0.7s;
      }
      .sou8 {
        width: 70px;
        height: 70px;
        border-radius: 50px;
        background-color: #ff6d38;
        text-align: center;
        line-height: 70px;
        font-size: 25px;
        color: white;
        margin-top: 65px;
        float: left;
        margin-left: 10px;
        animation-name: run;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-delay: 0.8s;
      }
      .sou9 {
        width: 70px;
        height: 70px;
        border-radius: 50px;
        background-color: #98d3d3;
        text-align: center;
        line-height: 70px;
        font-size: 25px;
        color: white;
        margin-top: 65px;
        float: left;
        margin-left: 10px;
        animation-name: run;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-delay: 0.9s;
      }
      @keyframes run {
        0% {
          transform: translateY(0px);
        }
        25% {
          transform: translateY(-20px);
        }
        50% {
          transform: translateY(200px);
        }
        50.1% {
          transform: translateY(-180px);
        }
        100% {
          transform: translateY(0px);
        }
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="sou">s</div>
      <div class="sou2">h</div>
      <div class="sou3">u</div>
      <div class="sou4">m</div>
      <div class="sou5">e</div>
      <div class="sou6">n</div>
      <div class="sou7">g</div>
      <div class="sou8">l</div>
      <div class="sou9">i</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" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        width: 100%;
        height: 740px;
        position: relative;
        top: 0;
        left: 0;
      }
      .zuo {
        width: 100%;
        height: 770px;
        background: linear-gradient(to right, #f55757 50%, #eaffae 50%);
        mix-blend-mode: hue;
        border: solid 1.5px #f55757;
        line-height: 770px;
        /* font-size: 100px; */
      }
      .Zi {
        color: #fff;
        /* font-size: 120px; */
        font-weight: 600;
        mix-blend-mode: difference;
        transition: all 0.2s linear;
      }
      #tips {
        position: relative;
        width: 100%;
        line-height: 135px;
        font-size: 160px;
        height: 135px;
        background-color: rgb(0, 0, 0, 0);
        overflow: hidden;
        position: fixed;
        top: 270px;
      }
      #tips span {
        position: absolute;
        left: 0;
        margin: 0 10px;
        white-space: nowrap;
      }
      @keyframes around1 {
        from {
          left: 0;
        }
        to {
          /* left: calc(0px - var(--textWidth--) - 10px); */
          left: -100%;
        }
      }
      @keyframes around2 {
        from {
          /* left: calc(var(--textWidth--) + 10px); */
          left: 100%;
        }
        to {
          left: 0;
        }
      }
      #tips .span1 {
        animation: around1 10s linear infinite;
      }
      #tips .span2 {
        animation: around2 10s linear infinite;
      }
      .box > .Zi {
        transform: translateX(1000px);
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="zuo">
        <div class="Zi" id="tips" :style="'--textWidth--:'+ msg.length+'em'">
          <span class="span1">CLASSROOO</span>
          <span class="span2">CLASSROOO</span>
        </div>
      </div>
    </div>
  </body>
</html>

这样我们就可以实现一些好看且实用的C3的特效动画了，但在我们写代码的时候有些情况还是要结合实际情况来判断和运用，从而达到事半功倍的效果。

（如果有更简介的方法，欢迎在评论区里讨论）

Web_linlan
关注
CSS动画特效—animation、CSS动画特效—transform
m0_45309627的博客
06-05 2902
一、CSS动画特效—animation （一）CSS动画特效—animation的步骤 1、定义动画帧 @keyframes 动画名称{ 初始状态 0%{ } 结束状态 100%{ }
css动画特效
04-16
关于一些css动画的特效 在文档的最下面有关于此文档的用法和说明 欢迎扩展 欢迎反馈意见
【CSS】CSS特效集锦，视觉魔法的碰撞与融合（一）
weixin_30763397的博客
08-22 1010
前言 在本文中我讲述了7种CSS的特效，它们也许看起来并不惊艳，但是我认为却足够传达本文的理念：编写一些特殊的CSS样式的时候需要不拘于常理，要用特殊的认识角度看待标签和样式属性，从而用「绕个弯」的方式达到效果。 一.浮光掠影 首先我们看第一个实现效果：在鼠标浮动到图片上方时，让一片白影一闪而过。 实现思路 画一个竖直的长方形的白色div，设置opcity将其...
css动画案例（附代码）
最新发布
be willing to share
09-18 681
这些 CSS 动画示例展示了不同风格的加载效果，包括旋转、跳动、条形动画和渐变动画。你可以根据你的设计需求调整颜色、大小、动画时长等参数，以创建符合你应用风格的加载动画。一个由条形组成的加载动画，条形依次从左到右移动。）讲述了css动画的基本，现在实现几个小案例。由三个点组成的加载动画，点点依次跳动。一个带有渐变背景色的加载动画。一个经典的旋转圆圈加载动画。
CSS的动画特效（animation）
githubcurry
12-09 1万+
今天来讲一下css中很实用的一个效果-动画（animation）。 动画就是使元素从一种样式逐渐变化为另一种样式的效果。我们可以改变任意多的样式任意多的次数（很官方的回答）。 为了方便大家和我自己理解这个概念，我们可以想像一下准备拍电影的时候，我们需要一个电影名吧，需要设置电影的时间吧。而且拍电影就是一帧一帧，叫做关键帧。所以我们设置动画的时候要讲清楚电影名（animation-name），电影时长（animation-duration），电影啥时候开始（animation-delay），播放或者暂停（a.
28个炫酷的纯CSS特效动画示例（含源代码）
大剑师兰特的GIS世界
01-15 3万+
CSS是网页的三驾马车之一，是对页面布局的总管家，2024年了，这里列出28个超级炫酷的CSS动画示例，让您的网站更加炫目多彩。
CSS特效
s13166803785的博客
12-16 344
三角形 <!-- log --> <div class="tri"></div> <style> .tri { 0; height: 0; border-style: solid; border- 100px; border-color: transparent; border-right-color: red; } </style> 大盒套小盒 两个 <!-- log --&gt
蜜蜂Css动画特效代码.rar
10-01
【标题】"蜜蜂Css动画特效代码.rar"是一个包含CSS和jQuery动画效果的资源包，它提供了丰富的视觉元素，能够为网页增添生动有趣的动态效果。在网页设计和开发中，动态效果是吸引用户注意力、提升用户体验的重要手段。...
CSS动画特效-超好用多种方案实现CSS光束扫过，扫光特效，ae文字过光效果，光效移动效果
07-25
路过的帅气小哥哥和好看可爱的小姐姐们下载一个吧，很...超级好看的各种CSS光束扫过，扫光特效，ae文字过光效果，光效移动效果，可以参考看一下我的动态图片效果，下载就可以直接使用的代码哦 下面这个链接是效果图 ...
宇宙空间粒子CSS3动画特效
07-24
宇宙空间粒子CSS3动画特效是一种基于CSS3技术的创新视觉效果，它利用了CSS3的动画属性和特性来创建出仿佛置身于星辰大海般的粒子流动景象。这种特效为网页设计增添了深度和动态感，使用户在浏览网页时能感受到一种...
css 特效
梦想家博客
03-31 1161
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; /* div {
#CSS中动画特效
weixin_43097301的博客
10-10 1057
概述   在CSS中执行动画的属性是CSS3属性中的 animation，该属性可以让元素随着时间的推移，产生“位置”、“形状”、“颜色”、“大小”、“透明度”等属性变化。 它和 transition 的不同之处在于，它可以不需要任何事件的激活（当然也可以通过事件激活），让元素本身就“挂载”一系列的CSS属性变化。他和 transform 的不同之处在于，它并不需要“transition”的过渡特...
一些css动画特效
jdk137的专栏
08-07 639
1. 通过css实现一个物体从部分显示到完整显示的动画。 Animating with clip path https://css-tricks.com/animating-with-clip-path/ #education.swiper-slide-active .eduAnim { animation: eduAnim 1s linear infinite; } /* ht...
CSS中的特效-详解
m0_72210904的博客
01-18 1117
字体的使用/*指定自定义字体*//*自定义字体名称*//* 使用自定义字体 */.box {澳门赌王何鸿燊与三太陈婉珍的27岁儿子何猷启
css特效详解
weixin_43765641的博客
09-23 594
（3）0-20%颜色为hotpink，80%-100%颜色为skyblue，20%-80%为两种颜色过渡。text-shadow：横向偏移量 纵向偏移量 模糊距离 阴影颜色;linear-gradient(方向，颜色，颜色····);radial-gradient(方向，颜色，颜色····);横向伸缩：transform：scaleX(1.5);纵向伸缩：transform：scaleY(1.5);横向倾斜：transform：skewX();纵向倾斜：transform：skewY();
CSS动画效果
热门推荐
dayexiaofan的博客
05-28 5万+
继上篇文章之后，先对之前学的内容进行复习一下 01、过渡 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 100px; height...
实用jQuery与CSS动画特效代码包
总结来说，这套资源为网页开发者提供了一个实用的动画特效工具包，通过结合jQuery和CSS特效，能够创建出丰富且易于定制的Canvas动画效果，适用于多种网页设计场景。开发者可以利用这一资源来提高网页的视觉吸引力和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值