纯css3艺术文字样式效果代码

效果:http://hovertree.com/texiao/css3/1/本效果主要使用text-shadow实现.参考:http://hovertree.com/h/bjaf/css3_text_

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。

全栈程序员社区此处内容已经被作者隐藏,请输入验证码查看内容
验证码:
请关注本站微信公众号,回复“验证码”,获取验证码。在微信里搜索“全栈程序员社区”或者“www_javaforall_cn”或者微信扫描右侧二维码都可以关注本站微信公众号。

效果:http://hovertree.com/texiao/css3/1/

本效果主要使用text-shadow实现.
参考:http://hovertree.com/h/bjaf/css3_text_effect.htm

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超炫CSS3文字特效集锦DEMO演示 - 何问起</title>
<link rel="stylesheet" href="http://hovertree.com/texiao/css3/1/css/style.css" media="screen" type="text/css" />
</head>
<body>
<!--For Firefox-->
<style>a{color:blue}
.test:after {
filter: url(#light-top);
}

.dilate:before {
filter: url(#dilate10);
}

.dilate:after {
filter: url(#dilate6);
}

.erode:after {
filter: url(#erode2);
}

.distant1:after {
filter: url(#distant1);
}

.distant-top:after {
filter: url(#distant-top);
}

.distant-front:after {
filter: url(#distant-front);
}

.diff1 {
filter: url(#diff1);
}

.bevel, .bevel:after {
filter: url(#light2);
}
</style>
<h1 class='outlinedA'>OutlinedA</h1>
<h1 class='outlinedA mid'>OutlinedA</h1>
<div>
<a href="http://hovertree.com/h/bjaf/yishuzi.htm">原文</a> <a href="http://hovertree.com/">首页</a> <a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/texiao/keleyi/">向上弹出菜单</a>
</div>
<h1 class='outlinedB'>OutlinedB</h1>
<h1 class='hsl'>Hsl Colors</h1>
<h1 class='test'>Test</h1>
<h1 class='bottom'>Bottom Light</h1>
<h1 class='dilate'>Dilate</h1>
<h1 class='erode'>Erode</h1>
<h1 class='distant1'>Distant Light</h1>
<h1 class='distant-top'>Distant Top</h1>
<h1 class='distant-front'>Distant Front</h1>
<h1 class='diff1'>Diffused Light</h1>
<h1 class='bevel'>Bevel</h1>
<h1 style="font-family:cursive;text-shadow:6px 2px 2px #333;color:deeppink">何问起</h1>
<h1 style="font-family:cursive;text-shadow:6px 2px 2px #666666;">hovertree.com</h1>
</body>
</html>

参考:

更多:http://www.cnblogs.com/roucheng/p/texiao.html

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/120670.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 1数字电路设计流程与SOC芯片架构图

    1数字电路设计流程与SOC芯片架构图ASIC和SOC设计的流程相近。ASIC主要是在PC端,现在SOC是主流。一、需求分析产品要解决什么问题,预测未来3-5年的走势和趋向,确保芯片是有卖点和前瞻性,面向未来。客户向fabless提出设计要求,包括芯片需要达到的具体功能和性能方面的要求。需求分析后生成文档,性能指标,需求展望spec,让架构师可以进行细化。二、功能架构设计架构师将系统功能进行分解和细化,形成spec规范,参数化、具体化。处理器的选择:ARM、RISC-V;总线接口:AHB、APB;功能模块,是否需要D..

    2025年9月24日
    4
  • ajax复习

    ajax复习

    2022年3月13日
    47
  • 公安大数据平台应用与公安大数据建模「建议收藏」

    公安大数据平台应用与公安大数据建模「建议收藏」基于沃达德大数据平台,通过对海量数据采集、处理、存储、分析和数据挖掘,根据数据的特性,采用合适的可视化方式,将数据直观地展现出来,以帮助人们认识数据、理解数据,同时找出包含在海量数据中的规律或者信息。公安大数据主要由公安业务数据、地理信息数据、互联网数据等组成。通过沃达德大数据平台,对公安大数据进行信息提取、分析、数据挖掘和可视化,用于警情时空分布和时空演化、犯罪事件热点分析、关注对象的轨迹跟踪等多个公安业务领域,全面提升公安机关的整体工作效率。沃达德公安大数据平台,利用接警数据进行警情密度分析,以大数

    2022年6月6日
    201
  • python常见的5种框架

    python常见的5种框架1.scrapy框架scrapy框架是一套比较成熟的python爬虫框架,是使用python开发的快速、高层次的信息爬取框架,可以高效率地爬取web页面并提取出我们关注的结构化数据。scrapy框架的应用领域有许多,比如网络爬虫,数据挖掘、数据监测、自动化测试等。scrapy框架是一套开源的框架,…

    2022年6月6日
    1.1K
  • 【Java 代码实例 14】BeanUtils用法详解,附源码分析

    【Java 代码实例 14】BeanUtils用法详解,附源码分析目录一、org.apache.commons.beanutils.BeanUtils简介二、使用的前置条件三、添加pom四、代码实例1、为属性赋值2、拷贝对象,为对象赋值3、map转bean4、bean转map五、Apache的BeanUtils与Spring的BeanUtils一、org.apache.commons.beanutils.BeanUtils简介BeanUtils是ApacheCommons组件的成员之一,主要用于简化JavaBean封装数据的操作。​简化反射封装参数的步骤,给对象封

    2025年10月28日
    4
  • 忆贵州三年的教书编程岁月:不弛于空想,不骛于虚声「建议收藏」

    忆贵州三年的教书编程岁月:不弛于空想,不骛于虚声「建议收藏」回首,2016年7月他离开北京回到了家乡贵州,成为了贵州财经大学的一名青年教师。转眼,2019年7月他迎来了人生的第三张通知书,即将辗转第三个城市,开始新的征途。教书三年,讲台前的每一次分享都值得回味,学生的每一句“老师好”,每一个问候和祝福,都留下了深刻的印象。

    2022年10月7日
    2

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号