html好看的文字特效

这篇具有很好参考价值的文章主要介绍了html好看的文字特效。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

html文字特效,3D文字、会跳动得文字、文字倒影、文字强调动画等超多炫酷特效,及详细讲解文本属性,希望能给你作为参考,给你带来好的灵感。

1.3D文字

1.1 3D文字源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>xcLeigh</title>
    <style>
        body {
            background: orange;
        }
        h1 {
            margin: 100px;
            text-align: center;
            color: white;
            font-size: 5em;
            transition: 0.5s;
            font-family: Arial, Helvetica, sans-serif;
			cursor:pointer;
        }
        h1:hover {
            text-shadow: 0 1px 0 #ccc, 0 2px 0 #ccc,
                0 3px 0 #ccc, 0 4px 0 #ccc,
                0 5px 0 #ccc, 0 6px 0 #ccc,
                0 7px 0 #ccc, 0 8px 0 #ccc,
                0 9px 0 #ccc, 0 10px 0 #ccc,
                0 11px 0 #ccc, 0 12px 0 #ccc,
                0 20px 30px rgba(0, 0, 0, 0.5);
        }
		a{
			text-decoration:none;
			color:white;
		}
    </style>
</head>
 
<body>
	<div style="text-align:right;">
		<a href="https://blog.csdn.net/weixin_43151418/article/details/126306661">程序员优质资源汇总【附好的源码】</a>
	</div>
    <h1>xcLeigh(鼠标悬浮特效)</h1>
</body>
 
</html>

1.2 3D文字效果

html好看的文字特效

2.会跳动得文字

2.1 会跳动得文字源码

引用CSS文件见,文字特效下载附件(文章结尾)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>xcLeigh</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
	<div style="text-align:right;">
		<a href="https://blog.csdn.net/weixin_43151418/article/details/126306661">程序员优质资源汇总【附好的源码】</a>
	</div>
    <div id="box">
		<span>
		x
		</span>
		<span>
		c
		</span>
		<span>
		L
		</span>
		<span>
		e
		</span>
		<span>
		i
		</span>
		<span>
		g
		</span>
		<span>
		h
		</span>
	</div>
</body>
</html>

2.2 会跳动得文字效果

html好看的文字特效

3.文字倒影

3.1 文字倒影源码

相关属性说明

1、direction 定义方向,取值包括 above 、 below 、 left 、 right。
above:指定倒影在对象的上边
below:指定倒影在对象的下边
left:指定倒影在对象的左边
right:指定倒影在对象的右边
2、offset定义反射偏移的距离,取值包括数值或百分比,其中百分比根据对象的尺寸进行确定。默认为0。
用长度值来定义倒影与对象之间的间隔。可以为负值。用百分比来定义倒影与对象之间的间隔。可以为负值。
3、mask-box-image定义遮罩图像,该图像将覆盖投影区域。如果省略该参数值,则默认为无遮罩图像。
取值:
none:无遮罩图像:
使用绝对或相对地址指定遮罩图像。
使用线性渐变创建遮罩图像。
使用径向(放射性)渐变创建遮罩图像。
使用重复的线性渐变创建背遮罩像。
使用重复的径向(放射性)渐变创建遮罩图像。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>xcLeigh</title>
    <style>
        body {
            background: orange;
        }
 
        h1 {
            margin: 100px;
            text-align: center;
            color: white;
            font-family: Arial, Helvetica, sans-serif;
			cursor:pointer;
            -webkit-box-reflect:below 0 -webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,.3));
			font:bold 50px/1.231 georgia,sans-serif;
			text-transform:uppercase;
        }
 
        h1:hover {
        }
		a{
			text-decoration:none;
			color:white;
		}
    </style>
</head>
 
<body>
	<div style="text-align:right;">
		<a href="https://blog.csdn.net/weixin_43151418/article/details/126306661">程序员优质资源汇总【附好的源码】</a>
	</div>
    <h1>xcLeigh(鼠标悬浮特效)</h1>
</body>
 
</html>

3.2 文字倒影效果

html好看的文字特效

4.文字强调效果

4.1 文字强调效果源码

引用CSS文件见,文字特效下载附件(文章结尾)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>xcLeigh</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
	<div style="text-align:right;">
		<a href="https://blog.csdn.net/weixin_43151418/article/details/126306661">程序员优质资源汇总【附好的源码】</a>
	</div>
    <h1>xcLeigh(鼠标悬浮特效)</h1>
</body>
</html>

4.2 文字强调效果效果

html好看的文字特效

5.更多超级酷炫效果

文字渐出,波浪渐出
html好看的文字特效

文字渐出,窗帘式打开
html好看的文字特效

文字渐出,一个一个出
html好看的文字特效

文字渐出,渐显
html好看的文字特效

