漂亮的css文字效果

效果图：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css文字效果</title>
<style type="text/css">
* {padding: 0;margin: 0;text-align: center;
}
body {padding-bottom: 200px;
}
div {font-size: 36px;
}
.header-item {line-height: 4;
}
.box1 {color: rgba(0, 0, 0, .3);
}
.box2 {text-shadow: 0 0 5px red;-webkit-text-fill-color : transparent;
}
.box3 {-webkit-text-stroke: 1px red;-webkit-text-fill-color : transparent;
}
.box4 {background: linear-gradient( to bottom, white, black);-webkit-text-fill-color : transparent;-webkit-background-clip : text;
}
.box5 {height: 300px;width: 1280px;margin: 0 auto;font-size: 70px;font-weight: 700;background: url(http://www.cnhubei.com/xwzt/2015/2015snjlx/snjfj/201509/W020150930775925767248.jpg) no-repeat center;/*文字样式*/text-align: center;/*图片文字样式*/-webkit-text-fill-color: transparent;-webkit-background-clip: text;
}
.box6 { color:#fefefe;text-shadow:  0px 1px 0px #c0c0c0,  0px 2px 0px #b0b0b0,  0px 3px 0px #a0a0a0,  0px 4px 0px #909090,  0px 5px 10px rgba(0, 0, 0, .9);
}
.box7 {color:#fefefe;   text-shadow:  1px -1px 0 #767676,   -1px 2px 1px #737272,   -2px 4px 1px #767474,   -3px 6px 1px #787777,   -4px 8px 1px #7b7a7a,   -5px 10px 1px #7f7d7d,   -6px 12px 1px #828181,   -7px 14px 1px #868585,   -8px 16px 1px #8b8a89,   -9px 18px 1px #8f8e8d,   -10px 20px 1px #949392,   -11px 22px 1px #999897,   -12px 24px 1px #9e9c9c,   -13px 26px 1px #a3a1a1,   -14px 28px 1px #a8a6a6,   -15px 30px 1px #adabab,   -16px 32px 1px #b2b1b0,   -17px 34px 1px #b7b6b5,  -18px 36px 1px #bcbbba,   -19px 38px 1px #c1bfbf,   -20px 40px 1px #c6c4c4,   -21px 42px 1px #cbc9c8,   -22px 44px 1px #cfcdcd;
}
.box8 {background-color: #333;  background-image:  -webkit-linear-gradient(bottom left, transparent 45%, hsla(48,20%,90%,1) 45%, hsla(48,20%,90%,1) 55%, transparent 0%);background-image:  -o-linear-gradient(bottom left, transparent 45%, hsla(48,20%,90%,1) 45%, hsla(48,20%,90%,1) 55%, transparent 0%);background-image:  linear-gradient(to top right, transparent 45%, hsla(48,20%,90%,1) 45%, hsla(48,20%,90%,1) 55%, transparent 0%);;  background-size: .05em .05em;  -webkit-background-clip: text;  -webkit-text-fill-color: transparent;  -webkit-text-stroke: 2px #111;
}
</style>
</head>
<body>
<p class="header-item">1.透明文字</p>
<div class="box1">我叫吕胖胖</div><p class="header-item">2.模糊文字</p>
<div class="box2">我叫吕肥肥</div><p class="header-item">3.镂空文字</p>
<div class="box3">我是吕胖胖，我有个弟弟叫吕肥肥</div><p class="header-item">4.渐变文字</p>
<div class="box4">我是吕肥肥，我有个哥哥叫吕胖胖</div><p class="header-item">5.图片背景文字</p>
<div class="box5">我们来自快乐的胖肥家族</div><p class="header-item">6.立体文字</p>
<div class="box6">胖哥，我们下楼找小美玩吧！</div><p class="header-item">7.长阴影文字</p>
<div class="box7">肥弟，你就不怕大熊揍你吗？</div></body>
</html>

漂亮的css文字效果相关推荐

php 心电图,用ps简单制作漂亮的心电图文字效果
这篇教程是向脚本之家介绍用ps简单制作漂亮的心电图文字效果方法,教程制作出来的心电图文字效果非常漂亮,难度不是很大,推荐到脚本之家,喜欢的朋友快快来学习吧这篇教程主要是向脚本之家的朋友介绍用ps简单 ...
css文字效果（凸版印刷，发光，3D）
css文字效果一.凸版印刷效果出现在底部的浅色投影(或者出现在顶部的暗色投影)会让人产生物体是凹进平面内的错觉.同理,出现在底部的暗色投影(或者出现在顶部的浅色投影)会让人产生物体从平面上凸起的错 ...
css文字效果（文字剪贴蒙版，text-shodow的应用，文字排版等…）
原文:css文字效果(文字剪贴蒙版,text-shodow的应用,文字排版等-) 记录几种常见的文字效果示例查看:http://pangyongsheng.github.io/cssFont/ 一. ...
那些炫酷的CSS文字效果之诗词《兔》
不知不觉已经迈入2023年,今年是兔年,想到兔子就会联想到玉兔,中秋,胡萝卜,兔子不吃窝边草,这就越扯越远了,今天的主题是用纯CSS来实现各种不错的文字效果,文字则摘录古诗词中有关<兔>相 ...
精通CSS+DIV网页样式与布局——CSS文字效果
一.文字样式 1.1字体 font-family:黑体; 1.2字体大小. font-size: 0.5px; 1.3字体颜色. color:#333333; 1.4文字粗细. font-weight ...
html中加艺术字体,CSS实现漂亮的大标题文字效果
CSS实现漂亮的大标题文字效果 10月 22, 2013 评论 (6) Sponsor 现在CSS3和HTML5已经开始流行,很多网页视觉效果是可以使用CSS来完成的,今天向大家展示一下如何用CSS来 ...
[css] 用css3实现伪3D的文字效果
[css] 用css3实现伪3D的文字效果 <!DOCTYPE html> <html lang="en"><head><meta cha ...
html鼠标悬停效果_【开发小技巧】023—如何使用HTML和CSS实现3D文字效果
来源 | https://www.geeksforgeeks.org/create-a-3d-text-effect-using-html-and-css/3D文字效果是网页设计领域中最常用的文字效果 ...
CSS和JS两种颜色渐变文字效果代码
js实现颜色渐变文字效果代码:  <div id="moml"> <div style="text-al ...

漂亮的css文字效果

漂亮的css文字效果相关推荐

最新文章

热门文章