Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >html抖音效果:CSS实现抖音彩色文字抖动效果

html抖音效果:CSS实现抖音彩色文字抖动效果

作者头像
德顺
发布于 2023-08-24 07:17:25
发布于 2023-08-24 07:17:25
64300
代码可运行
举报
文章被收录于专栏:前端资源前端资源
运行总次数:0
代码可运行

闲来无事写了一个抖音文字都懂效果(比较晃眼),非常简单,就是一个 CSS3 的动画效果。

直接将这下面代码,放到你的 CSS 文件:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.douyin{
    animation: uk-text-shadow-glitch .65s cubic-bezier(1,-2.91,0,3.79) 0s infinite normal both running;
}
@keyframes uk-text-shadow-glitch {
    0% {
        text-shadow: none
    }
    25% {
        text-shadow: -2px -2px 0 #ff0048,2px 2px 0 #3234ff
    }
    50% {
        text-shadow: 2px -2px 0 #ff0048,-2px 2px 0 #3234ff
    }
    75% {
        text-shadow: -2px 2px 0 #ff0048,2px -2px 0 #3234ff
    }
    100% {
        text-shadow: 2px 2px 0 #ff0048,-2px -2px 0 #3234ff
    }
}
@keyframes uk-flicker {
    0% {
        opacity: 0
    }
    10% {
        opacity: .6;
        transform: scale(.8)
    }
    20% {
        opacity: 0
    }
    40% {
        opacity: 1
    }
    50% {
        opacity: .2;
        transform: scale(1.1)
    }
    100% {
        opacity: 1;
        transform: scale(1)
    }
}

其中 cubic-bezier(1,-2.91,0,3.79)贝赛尔曲线,数值越大,抖的越厉害。具体可以参考 <timing-function>API

然后给你需要抖起来的文字加上 .douyin 的 class ,就可以了,代码如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<p class="douyin">www.w3h5.com</p>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-08-01),如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
纯css实现117个Loading效果(上)
这是我这几十年间从世界各地寻觅到的 Loading特效,合计117个(本文贴出第1-39个),而且是 纯CSS 制作的。
德育处主任
2022/04/15
2.8K0
纯css实现117个Loading效果(上)
纯css实现117个Loading效果(中)
这是我这几十年间从世界各地寻觅到的 Loading特效,合计117个(本文贴出第40-78个),而且是 纯CSS 制作的。
德育处主任
2022/04/17
1.4K0
纯css实现117个Loading效果(中)
仅用 CSS 实现赛博朋克 2077 风格视觉效果
《赛博朋克2077》 是一款动作角色类游戏,于 2020年12月10日 登陆各大游戏平台。故事发生在夜之城,权力更迭和身体改造是这里不变的主题。玩家将扮演一名野心勃勃的雇佣兵:V,追寻一种独一无二的植入体——获得永生的关键。它以自由的探索性,较高的操控度以及惊艳的视觉特效收获了一大批玩家。我非常喜欢 2077 官网的设计风格,因此本篇文章主要以 2077 官网为例,通过几个例子,依次实现赛博朋克风格元素效果。
zz_jesse
2021/07/30
5950
纯CSS3实现loading虚影加载效果
从效果而言,我们主要实现下列步骤: 1、让一个圆旋转,并且是先快后慢; 2、有颜色过渡效果、并且有透明度; 3、然后就是复制上面的效果,5个,然后按时间执行动画
Javanx
2019/09/04
1K0
纯CSS3实现loading虚影加载效果
原来404页面也能这么炫酷!
在浏览网页的时候,经常会遇到一些404的网页,一般来说都是很简陋的布局,但是最近发现了一个超炫酷的404页面,自己也学着做了一个,下面一起来学习一下怎么制作吧!
小丞同学
2021/08/16
8521
【前端攻略--HTML/CSS】这是你需要的transform学习教程
transition语法格式:transition: property duration timing-function delay;
野原测试开发
2019/07/10
1K0
深藏在CSS里的诗情画意(十个原创的CSS特效,不容错过)
很多的碎碎念都用都用 HTML 跟 CSS 来记录在我的codepen https://codepen.io/krischan77 之上,眼见积累到了一些了,就选出几个来与大家一同分享。
陈大鱼头
2020/04/16
7880
深藏在CSS里的诗情画意(十个原创的CSS特效,不容错过)
搞定这些疑难杂症,向css3动画说yes
本文篇幅比较长,涉及到的知识点也比较多,如3d,动画性能,动画js事件等,参考文献及demo展示也比较多,所以建议pc阅读效果更佳。 动画库 到现在来说css3动画也不是什么新技术,既然是要搞定它,好歹我们也得先看下别人做的一些东西吧,所以在此先向各位推荐几个比较好用的动画库: animate.css effeckt hover.css animatable 关于css3动画不得不说的几个属性 看完上面那些动画库,心痒就不如行动了。 说起css3动画,有一个属性我们绝对避不开了,那就是transform这个
IMWeb前端团队
2018/01/15
2.1K0
搞定这些疑难杂症,向css3动画说yes
html下划线 下移,css如何实现下划线滑动效果
本文主要讲述两种下划线动效效果,第一种悬停时X轴由内向外展开实现动画效果,第二种为左右自动展示,由左向右,或由右向左。
全栈程序员站长
2022/09/03
2.2K0
html下划线 下移,css如何实现下划线滑动效果
天哪!跟真的一样(CSS)
  无论是css还是别的,前端的学习总是妙趣横生,只要思想在不断进步,技术就会一次次的突破。如果你学习过CSS,你会更加了解这段代码的神奇,送给你,远道而来的求学者。   如果你不曾学习过CSS,又想将代码保存下来,留待将来学习和参悟,那么请点击 “ 这里 ” ,一遍就能学废。
