CSS实现TikTok文字抖动效果示例_CSS教程_CSS_网页制作

来源:脚本之家  责任编辑:小易  

前端同学在日常开发中精彩会因为一些动效和设计争的面红耳赤,设计希望用代码实现,前端要设计出gif图,最后谁也不让谁,设计走了,留下了前端独自加班......

CSS技术是前端必须掌握的一项技能,不仅要掌握,而且要精通。现在前端框架横行的趋势,程序员写样式的机会也越来越少,组件式开发,一个页面几乎不用写一行css代码。即使不写,但是背后的原理一定要弄明白。

从网页性能的角度,能用css实现的动画绝不用js,能用js实现的动画绝不用gif,在执行动画的时候css可以调用机器的GPU去执行,性能自然比js有优势得多。以上TikTok的文字抖动,可用css animation动画实现,通过变换文字的阴影方向,设置循环的动画帧的模糊的效果。知道原理就会简单的多。不妨平时多去揣摩揣摩。

效果图如下:

附上代码

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #000;
}
h2 {
  color: #fff;
  font-family: sans-serif;
  font-size: 4em;
  animation: animate 0.5s linear infinite;
}

@keyframes animate {
  0%, 100% {
    text-shadow: -1.5px -1.5px 0 #0ff, 1.5px 1.5px 0 #f00;
  }
  25% {
    text-shadow: 1.5px 1.5px 0 #0ff, -1.5px -1.5px 0 #f00;
  }
  50% {
    text-shadow: 1.5px -1.5px 0 #0ff, 1.5px -1.5px 0 #f00;
  }
  75% {
    text-shadow: -1.5px 1.5px 0 #0ff, -1.5px 1.5px 0 #f00;
  }
}

到此这篇关于CSS实现TikTok文字抖动效果示例的文章就介绍到这了,更多相关CSS文字抖动内容请搜索真格学网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持真格学网!


  • 本文相关:
  • css实现快速炫酷抖动动画效果
  • css3实现红包抖动效果
  • css3 transform过渡抖动问题解决
  • css3动画效果抖动解决方法
  • css 控制html页面高度导致抖动问题的原因
  • css行为expression轻松实现ie6无抖动固定定位
  • css3让div随鼠标移动而抖动起来
  • css 控制因html页面高度导致抖动的问题解决方法
  • 这种效果 怎么用DIV+CSS实现 有代码最好。。。
  • 如何用纯css制作动态网页效果?
  • 如何用css实现网页的动态效果
  • CSS滤镜 文字闪烁效果(VBS版) 高手进
  • 请问这种悬浮文字用css怎么实现
  • 如何利用CSS3动画实现弹跳效果
  • 请问这个效果用HTML+CSS应该如何实现?
  • 怎样在CSS代码里加入动态文字效果
  • 来个懂CSS的前端大神,教教我做下面这个图片展示的...
  • CSS如何实现hover动态效果的示例代码
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作csscss教程csstiktokcss3实现红包抖动效果css3 transform过渡抖动问题解决css3动画效果抖动解决方法css 控制html页面高度导致抖动问题的原因css行为expression轻松实现ie6无抖动固定定位css3让div随鼠标移动而抖动起来css 控制因html页面高度导致抖动的问题解决方法css教程css3div+css教程web标准教程浏览器兼容教程css布局实例css控制ul li 的样式详解(推荐)html设置超链接字体颜色和点击后的字体颜色div水平垂直居中的完美解决方案css设置各种中文字体如雅黑、黑体、宋体、楷体等等css 文本字体颜色设置方法(css color)css 漂亮搜索框美化代码css自定义select下拉选择框的样式(不用其他标签模拟)css圆角效果 -webkit-border-radius(css3中border-radcss 中的background:transparent到底是什么意思有什么css 首行缩进两个文字css实现tiktok文字抖动效果示例一文教你玩转css border(边框)css 实现各种 loading 效果附带解析过程如何通过 display:olck/none 完成一个菜单栏300 多行css代码搞定微信 8.0 的炸裂特效css之粘性sticky布局实现题头定位在顶部的方法有趣的css实现隐藏元素的7种思路css实现快速炫酷抖动动画效果css弹性盒flex-grow、flex-shrink、flex-basis详解子元素margin-top导致父元素移动的问题解决
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved