1、线性渐变的文字
人生苦短，我用Python
2、文字阴影效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>制作文字阴影效果</title>
<style>
/*text-shadow: h-shadow v-shadow blur color;
参数说明：
h-shadow：必选参数，用于设置水平阴影的位置，可以为负值。
v-shadow：必选参数，用于设置垂直阴影的位置，可以为负值。
blur：可选参数，用于设置模糊的距离。
color：可选参数，用于设置阴影的颜色。*/
.milky{
font-size: 80px; /*设置文字大小*/
color:#3366FF; /*设置文字颜色*/
text-shadow: 0 8px 10px #6699FF; /*设置文字阴影*/
font-weight: bolder; /*设置文字宽度*/
text-align: center; /*设置文字居中*/
}
</style>
</head>
<body>
<div class="milky">让优秀成为一种习惯</div>
</body>
</html>
3、文字模糊发散效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
p{
font-family:"微软雅黑"; /*设置字体*/
font-size: 50px; /*设置文字大小*/
color:transparent; /*设置文字颜色透明*/
text-shadow: 0 0px 6px #66FF99; /*设置文字阴影*/
/*text-align: center; /*设置文字居中*/*/
}
</style>
</head>
<body>
<p>千里之行始于足下</p>
</body>
</html>
4、3D立体文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>制作3D立体文字</title>
<style>
body{
background:#CCCCCC; /*设置页面背景颜色*/
color:#FFFFFF; /*设置文字颜色*/
text-align:center/*设置文字居中*/
}
.threeD{
font-size:80px; /*设置字体大小*/
font-weight:800; /*设置字体粗细*/
text-shadow:1px 0px #009916, 1px 2px #006615, 3px 1px #009916,
2px 3px #006615, 4px 2px #009916, 4px 4px #006615,
5px 3px #009916, 5px 5px #006615, 7px 4px #009916,
6px 6px #006615, 8px 5px #009916, 7px 7px #006615,
9px 6px #009916, 9px 8px #006615, 11px 7px #009916/*设置文字阴影*/
}
</style>
</head>
<body>
<div class="threeD">3D立体文字</div>
</body>
</html>
5、以两种不同颜色显示文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>以两种不同颜色显示文字</title>
<style>
p{
font-family:"微软雅黑"; /*设置字体*/
font-size: 80px; /*设置文字大小*/
color:green; /*设置文字颜色*/
text-align: center; /*设置文字居中*/
}
.half{
height:60px; /*设置元素高度*/
position:absolute; /*绝对定位*/
overflow:hidden; /*隐藏溢出部分内容*/
color:orange; /*设置文字颜色*/
}
</style>
</head>
<body>
<p class="all">
<span class="half">诗与远方</span>诗与远方
</p>
</body>
</html>
6、制作镂空文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>制作镂空文字</title>
<style type="text/css">
/*
text-stroke:[text-stroke-width] || [text-stroke-color]
参数说明：
text-stroke-width：设置文字的描边厚度。
text-stroke-color：设置文字的描边颜色。*/
body{
/*background:#FFCCFF; /*设置页面背景颜色*/
text-align:center; /*设置文字居中*/
}
div{
font-family:"华文彩云";/*设置字体*/
font-size:64px; /*设置字体大小*/
font-weight:bolder; /*设置字体粗细*/
-webkit-text-stroke:1px #0000FF; /*文字描边*/
-webkit-text-fill-color:transparent; /*设置文字的填充颜色*/
}
</style>
</head>
<body>
<div>生活充满了阳光</div>
</body>
</html>
7、垂直显示文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模拟古诗垂直显示文本</title>
<style type="text/css">
div{
font-family:"华文楷体"; /*设置字体*/
width:400px; /*设置元素宽度*/
margin:10px auto; /*设置外边距*/
padding:30px; /*设置内边距*/
background:lightblue; /*设置背景颜色*/
font-size: 36px; /*设置文字大小*/
color:green; /*设置文字颜色*/
text-align: center; /*设置文字居中*/
border:1px solid #CCCCCC; /*设置元素边框*/
box-shadow:3px 3px 6px #999999; /*设置边框阴影*/
writing-mode:vertical-rl; /*设置以垂直方式从右向左显示*/
}
</style>
</head>
<body>
<div>
<h4>唐杜牧《山行》</h4>
<p>
远上寒山石径斜，<br>白云生处有人家。<br>停车坐爱枫林晚，<br>霜叶红于二月花。
</p>
</div>
</body>
</html>
8、文字的荧光闪烁效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实现文字的荧光闪烁效果</title>
<style type="text/css">
div {
text-align: center;
}
.a{
color:#0000FF; /*设置文字颜色*/
text-decoration: none;
font-size:5em; /*设置字体大小*/
font-family:"微软雅黑";/*设置字体*/
-webkit-animation: shine 2.4s infinite;/*设置动画*/
}
@-webkit-keyframes shine{/*创建动画*/
0%,100%{ color:#fff;text-shadow:0 0 10px #0000FF,0 0 10px #0000FF; }
50%{ text-shadow:0 0 10px #0000FF,0 0 40px #0000FF; }
}
</style>
</head>
<body>
<div class="d">
<a href="javascript:void(0);" class="a">陪你看日出</a>
</div>
</body>
</html>
9、文字的舞台灯光效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实现文字的舞台灯光效果</title>
<style>
.bg{
background: #000; /*设置元素背景颜色*/
width: 1000px; /*设置元素宽度*/
height: 300px; /*设置元素高度*/
margin: 0 auto; /*设置元素外边距*/
padding-top: 100px; /*设置元素上内边距*/
}
.shine{
width: 1000px;
font-family: "Microsoft YaHei";
font-size: 60px;
text-align: center;
background: -webkit-linear-gradient(left, #0f0, #00f) 0 0 no-repeat;/*设置线性渐变*/
-webkit-background-size: 160px; /*设置背景大小*/
-webkit-background-clip: text; /*背景被裁剪到文字*/
-webkit-text-fill-color: rgba(255, 255, 255, 0.3); /*设置文字的填充颜色*/
-webkit-animation: shine 3s infinite; /*设置动画*/
}
@-webkit-keyframes shine{ /*创建动画*/
0%{
background-position: 0 0;
}
100%{
background-position: 100% 100%;
}
}
</style>
</head>
<body>
<div class="bg">
<p class="shine">无人做你的光芒就自己照亮前方
</p>
</div>
</body>
</html>
10、发光文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>制作发光文字</title>
<style type="text/css">
.box{
margin:20px auto; /*设置元素外边距*/
text-align: center;
}
.shine{
font-size:5em; /*设置字体大小*/
font-weight:bolder; /*设置字体粗细*/
color:#FFFFFF; /*设置文字颜色*/
cursor:pointer; /*设置光标形状*/
-webkit-animation:light 1.5s ease-in-out infinite alternate;/*设置动画*/
}
@-webkit-keyframes light{/*创建动画*/
from{
text-shadow:0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #0000FF,
0 0 70px #0000FF,
0 0 80px #0000FF,
0 0 100px #0000FF,
0 0 150px #0000FF;
}
to{
text-shadow:0 0 5px #fff,
0 0 10px #fff,
0 0 15px #fff,
0 0 20px #0000FF,
0 0 35px #0000FF,
0 0 40px #0000FF,
0 0 50px #0000FF,
0 0 75px #0000FF;
}
}
</style>
</head>
<body>
<div class="box">
<a class="shine">是金子总会发光</a>
</div>
</body>
</html>
11、立体旋转的文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实现立体旋转的文字</title>
<style type="text/css">
body{
background:#000; /*设置页面背景颜色*/
}
h1{
margin-top:100px; /*设置元素上外边距*/
text-align:center; /*设置文字居中*/
color:#00FFFF; /*设置文字颜色*/
font-size:64px; /*设置字体大小*/
-webkit-transform-style:preserve-3d; /*设置元素保留3D位置*/
-webkit-animation:run ease-in-out 9s infinite; /*设置动画*/
}
@-webkit-keyframes run{ /*创建动画*/
0%{
-webkit-transform:rotateX(-5deg) rotateY(0);
}
50%{
-webkit-transform:rotateX(0) rotateY(180deg);
}
100%{
-webkit-transform:rotateX(5deg) rotateY(360deg);
}
}
</style>
</head>
<body>
<h1>成功属于立刻行动的人</h1>
</body>
</html>
12、文字的闪烁效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实现文字的闪烁效果</title>
<style>
body{
background:#000000; /*设置页面背景颜色*/
text-align:center; /*设置文字居中*/
}
.flicker{
color:#9966FF; /*设置文字颜色*/
font-size:64px; /*设置字体大小*/
font-weight:bolder; /*设置字体粗细*/
-webkit-animation: flicker 2s infinite; /*设置动画*/
}
@-webkit-keyframes flicker{ /*创建动画*/
0%{
opacity: 1;
}
50%{
opacity: 0.5;
}
100%{
opacity: 1;
}
}
</style>
</head>
<body>
<h1 class="flicker">天生我材必有用</h1>
</body>
</html>
13、上下摇摆的文字动画效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上下摇摆的文字动画效果</title>
<style type="text/css">
h1{
font: 96px "微软雅黑";/*设置字体和字体大小*/
margin:50px auto; /*设置元素外边距*/
font-weight: 500; /*设置字体粗细*/
text-align: center; /*设置文字居中*/
color: #f35626; /*设置文字颜色*/
-webkit-animation:swing 2s infinite;/*设置动画*/
}
@-webkit-keyframes swing{/*创建动画*/
20%{
-webkit-transform:rotate(15deg);
}40%{
-webkit-transform:rotate(-15deg);
}60%{
-webkit-transform:rotate(5deg);
}80%{
-webkit-transform:rotate(-5deg);
}100%{
-webkit-transform:rotate(0deg);
}
}
</style>
</head>
<body>
<h1>amoxiang</h1>
</body>
</html>
14、跳跃的文字动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>制作跳跃的文字动画</title>
<style>
h1{
font: 96px "微软雅黑"; /*设置字体和字体大小*/
margin:50px auto; /*设置元素外边距*/
font-weight: 500; /*设置字体粗细*/
text-align: center; /*设置文字居中*/
color: #f35626; /*设置文字颜色*/
-webkit-animation:bounce 2s infinite;/*设置动画*/
}
@-webkit-keyframes bounce{/*创建动画*/
0%,100%,20%,50%,80%{
-webkit-transform:translateY(0);
}40%{
-webkit-transform:translateY(-30px);
}60%{
-webkit-transform:translateY(-15px);
}
}
</style>
</head>
<body>
<h1>amoxiang</h1>
</body>
</html>
15、文字水纹效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实现文字水纹效果</title>
<style type="text/css">
body {
background:#3399FF; /*设置页面背景颜色*/
width: 100%;
height: 100%;
}
div{
font-weight: bold; /*设置字体粗细*/
font-size: 64px; /*设置字体大小*/
text-align: center; /*设置文字居中*/
height: 120px;
line-height: 110px;
vertical-align: bottom; /*设置文字垂直靠下*/
position: absolute;
left: 0;
right: 0;
top: 100px;
display: block;
}
.wave{
background-image: url("bg/wave.png");/*设置元素背景图像*/
-webkit-background-clip: text; /*背景被裁剪到文字*/
-webkit-text-fill-color: transparent; /*设置文字的填充颜色*/
text-shadow: 0px 0px rgba(255, 255, 255, 0.1); /*设置文字阴影*/
-webkit-animation:wave-animation 1s infinite linear, loading-animation 6s infinite linear alternate; /*设置动画*/
background-size: 200px 100px; /*设置背景图像尺寸*/
background-repeat: repeat-x;
opacity: 1;
}
@-webkit-keyframes wave-animation {/*创建动画*/
0% {
background-position: 0 bottom;
}
100% {
background-position: 200px bottom;
}
}
@-webkit-keyframes loading-animation {/*创建动画*/
0% {
background-size: 200px 200px;
}
100% {
background-size: 200px 0px;
}
}
</style>
</head>
<body>
<div class="wave">清水出芙蓉，天然去雕饰</div>
</body>
</html>
16、文字水平往复循环滚动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实现文字水平往复循环滚动</title>
<style type="text/css">
.box{
font-family:"微软雅黑"; /*设置字体*/
width:600px; /*设置元素宽度*/
background:lightgreen;
margin:50px auto; /*设置外边距*/
font-size: 36px; /*设置文字大小*/
color:blue; /*设置文字颜色*/
overflow:hidden; /*隐藏溢出部分内容*/
}
.marquee{
position:relative; /*设置相对定位*/
-webkit-animation: marquee 5s linear infinite alternate;/*设置动画*/
}
@-webkit-keyframes marquee{ /*创建动画*/
0%{ left:0px; }
100%{ left:200px; }
}
</style>
</head>
<body>
<div class="box">
<p class="marquee">机会总是留给有准备的人</p>
</div>
</body>
</html>
17、使用SVG创建空心虚线线条文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
text{
font-family:SimHei; /*定义字体*/
font-size:56px; /*定义文字大小*/
font-weight:bolder; /*定义字体粗细*/
fill:transparent; /*定义文字透明*/
stroke:#0000FF; /*定义描边颜色*/
stroke-dasharray:3; /*定义虚线长度和虚线间距*/
}
</style>
</head>
<body>
<svg width="600" height="300">
<text x="30" y="150">人生苦短，我用Python</text>
</svg>
</body>
</html>
18、使用SVG错落显示文本中的每个文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用SVG错落显示文本中的每个文字</title>
<style type="text/css">
text{
font-family:SimHei; /*定义字体*/
font-size:36px; /*定义文字大小*/
fill:#0099FF; /*定义文字填充颜色*/
letter-spacing:10px; /*定义字符间距*/
}
</style>
</head>
<body>
<svg width="600" height="300">
<text x="60" y="120,150,130,120,140,110,150">业精于勤荒于嬉</text>
</svg>
</body>
</html>
19、使用SVG实现字间距不等的文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用SVG实现字间距不等的文本</title>
<style>
text{
font-size:36px; /*定义文字大小*/
font-weight:bolder; /*定义字体粗细*/
fill:#FF00FF; /*定义文字填充颜色*/
}
</style>
</head>
<body>
<svg width="500" height="300">
<text x="60" y="150" dx="0 3 6 9 12 15 18 21">乐观的人永葆青春</text>
</svg>
</body>
</html>
20、使用SVG实现文字的圆弧显示效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用SVG实现文字的圆弧显示效果</title>
<style>
text{
font-family:SimHei;/*定义字体*/
font-size:36px;/*定义文字大小*/
fill:gold;/*定义文字填充颜色*/
}
</style>
</head>
<body>
<svg width="1000" height="800">
<defs>
<path id="path1" d="M100,300 A100,100 0 0 0 395,300">
</defs>
<text x="50" y="100">
<textPath xlink:href="#path1">成长就是逼着自己坚强</textPath>
</text>
</svg>
</body>
</html>
21、文字自动滚屏
<!DOCTYPE>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文字自动滚屏</title>
</head>
<body onLoad="screenscroll();">
<script>
function screenscroll(){
var optlist = document.form1.Text1;
optlist[0] = null;
optlist.selectedIndex = 0;
setTimeout("screenscroll()",2000);
}
</script>
<form name="form1">
<select name="Text1" size=8>
<option>
<option>世界名著及作者
<option>乌托邦 作者：莫 尔
<option>威尼斯商人 作者：莎士比亚
<option>简.爱 作者：夏绿蒂.勃朗特
<option>唐璜 作者：拜 伦
<option>呼啸山庄 作者：艾米莉.勃朗特
<option>鲁宾逊飘流记 作者：笛 福
<option>名利场 作者：萨克雷
<option>傲慢与偏见 作者：简.奥斯丁
<option>双城记 作者：查尔斯.狄更斯
<option>恋爱中的女人 作者：D.H.劳伦斯
<option>新工具 作者：培 根
<option>政府论 作者：洛 克
<option>尤里西斯 作者：詹姆斯.乔伊斯
<option>赫克尔贝里.芬历险记 作者：马克.吐温
<option>老人与海 作者：海明威
<option>飘 作者：玛格丽特.米切尔
<option>嘉莉妹妹 作者：德莱塞
<option>小妇人 作者：路易莎.梅.奥尔科特
<option>悲惨世界 作者：雨果
<option>约翰.克里斯朵夫 作者：罗曼.罗兰
<option>幻灭 作者：巴尔扎克
<option>欧叶妮.格朗台 作者：巴尔扎克
<option>贝姨 作者：巴尔扎克
<option>邦斯舅舅 作者：巴尔扎克
<option>格兰特船长的儿女 作者：儒勒.凡尔纳
<option>漂亮朋友 作者：莫泊桑
<option>娜娜 作者：左 拉
<option>包法利夫人 作者：福楼拜
<option>基督山伯爵 作者：大仲马
<option>茶花女 作者：小仲马
<option>巴黎圣母院 作者：雨 果
<option>红与黑 作者：司汤达
<option>拿破仑法典 作者： 拿破仑
<option>人是机器 作者：拉美特里
<option>社会契约论 作者：卢 梭
<option>浮士德 作者：歌 德
<option>少年维特的烦恼 作者：歌 德
<option>希腊神话故事 作者：施瓦布
<option>战争论 作者：克劳塞维茨
<option>忏悔录 作者：奥古斯丁
<option>父与子 作者：屠格涅夫
<option>罪与罚 作者：陀思妥耶夫斯基
<option>安娜.卡列宁娜 作者：列夫.托尔斯泰
<option>复活 作者：列夫.托尔斯泰
<option>上尉的女儿 作者：普希金
<option>死魂灵 作者：果戈理
<option>童年 作者：高尔基
<option>我的大学 作者：高尔基
<option>钢铁是怎样炼成的 作者：尼.奥斯特洛夫斯基
<option>白痴 作者：陀思妥耶夫斯基
<option>伊索寓言 作者：伊索.拉封丹
<option>理想国 作者：柏拉图
<option>政治学 作者：亚里士多德
<option>安徒生童话 作者：安徒生
<option>牛虻 作者：伏尼契
<option>堂.吉诃德 作者：塞万提斯
<option>汉穆拉比法典 作者：汉穆拉比
<option>论神 作者：斯宾诺莎
<option>癞皮鹦鹉 作者：利萨尔迪
<option>太阳城 作者：康帕内拉
<option>性爱与文明 作者：弗洛伊德
<option>苔丝 作者：哈代
<option>拉摩的侄儿 作者：狄德罗
<option>理智与情感 作者：奥斯汀
<option>权力意志 作者：尼采
<option>苦闷的象征 作者：厨川白村
<option>梦的解析 作者：弗各伊德
<option>资本论 作者：马克思
<option>先知 作者：纪伯伦
<option>俄罗斯的童话 作者：高尔基
<option>桃色的云 作者：爱罗先轲
<option>水晶瓶塞 作者：莫里斯.勒布朗
<option>乡村医生 作者：巴尔扎克
<option>高龙巴 作者：梅里美
<option>黄室奇案 作者：嘉斯东.勒鲁
<option>克菜采奏鸣曲 作者：列.托尔斯泰
<option>阴谋与爱情 作者：席勒
<option>快乐王子 作者：王尔德
<option>变形记 作者：卡夫卡
<option>羊脂球 作者：莫泊桑
<option>魔沼 作者：乔治.桑
<option>死魂灵 作者：果戈里
<option>希腊棺材之谜 作者：奎恩
<option>母亲 作者：高尔基
<option>被背叛的遗嘱 作者：米兰.昆德拉
<option>毁灭 作者：法捷耶夫
<option>绞刑架下的报告 作者：伏契克
<option>贵族之家 作者：屠格涅夫
<option>冷血医生 作者：玛丽.希金斯.克拉克
<option>十日谈 作者：薄伽丘
<option>女富翁的遗产 作者：高木彬光
<option>绿野仙踪 作者：莱曼.弗兰.鲍姆
<option>法国中尉的女人 作者：约翰.福尔斯
<option>汤姆.索亚历险记 作者：马克.吐温
<option>马可.波罗游记 作者：马可.波罗
<option>卡门 作者：梅里美
<option>.美丽与悲哀 作者：川端康成
<option>野性的呼唤 作者：杰克.伦敦
<option>吉卜赛姑娘 作者：塞万提斯
<option>浅滩迷船 作者：里縸
</select>
</form>
</body>
</html>
转载：https://huaweicloud.csdn.net/638edfa3dacf622b8df8d247.html?dp_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6OTU4MTM3LCJleHAiOjE3MTM4NjA4ODUsImlhdCI6MTcxMzI1NjA4NSwidXNlcm5hbWUiOiJ3ZWl4aW5fNDM0MTEyMTQifQ.f2r8nPJyy3261VA_DI86ppFwC1wjy9MEKbi3eFGUszc
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
