CSS动画特效

最新推荐文章于 2024-05-07 11:59:32 发布
最新推荐文章于 2024-05-07 11:59:32 发布
阅读量147 收藏
点赞数 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
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS常用特效
Lee的博客
07-17 1万+
本文是笔者写CSS时常用的套路。不论效果再怎么华丽，万变不离其宗。 1、交错动画 有时候，我们需要给多个元素添加同一个动画，播放后，不难发现它们会一起运动，一起结束，这样就会显得很平淡无奇。那么如何将动画变得稍微有趣一点呢？很简单，既然它们都是同一时刻开始运动的，那么让它们不在同一时刻运动不就可以了吗。如何让它们不在同一时刻运动呢？注意到CSS动画有延迟（delay）这一属性。举个栗子，比如有十个元素播放十个动画，将第二个元素的动画播放时间设定为比第一个元素晚0.5秒（也就是将延迟设为0.5秒），其
css动画特效
07-03
css动画特效
28个炫酷的纯CSS特效动画示例（含源代码）
大剑师兰特的GIS世界
01-15 1万+
CSS是网页的三驾马车之一，是对页面布局的总管家，2024年了，这里列出28个超级炫酷的CSS动画示例，让您的网站更加炫目多彩。
2024年最全历时 10 个多月，学习了这 132 个CSS 特效!(1)，别再说自己不会了
最新发布
2401_84419493的博客
05-07 708
在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。HTML5新特性，语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签。
八种炫酷纯CSS加载动画代码
weixin_43923808的博客
05-12 7241
加载1CSS源码.title{ width: 100%; text-align: center; margin:60px 0; font-size: 18px; color: #999; } .loadingOne{ width: 80px; height: 40px; margin: 0 auto; } .loadingOne span{ display: inline-block; width: 8px; hei..
肝了一宿才收集的48个超炫酷的 CSS 文字特效，绝对值得收藏！！！
热门推荐
Amo Xiang的博客
06-20 5万+
文章目录一、实现线性渐变的文字二、制作文字阴影效果三、制作文字模糊发散效果四、制作3D立体文字五、以两种不同颜色显示文字六、制作镂空文字七、实现文字的图案填充效果八、模拟古诗垂直显示文本九、实现文字的倾斜效果十、实现文字的荧光闪烁效果十一、实现文字的舞台灯光效果十二、制作发光文字十三、实现立体旋转的文字十四、文字翻转动画效果十五、实现火焰文字十六、实现文字的闪烁效果十七、上下摇摆的文字动画效果十八、制作跳跃的文字动画十九、实现文字水纹效果二十、实现文字水平往复循环滚动二十一、使用SVG创建空心虚线线条文字二
好用的css特效
qq_56992860的博客
12-17 3156
一些好用的css样式设计
蜜蜂Css动画特效代码.rar
10-01
非常实用的特效代码，可以完美运行，可以二次修改！
css 加载动画特效
09-13
css 加载动画特效
CSS3动画特效
11-03
div切换、延时动画、元素直线、曲线运动、元素变大变小
53 个 CSS 特效 3（完）
GoldenaArcher的博客
08-29 1486
同样也是二段式的 animation，这里背景的变化用了 clip-path，之前也有介绍过，现在的网站可以拖拽最后获取 clip-path 的角度。二者的移动轨迹是重叠的，这也就是为什么刚开始不会看到绿色的移动轨迹。这里是第 33 到 53 个，很多内容都挺重复的，所以这里解释没之前的细，如果漏了一些之前的笔记会补一下，写过的就会跳过。做出来的，所以会看到两边拉的细长，但是中间还是粗的效果，其实这违反物理了……的时候，获取当前鼠标所在的位置，创建一个新的背景颜色，过渡使用 animation 完成。
使用CSS3动画做了四个小案例
weixin_64965154的博客
05-14 1507
box-shadow: none | inset（可选值，不设置，为外投影，设置，为内投影） x-offset（阴影水平偏移量，正方向为right） y-offset（阴影垂直偏移量，正方向为bottom） blur-然后我们可以来设置她的高可以使用vh，(是指可视窗口的高度。3. Y-offset:是指阴影的垂直偏移量，其值也可以是正负值，正值，阴影在对象的底部，负值时，阴影在对象的顶部。2.X-offset:是指阴影水平偏移量,其值可正可负，正值，则阴影在对象的右边，负值，阴影在对象的左边。
分享84个CSS3特效，总有一款适合您
zdh13370188237的博客
02-14 826
css3珠子并排上下滚动loading加载动画特效。css3卡片式产品分类鼠标悬停高亮变色特效。4款创意loading加载css3动画特效。纯css3阶梯式loading加载动画特效。css3 svg卡片点击折叠打开动画特效。纯css3翻页加载loading动画特效。纯css3花朵样式loading加载特效。css3 svg鼠标经过按钮展开动画特效。css3海底冒泡和3D多角鱼群动画特效。css3半圆饼状图形百分比统计动画特效。css3 svg动态原子结构示意图特效。css3登录注册表单3D翻转切换特效。
css特效：流光背景+动态边框+滑动效果+聚集效果+小耳朵+阴影流光效果
src_chao1的博客
12-14 6053
好了，从视频中我们能看到每种效果都带有三个不同样式展示，这三种样式是制作的三种默认主题：确定、取消、删除，匹配所有效果。同时镜面反光效果由于兼容性问题，可以进行单独设置（视频中都带有镜面反光）。
CSS的动画特效（animation）
githubcurry
12-09 1万+
今天来讲一下css中很实用的一个效果-动画（animation）。 动画就是使元素从一种样式逐渐变化为另一种样式的效果。我们可以改变任意多的样式任意多的次数（很官方的回答）。 为了方便大家和我自己理解这个概念，我们可以想像一下准备拍电影的时候，我们需要一个电影名吧，需要设置电影的时间吧。而且拍电影就是一帧一帧，叫做关键帧。所以我们设置动画的时候要讲清楚电影名（animation-name），电影时长（animation-duration），电影啥时候开始（animation-delay），播放或者暂停（a.
【纯CSS特效源码】(一)几款漂亮的文字特效
foolishsunday的博客
01-12 1882
CSS文字特效
【CSS加载动画特效】28种纯CSS实现的加载loading动态特效（附源码）
赏樱看雪撸代码
07-11 1万+
CSS3实现多种load加载效果，纯CSS3实现多种加载中效果，纯CSS3实现28种加载动态效果，页面实现loading效果，好看的loading动态特效，animation与transform的灵活应用。
css动画
一心一意码代码
05-19 573
有一个重要的属性 animation 语法animation: name duration timing-function delay iteration-count direction;值 描述animation-name 规定需要绑定到选择器的 keyframe 名称。。 animation-duration 规定完成动画所花费的时间，以秒或毫秒计。 animation-timing
css 炫酷特效
qq_41093271的博客
05-04 544
一、霓虹灯光的实现 示例 代码如下： ** 多重阴影 给按钮加三层阴影，从内到外每层阴影的模糊半径递增，这样的多个阴影叠加在一起，就可以形成一个类似霓虹灯光的效果** <div class="light">css light</div> .light { width: fit-content; padding: 25px 30px; color: #03e9f4; font-size: 24px; text-trans
css3垂直动画特效
08-20
CSS3垂直动画特效是指使用CSS3技术实现的一种垂直方向上的动画效果。CSS3提供了一系列的动画特性，如transform、transition、animation等，可以让开发者通过设置属性值来实现各种各样的动画效果。 常见的CSS3垂直...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值