首页 最新 热门 推荐

  • 首页
  • 最新
  • 热门
  • 推荐

html好看的文字特效

  • 25-02-22 04:41
  • 3319
  • 14022
blog.csdn.net

文章目录

  • 1.3D文字
    • 1.1 3D文字源码
    • 1.2 3D文字效果
  • 2.会跳动得文字
    • 2.1 会跳动得文字源码
    • 2.2 会跳动得文字效果
  • 3.文字倒影
    • 3.1 文字倒影源码
    • 3.2 文字倒影效果
  • 4.文字强调效果
    • 4.1 文字强调效果源码
    • 4.2 文字强调效果效果
  • 5.更多超级酷炫效果
  • 6.文字属性讲解
  • 7.文字特效下载

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

1.3D文字

1.1 3D文字源码




    
    
    xcLeigh
    

 

	
程序员优质资源汇总【附好的源码】

xcLeigh(鼠标悬浮特效)

1.2 3D文字效果

在这里插入图片描述

2.会跳动得文字

2.1 会跳动得文字源码

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




    
    
    xcLeigh
    


	
程序员优质资源汇总【附好的源码】
x c L e i g h

2.2 会跳动得文字效果

在这里插入图片描述

3.文字倒影

3.1 文字倒影源码

相关属性说明

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




    
    
    xcLeigh
    

 

	
程序员优质资源汇总【附好的源码】

xcLeigh(鼠标悬浮特效)

3.2 文字倒影效果

在这里插入图片描述

4.文字强调效果

4.1 文字强调效果源码

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




    
    
    xcLeigh
    


	
程序员优质资源汇总【附好的源码】

xcLeigh(鼠标悬浮特效)

4.2 文字强调效果效果

在这里插入图片描述

5.更多超级酷炫效果

文字渐出,波浪渐出
请添加图片描述

文字渐出,窗帘式打开
请添加图片描述

文字渐出,一个一个出
请添加图片描述

文字渐出,渐显
请添加图片描述

文字渐出,打印机
请添加图片描述

文字渐出,圆形特效
请添加图片描述

文字渐出,文字斜出
请添加图片描述

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

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好看的文字特效 点击下载


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

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

     亲,码字不易,动动小手,欢迎 点赞 ➕ 收藏,如 ? 问题请留言(评论),博主看见后一定及时给您答复,???

注:本文转载自blog.csdn.net的xcLeigh的文章"https://blog.csdn.net/weixin_43151418/article/details/126362293"。版权归原作者所有,此博客不拥有其著作权,亦不承担相应法律责任。如有侵权,请联系我们删除。
复制链接
复制链接
相关推荐
发表评论
登录后才能发表评论和回复 注册

/ 登录

评论记录:

未查询到任何数据!
回复评论:

分类栏目

后端 (14832) 前端 (14280) 移动开发 (3760) 编程语言 (3851) Java (3904) Python (3298) 人工智能 (10119) AIGC (2810) 大数据 (3499) 数据库 (3945) 数据结构与算法 (3757) 音视频 (2669) 云原生 (3145) 云平台 (2965) 前沿技术 (2993) 开源 (2160) 小程序 (2860) 运维 (2533) 服务器 (2698) 操作系统 (2325) 硬件开发 (2492) 嵌入式 (2955) 微软技术 (2769) 软件工程 (2056) 测试 (2865) 网络空间安全 (2948) 网络与通信 (2797) 用户体验设计 (2592) 学习和成长 (2593) 搜索 (2744) 开发工具 (7108) 游戏 (2829) HarmonyOS (2935) 区块链 (2782) 数学 (3112) 3C硬件 (2759) 资讯 (2909) Android (4709) iOS (1850) 代码人生 (3043) 阅读 (2841)

热门文章

101
推荐
关于我们 隐私政策 免责声明 联系我们
Copyright © 2020-2024 蚁人论坛 (iYenn.com) All Rights Reserved.
Scroll to Top