• html好看的文字特效


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

    1.3D文字

    1.1 3D文字源码

    
    
    
        
        
        xcLeigh
        
    
     
    
    	
        

    xcLeigh(鼠标悬浮特效)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44

    1.2 3D文字效果

    在这里插入图片描述

    2.会跳动得文字

    2.1 会跳动得文字源码

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

    
    
    
        
        
        xcLeigh
        
    
    
    	
        
    x c L e i g h
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38

    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(鼠标悬浮特效)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40

    3.2 文字倒影效果

    在这里插入图片描述

    4.文字强调效果

    4.1 文字强调效果源码

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

    
    
    
        
        
        xcLeigh
        
    
    
    	
        

    xcLeigh(鼠标悬浮特效)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    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文字特效 点击下载(待上传)


        码字不易,欢迎 点赞+关注,如有问题请留言,一定及时回复,💗💗💗💌💌💌

  • 相关阅读:
    Delphi XE E2251 Ambiguous overloaded call to ‘StrPas‘错误处理
    adb shell 查看和修改电池信息
    年化17.5%,十年8倍的“双低”转债策略:从零实现量化回测系统之三
    面试突击68:为什么 TCP 需要 3 次握手?
    单片机论文参考:1、基于单片机的电子琴
    接口测试——接口协议抓包分析与mock_L1
    认识3dmax 对象属性对话框
    【Windows】安装Microsoft Store,Microsoft Store离线包
    微信一面:什么是一致性哈希?用在什么场景?解决了什么问题?
    Pytorch-lightning简介
  • 原文地址:https://blog.csdn.net/weixin_43151418/article/details/126362293