純css3藝術文字樣式效果代碼

本文轉載自查看原文 2016-01-27 00:29 12236 CSS/ css/ 樣式/ html5/ 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>
<!--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>

參考：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 css3火焰文字樣式代碼 CSS3利用text-shadow屬性實現多種效果的文字樣式展現 CSS3 文字忽大忽小效果樣式收藏 CSS系列：CSS文字樣式 CSS a控制超鏈接文字樣式七款好看文字樣式純css 七款好看文字樣式純css AUTOCAD——文字樣式 [html5/css3] css3 文字和字體樣式 CSS3實現文字浮雕效果，鏤刻效果，火焰文字