网站链接: 我爱捣鼓
当前位置: 首页 > 前端开发 > css

css实现抖音文字抖动的特效(含源码)

2022/10/21 11:38:32

如今是一个全民刷抖音的时代,那个“抖音”文字抖动的效果,让我们记忆犹新,今天我们就用css实现抖音文字抖动的特效,如下图所示:<html class=" -webkit-"><head> <meta charset="UTF-8"> <title>css实现抖音文字抖动的…

        如今是一个全民刷抖音的时代,那个“抖音”文字抖动的效果,让我们记忆犹新,今天我们就用css实现抖音文字抖动的特效,如下图所示:

2.gif

<html class=" -webkit-">
<head>
  <meta charset="UTF-8">
  <title>css实现抖音文字抖动的特效(含源码)</title>
  <meta name="robots" content="noindex">
  <style media="" data-href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
    button,
    hr,
    input {
      overflow: visible
    }
    audio,
    canvas,
    progress,
    video {
      display: inline-block
    }
    progress,
    sub,
    sup {
      vertical-align: baseline
    }
    html {
      font-family: sans-serif;
      line-height: 1.15;
      -ms-text-size-adjust: 100%;
      -webkit-text-size-adjust: 100%
    }
    body {
      margin: 0
    }
    menu,
    article,
    aside,
    details,
    footer,
    header,
    nav,
    section {
      display: block
    }
    h1 {
      font-size: 2em;
      margin: .67em 0
    }
    figcaption,
    figure,
    main {
      display: block
    }
    figure {
      margin: 1em 40px
    }
    hr {
      box-sizing: content-box;
      height: 0
    }
    code,
    kbd,
    pre,
    samp {
      font-family: monospace, monospace;
      font-size: 1em
    }
    a {
      background-color: transparent;
      -webkit-text-decoration-skip: objects
    }
    a:active,
    a:hover {
      outline-width: 0
    }
    abbr[title] {
      border-bottom: none;
      text-decoration: underline;
      text-decoration: underline dotted
    }
    b,
    strong {
      font-weight: bolder
    }
    dfn {
      font-style: italic
    }
    mark {
      background-color: #ff0;
      color: #000
    }
    small {
      font-size: 80%
    }
    sub,
    sup {
      font-size: 75%;
      line-height: 0;
      position: relative
    }
    sub {
      bottom: -.25em
    }
    sup {
      top: -.5em
    }
    audio:not([controls]) {
      display: none;
      height: 0
    }
    img {
      border-style: none
    }
    svg:not(:root) {
      overflow: hidden
    }
    button,
    input,
    optgroup,
    select,
    textarea {
      font-family: sans-serif;
      font-size: 100%;
      line-height: 1.15;
      margin: 0
    }
    button,
    input {}
    button,
    select {
      text-transform: none
    }
    [type=submit],
    [type=reset],
    button,
    html [type=button] {
      -webkit-appearance: button
    }
    [type=button]::-moz-focus-inner,
    [type=reset]::-moz-focus-inner,
    [type=submit]::-moz-focus-inner,
    button::-moz-focus-inner {
      border-style: none;
      padding: 0
    }
    [type=button]:-moz-focusring,
    [type=reset]:-moz-focusring,
    [type=submit]:-moz-focusring,
    button:-moz-focusring {
      outline: ButtonText dotted 1px
    }
    fieldset {
      border: 1px solid silver;
      margin: 0 2px;
      padding: .35em .625em .75em
    }
    legend {
      box-sizing: border-box;
      color: inherit;
      display: table;
      max-width: 100%;
      padding: 0;
      white-space: normal
    }
    progress {}
    textarea {
      overflow: auto
    }
    [type=checkbox],
    [type=radio] {
      box-sizing: border-box;
      padding: 0
    }
    [type=number]::-webkit-inner-spin-button,
    [type=number]::-webkit-outer-spin-button {
      height: auto
    }
    [type=search] {
      -webkit-appearance: textfield;
      outline-offset: -2px
    }
    [type=search]::-webkit-search-cancel-button,
    [type=search]::-webkit-search-decoration {
      -webkit-appearance: none
    }
    ::-webkit-file-upload-button {
      -webkit-appearance: button;
      font: inherit
    }
    summary {
      display: list-item
    }
    [hidden],
    template {
      display: none
    }
    /*# sourceMappingURL=normalize.min.css.map */
  </style>
  <style>
    body {
      background: black;
      font-family: 'Varela', sans-serif;
    }
    .glitch {
      color: white;
      font-size: 100px;
      position: relative;
      width: 400px;
      line-height: 200px;
      margin: 0 auto;
    }
    @keyframes noise-anim {
      0% {
        clip: rect(35px, 9999px, 89px, 0);
      }
      5% {
        clip: rect(23px, 9999px, 99px, 0);
      }
      10% {
        clip: rect(11px, 9999px, 42px, 0);
      }
      15% {
        clip: rect(62px, 9999px, 49px, 0);
      }
      20% {
        clip: rect(41px, 9999px, 66px, 0);
      }
      25% {
        clip: rect(100px, 9999px, 32px, 0);
      }
      30% {
        clip: rect(41px, 9999px, 41px, 0);
      }
      35% {
        clip: rect(58px, 9999px, 15px, 0);
      }
      40% {
        clip: rect(70px, 9999px, 43px, 0);
      }
      45% {
        clip: rect(56px, 9999px, 4px, 0);
      }
      50% {
        clip: rect(40px, 9999px, 5px, 0);
      }
      55% {
        clip: rect(83px, 9999px, 61px, 0);
      }
      60% {
        clip: rect(95px, 9999px, 42px, 0);
      }
      65% {
        clip: rect(36px, 9999px, 69px, 0);
      }
      70% {
        clip: rect(54px, 9999px, 48px, 0);
      }
      75% {
        clip: rect(70px, 9999px, 97px, 0);
      }
      80% {
        clip: rect(7px, 9999px, 83px, 0);
      }
      85% {
        clip: rect(47px, 9999px, 14px, 0);
      }
      90% {
        clip: rect(47px, 9999px, 100px, 0);
      }
      95% {
        clip: rect(59px, 9999px, 80px, 0);
      }
      100% {
        clip: rect(22px, 9999px, 57px, 0);
      }
    }
    .glitch:after {
      content: attr(data-text);
      position: absolute;
      left: 2px;
      text-shadow: -1px 0 red;
      top: 0;
      color: white;
      background: black;
      overflow: hidden;
      clip: rect(0, 900px, 0, 0);
      animation: noise-anim 2s infinite linear alternate-reverse;
    }
    @keyframes noise-anim-2 {
      0% {
        clip: rect(59px, 9999px, 91px, 0);
      }
      5% {
        clip: rect(68px, 9999px, 4px, 0);
      }
      10% {
        clip: rect(81px, 9999px, 83px, 0);
      }
      15% {
        clip: rect(76px, 9999px, 15px, 0);
      }
      20% {
        clip: rect(77px, 9999px, 9px, 0);
      }
      25% {
        clip: rect(70px, 9999px, 14px, 0);
      }
      30% {
        clip: rect(34px, 9999px, 87px, 0);
      }
      35% {
        clip: rect(77px, 9999px, 74px, 0);
      }
      40% {
        clip: rect(81px, 9999px, 96px, 0);
      }
      45% {
        clip: rect(84px, 9999px, 87px, 0);
      }
      50% {
        clip: rect(1px, 9999px, 40px, 0);
      }
      55% {
        clip: rect(8px, 9999px, 2px, 0);
      }
      60% {
        clip: rect(28px, 9999px, 89px, 0);
      }
      65% {
        clip: rect(92px, 9999px, 40px, 0);
      }
      70% {
        clip: rect(69px, 9999px, 52px, 0);
      }
      75% {
        clip: rect(48px, 9999px, 95px, 0);
      }
      80% {
        clip: rect(23px, 9999px, 40px, 0);
      }
      85% {
        clip: rect(2px, 9999px, 21px, 0);
      }
      90% {
        clip: rect(1px, 9999px, 64px, 0);
      }
      95% {
        clip: rect(59px, 9999px, 57px, 0);
      }
      100% {
        clip: rect(34px, 9999px, 40px, 0);
      }
    }
    .glitch:before {
      content: attr(data-text);
      position: absolute;
      left: -2px;
      text-shadow: 1px 0 blue;
      top: 0;
      color: white;
      background: black;
      overflow: hidden;
      clip: rect(0, 900px, 0, 0);
      animation: noise-anim-2 3s infinite linear alternate-reverse;
    }
  </style>
  <script
    src="https://cpwebassets.codepen.io/assets/editor/iframe/iframeConsoleRunner-7549a40147ccd0ba0a6b5373d87e770e49bb4689f1c2dc30cccc7463f207f997.js"></script>
  <script
    src="https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-5e03f34e38152f20eb79c96b0b89c2d99c5085e9ae9386dc71e2f0b3c30bf513.js"></script>
  <script
    src="https://cpwebassets.codepen.io/assets/editor/iframe/iframeRuntimeErrors-4f205f2c14e769b448bcf477de2938c681660d5038bc464e3700256713ebe261.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
  <style media="" data-href="https://fonts.googleapis.com/css?family=Varela">
    /* latin-ext */
    @font-face {
      font-family: 'Varela';
      font-style: normal;
      font-weight: 400;
      src: url(https://fonts.gstatic.com/s/varela/v16/DPEtYwqExx0AWHX5DR4ETvw.woff2) format('woff2');
      unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    /* latin */
    @font-face {
      font-family: 'Varela';
      font-style: normal;
      font-weight: 400;
      src: url(https://fonts.gstatic.com/s/varela/v16/DPEtYwqExx0AWHX5Ax4E.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
  </style>
  <div data-text="抖音">抖音</div>
  <script
    src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</body>
</html>

        查看在线实例

        通过以上内容我们知道了css如何实现抖音文字抖动的特效?感谢您访问“我爱捣鼓(www.woaidaogu.com)”网站的内容,希望对大家有所帮助!引用本文内容时,请注明出处!谢谢合作!


相关资讯

  • 设置英文首字母大写的css属性是什么?

    设置CSS text-transform 的属性为capitalize就可以实现英文首字母大写。 定义和用法  text-transform 属性控制文本的大小写。 属性值 值 描 述 none 默认。定义带有小写字…

    2021/7/14 20:35:17
  • 只让页面显示横滚动条,不显示竖滚动条如何实现?

    只让页面显示横滚动条,不显示竖滚动条的方法其实很简单,主要用到body的两个css属性 overflow和 overflow-y,如下所示:body { overflow:scroll; overflow-y:hidden;}

    2021/2/28 21:45:25
  • 网页的滚动条样式可以修改吗?如何修改?

    网页的滚动条样式可以修改的,主要是使用css来控制那如何修改呢?如下代码:<div class="inner"> <div class="innerbox"> <p style="height:200px;">这是内容111</p> <p style="hei…

    2021/2/28 21:15:24
  • css如何实现6张图片均匀排列在一行?

    css部分如下:img{width:120px; height:80px;float:left;margin-right:16px;}.img3{margin-right:0;}html部分如下:<img src="images/001.jpg" /><img src="images/002.jpg" /><img src="images/003.jpg" /><img src=…

    2021/2/28 21:10:01