Home > Web Front-end > HTML Tutorial > 纯css3艺术文字样式效果代码_html/css_WEB-ITnose

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

WBOY
Release: 2016-06-24 11:28:18
Original
1421 people have browsed it

效果: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>
Copy after login

参考:

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

     

    source:php.cn
    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Popular Tutorials
    More>
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template