suchen

Heim  >  Artikel  >  Web-Frontend  >  纯css3艺术文字样式效果代码_html/css_WEB-ITnose

纯css3艺术文字样式效果代码_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:28:181390Durchsuche

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

参考：

  • 你需要知道的三个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)打开打火机代码

    • 更多：

     

    Stellungnahme：
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Vorheriger Artikel：dragsort html拖拽排序_html/css_WEB-ITnoseNächster Artikel：FusionCharts中文教程：自定义图表--提示工具_html/css_WEB-ITnose

    In Verbindung stehende Artikel

    Mehr sehen