创意代码之文字特效合集

简介: 因为写的几个创意代码的特效都十分的简单,就合并到这篇文章里了,文章会从实现思路和遇到的问题两方面讲解实现如何现实这些简单的特效。

前言


因为写的几个创意代码的特效都十分的简单,就合并到这篇文章里了,文章会从实现思路和遇到的问题两方面讲解实现如何现实这些简单的特效。


1.实现的主要点解析


主要使用了: CSS3里的text-shadow(基本文字阴影)再配合火焰的原本颜色就行了,很简单的一个效果。


2.知识点


text-shadow: h-shadow v-shadow blur color

h-shadow:水平阴影的位置

v-shadow:垂直阴影的位置

blur:模糊的距离

color: 阴影的颜色


二.鼠标点击事件文字抖动特效

微信截图_20220531215740.png


1.实现的主要点解析


如何实现鼠标在文字上移动时,文字有抖动的效果呢?思路就是对文字数组进行遍历,然后添加鼠标事件,当监听到鼠标在文字上时替换成'空格',类似位置上下左右平移的效果即可。


2.遇到的问题


需要对文字数组进行重新赋值,不然移动后文字无法回到原来的位置。

实现代码:微信截图_20220531215815.png


三.简单的霓虹灯特效

微信截图_20220531215852.png


1.实现的主要点解析


霓虹灯的特点是不断的闪烁,所以实现这个特效的关键点就是如何实现闪烁,使用了CSS3里的box-shadow(阴影效果)类似第一个火焰文字特效里的text-shadow,然后就是如何让元素闪烁的问题,采用了light div:nth-child1~4的环形效果,让线沿着这四个点移动,即可实现闪烁的效果


2.遇到的问题


如果不用4个点组成环形,那线就可能跑出环形外面,就不能实现闪烁的效果了


小结


以上就是一些简单的文字特效,其实实现起来不是很难,只是要注意一些关键的点就可以了。

目录
相关文章
|
7月前
自适应简约风格个人主页源码
一款有音乐,有花瓣飘落,有看板娘,还有轮播图,轮播图可以添加跳转链接,非常实用的个人介绍导航页面,大家需要的自行下载!
49 2
自适应简约风格个人主页源码
|
程序员
技术文章精美配图模板网站推荐-创客贴
技术文章精美配图模板网站推荐-创客贴
56 0
|
存储 消息中间件 设计模式
DDIA 读书分享 第一章 文字稿
DDIA 读书分享 第一章 文字稿
156 0
DDIA 读书分享 第一章 文字稿
|
存储 语音技术 iOS开发
写作小技能:卡片式写文章(用3-5张卡片写文)
写作小技能:卡片式写文章(用3-5张卡片写文)
278 0
写作小技能:卡片式写文章(用3-5张卡片写文)
|
计算机视觉
UWP 手绘视频创作工具技术分享系列 - 手绘视频与视频的结合
原文:UWP 手绘视频创作工具技术分享系列 - 手绘视频与视频的结合 本篇作为技术分享系列的第三篇,详细讲一下手绘视频中结合视频的处理方式。 随着近几年短视频和直播行业的兴起,视频成为了人们表达情绪和交流的一种重要方式,人们对于视频的创作、编辑和分享有了更多的需求。
1526 3
|
前端开发 容器 Web App开发
如何用纯 CSS 创作一只卡通鹦鹉
效果预览 在线演示 按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comehope/pen/vrRmWy 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
844 0
UWP 手绘视频创作工具技术分享系列 - 文字的解析和绘制
原文:UWP 手绘视频创作工具技术分享系列 - 文字的解析和绘制 本篇作为技术分享系列的第二篇,详细讲一下文字的解析和绘制,这部分功能的研究和最终实现由团队共同完成,目前还在寻找更理想的实现方式。 首先看一下文字绘制在手绘视频中的应用场景     文字是手绘视频中很重要的表现形式,应用场景很广,比如字幕、旁白和一些重要的文字说明提示。
1488 0
|
Web App开发
UWP 手绘视频创作工具技术分享系列 - 手绘视频导出
原文:UWP 手绘视频创作工具技术分享系列 - 手绘视频导出 手绘视频最终的生成物是视频文件,前面几篇主要讲的是手绘视频的创作部分,今天讲一下手绘视频的导出问题。主要以 UWP 为例,另外会介绍一些 Web 端遇到的问题和解决方法。
1446 0
|
XML 数据格式 前端开发
UWP 手绘视频创作工具技术分享系列 - SVG 的解析和绘制
原文:UWP 手绘视频创作工具技术分享系列 - SVG 的解析和绘制 本篇作为技术分享系列的第一篇,详细讲一下 SVG 的解析和绘制,这部分功能的研究和最终实现由团队的 @黄超超 同学负责,感谢提供技术文档和支持。
1438 0

热门文章

最新文章