文字渐出,打印机
html好看的文字特效

文字渐出,圆形特效
html好看的文字特效

文字渐出,文字斜出
html好看的文字特效

更多效果见文章末尾得附件下载

6.文字属性讲解

属性 名称 说明
font-size 字体大小 单位是px,浏览器默认是16px,设计图常用字号是12px
font-family 字体 当字体是中文字体、英文字体中有空格时,需加双引号;多个字体中间用逗号链接先解析第1个字体如果没有解析第2个字体,以此类推
color 颜色 color.red; color:f#f0; color:rgb(255,0,0); 0-255
font-weight 加粗 font-weight:bolder(更粗的)/bold (加粗) rmal (常规)
font-weight: 100-900; 100- 500不加粗600- 900加粗
font-style 倾斜 font-style: italic(斜体 字)/oblique(倾斜的文字)normal (常规显示) ;text-align:left;水平靠左
text-align 文本水平对齐 text-align: right; 水平靠右 text-align: center; 水平居中 text- algn;justify;水平2端对齐,但是只对多行起作用。
line-height 行高 line-height的数据=height的数据,可以实现单行文本垂直居中
text-indent 首行缩进 text-indent可以取负值; text-indent属性 只对第一行起作用 text-indent可以设置为2em自动缩进2个文字
letter-spacing 字间距 控制文字和文字之间的间距
text-decoration 文本修饰 text-decoration:none没有/underline下划线/overline,上划线ne - through删除线 font是font-style font-weight font- size / line-height font- family的简写。
font 文字简写 fontitalic 800 30px/80px““宋体”;顺序不能改变,必须同时指定font-size和font- family 属性时才起作用

7.文字特效下载

html好看的文字特效 点击下载


     💞 关注博主 带你实现畅游前后端

     🏰 加入社区 带你体验马航不孤单

     亲,码字不易,动动小手,欢迎 点赞 ➕ 收藏,如 🈶 问题请留言(评论),博主看见后一定及时给您答复,💌💌💌文章来源地址https://www.toymoban.com/news/detail-490763.html

到了这里,关于html好看的文字特效的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • html Canvas粒子文字特效

    代码有点长,下面是代码: 有两个css代码  style.css代码: normalize.css  js代码: 运行效果: 20240120_090246 代码可以直接复制 如果有啥问题可以问我看到一定会回复大家,如果大家喜欢可以作者点赞和关注 大家的支持是我创作下去的最大动力!

    2024年01月24日
    浏览(34)
  • python流星雨特效代码复制,python好看的流星雨代码

    大家好,小编为大家解答python流星雨特效代码需要什么模块的问题。很多人还不知道python流星雨特效代码微信,现在让我们一起来看看吧! hello,大家好,我是wangzirui32,今天我们来学习如何用Pygame制作一场漂亮的流星雨。 开始学习吧! 文章目录 前言 1. 素材图片 2. 项目结构

    2024年02月03日
    浏览(48)
  • CSS好看的动态渐变文字

       

    2024年02月14日
    浏览(45)
  • 好看的html登录界面,

    界面效果: 代码:

    2023年04月09日
    浏览(45)
  • html里面的好看的动画效果

    html里面的好看的动画效果,包括基本的平移,旋转,抖动,变色等动画效果,可以直接嵌入代码使用; 元素属性介绍 基本语法格式: transform:translate(x-value,y-value); x-value 指元素在 水平方向 上移动的距离, y-value 指元素在 垂直方向 上移动的距离。如果 省略了第二个参数

    2024年02月11日
    浏览(46)
  • 好看的登录页面login.html

    2024年02月12日
    浏览(54)
  • HTML 实现好看的登录注册界面(一)

    2024年02月09日
    浏览(54)
  • css之文字连续光影特效、动画、scss

    2024年02月10日
    浏览(39)
  • CSS特效007:绘制3D文字,类似PS效果

    CSS常用示例100+专栏目录 本专栏记录的是经常使用的CSS示例与技巧,主要包含CSS布局,CSS特效,CSS花边信息三部分内容。其中CSS布局主要是列出一些常用的CSS布局信息点,CSS特效主要是一些动画示例,CSS花边是描述了一些CSS相关的库、知识点、理论篇章等。 因为常用所以记录

    2024年02月05日
    浏览(58)
  • html实现好看的多种风格导航菜单(附源码)

    作者:xcLeigh 文章地址:https://blog.csdn.net/weixin_43151418/article/details/131412565 html实现好看的多种风格导航菜单(附源码) ,导航菜单,源码下载,分为顶部导航菜单,悬浮按钮菜单,右键功能菜单,左侧导航菜单四种导航菜单。每种导航菜单有至少三种风格,总共23种风格,各种风格都

    2024年02月11日
    浏览(59)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包