我不是费圆
2020/09/21
9400
天哪!跟真的一样(CSS)
SAO-UI-PLAN--Card-Player
这是SAO UI PLAN 的第五弹了,效果没有我想的那么理想。在面积有限的作者卡片上做文章实在是有些捉襟见肘,除了可以在配色上动动脑筋以外,没啥可以放内容的地方。
Akilar
2021/08/03
8640
奇思妙想 CSS 文字动画
本文将会和这篇 -- CSS 奇思妙想边框动画类似,讲一些文字效果,利用不同的属性搭配,实现各式各样的文字动效。
Sb_Coco
2021/03/11
3.5K0
奇思妙想 CSS 文字动画
仅用一个HTML标签,实现带动画的抖音LOGO
大家好,我是零一,今天给大家表演 仅用一个HTML标签实现带动画的抖音LOGO,涉及了很多知识点,欢迎交流讨论
@零一
2022/04/26
1.3K0
仅用一个HTML标签,实现带动画的抖音LOGO
分享三款好看的文字特效
一、抖音故障艺术效果 1、引用CSS.tiktok{ text-shadow: -2px 0 rgba(0, 255, 255, .5), 2px 0 rgba(255, 0, 0, .5); animation: shake-it .5s reverse infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);}@keyframes shake-it{ 0%{ text-shadow: 0 0 rgba(0, 255, 255,
小何.
2023/03/03
1.2K0
CSS八种让人眼前一亮的HOVER效果
巧用伪元素:before、:after等,让你的页面按钮眼前一亮。原文链接:8 amazing HTML button hover effects, that will make your website memorable。更多内容:github.com/reng99/blog…
Jimmy_is_jimmy
2020/10/15
8530
css3动画从入门到精通
什么是css3动画? 通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。 CSS3带来了圆角,半透明,阴影,渐变,多背景图等新的特征,轻松实
xiangzhihong
2018/02/05
2.5K0
css3动画从入门到精通
CSS3 动画 animation
复习下 css3 的动画, 都快不会写了,那会儿挺喜欢 flash 的,可惜了时代在前进。写这里就当是文档看吧
chuchur
2022/10/25
5300
CSS3 动画 animation
CSS3的transition动画功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>transition动画效果</title> <style> body{ background-color: rgba(163, 207, 255, 0.69); } a:link{ color: #ff5ee6; }
xing.org1^
2018/05/17
8870
一颗红心,三手准备,分别基于图片(img)/SCSS(样式)/SVG动画实现动态拉轰的点赞按钮特效
    华丽炫酷的动画特效总能够让人心旷神怡,不能自已。艳羡之余,如果还能够探究其华丽外表下的实现逻辑,那就是百尺竿头,更上一步了。本次我们使用图片、SCSS样式以及SVG图片动画来实现“点赞”按钮的动画特效,并比较不同之处。
用户9127725
2022/09/28
1.4K0
一颗红心,三手准备,分别基于图片(img)/SCSS(样式)/SVG动画实现动态拉轰的点赞按钮特效
Vue-transition组件的Css动画+过渡(1)入门,笔记总结 “建议收藏”
这里说一下transition: property duration timing-function delay; 一共有四个参数可选;
玖柒的小窝
2021/09/29
1.5K0
相关推荐
纯css实现117个Loading效果(上)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验