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

效果: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>

<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'>OutlinedAh1>
<h1 class='outlinedA mid'>OutlinedAh1>
<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'>OutlinedBh1>
<h1 class='hsl'>Hsl Colorsh1>
<h1 class='test'>Testh1>
<h1 class='bottom'>Bottom Lighth1>
<h1 class='dilate'>Dilateh1>
<h1 class='erode'>Erodeh1>
<h1 class='distant1'>Distant Lighth1>
<h1 class='distant-top'>Distant Toph1>
<h1 class='distant-front'>Distant Fronth1>
<h1 class='diff1'>Diffused Lighth1>
<h1 class='bevel'>Bevelh1>
<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.comh1>
body>
html>

参考:

  • 你需要知道的三个CSS技巧
  • 纯CSS3邮件、旗帜、音乐、文件和眼睛的...
  • CSS热门知识点总结
  • 井号后带三位数字或者字母表示的颜色
  • css3改变选择文本背景颜色
  • CSS3实现背景颜色渐变
  • pre强制换行代码
  • 纯CSS3漂亮的房子不错的天气
  • CSS3径向渐变旋转的圆球
  • css3 transition属性实现3d动画效果
  • css3 3d展示中rotate()介绍与简单实...
  • CSS学习笔记之定位position属性
  • CSS选择器多样应用
  • css8种选择器详解
  • CSS3的text-overflow
  • CSS3女神图片旋转木马
  • 用CSS让文字居于div的底部
  • CSS transform中的rotate的旋转中心
  • css3给div加阴影
  • css强制换行
  • WEB前端面试题
  • CSS3画圆
  • CSS怎样取消两个块状元素之间空隙
  • 使用CSS实现图片磨砂玻璃效果
  • 使用CSS在移动端禁用长按选中文本功能
  • a:link,a:visited,a:hover,a:active
  • 多种方法用 css-实现元素垂直居中对齐
  • CSS3鼠标悬停360度旋转效果
  • CSS导入使用及引用的两种方法
  • 使用DIV+CSS开发一个简单漂亮的登录页...
  • css hover鼠标悬停图片显示标注
  • CSS3立体3D文字样式
  • CSS3的background-size: cover;
  • css3鼠标悬停(hover)打开打火机代码

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

 

你可能感兴趣的:(纯css3艺术文字样式效果代码)