创意代码之文字特效合集

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

前言


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


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个点组成环形,那线就可能跑出环形外面,就不能实现闪烁的效果了


小结


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

目录
相关文章
|
3天前
|
移动开发 前端开发 JavaScript
舞动屏幕盛宴:CSS3 动画的创意艺术之旅
舞动屏幕盛宴:CSS3 动画的创意艺术之旅
|
1月前
|
前端开发 JavaScript SEO
学成在线制作【网页布局实战】
学成在线制作【网页布局实战】
87 0
|
7月前
|
程序员
技术文章精美配图模板网站推荐-创客贴
技术文章精美配图模板网站推荐-创客贴
34 0
|
11月前
|
前端开发 JavaScript
前端代码分享——星空背景特效(内含源码)
前端代码分享——星空背景特效(内含源码)
|
11月前
Photoshop制作简洁清新的插画海报图片
Photoshop制作简洁清新的插画海报图片
54 0
|
前端开发
前端知识案例学习3-毛玻璃效果
前端知识案例学习3-毛玻璃效果
56 0
前端知识案例学习3-毛玻璃效果
|
机器学习/深度学习 人工智能 自然语言处理
你给文字描述,AI艺术作画,精美无比!附源码,快来试试!
Disco Diffusion 是一款AI数字艺术创作的工具,将给出的 Prompts 文字信息变成图像信息,可以在 Google Drive 直接运行,也可以部署到本地,是 Dall-E2 和 MidJourney 的完美免费替代!
2631 2
你给文字描述,AI艺术作画,精美无比!附源码,快来试试!
|
IDE 开发工具 C++
vs把玩日志——手艺人的美化艺术
正片开始👀 安装拓展模块👏 正统的美化手艺先从背景的插入开始 工欲善其事,必先利其器,首先我们需要知道用到哪些工具,在扩展>管理扩展里,点击“联机”,在搜索框里搜索ClaudiaIDE扩展模块,在之前2010版本是可以搜出来的
vs把玩日志——手艺人的美化艺术
|
计算机视觉
UWP 手绘视频创作工具技术分享系列 - 手绘视频与视频的结合
原文:UWP 手绘视频创作工具技术分享系列 - 手绘视频与视频的结合 本篇作为技术分享系列的第三篇,详细讲一下手绘视频中结合视频的处理方式。 随着近几年短视频和直播行业的兴起,视频成为了人们表达情绪和交流的一种重要方式,人们对于视频的创作、编辑和分享有了更多的需求。
1395 3
|
前端开发 容器 Web App开发
如何用纯 CSS 创作一只思考的手
效果预览 在线演示 按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comehope/pen/WgdVyx/ 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
736 0