使用HTML+CSS完成一个简单的立体字效果

*使用HTML+CSS完成一个简单的立体字效果**

此处用木兰辞来举列子

来看看效果

ps：技术不佳大佬们轻喷

/*标题及其立体效果*/
.Header {/*font-size: 50px;*//*font-weight: inherit;*//*!*斜体*!*//*font-style: italic;*//*可以用智能font写法如下也可以用上面几行写*/font: bold italic 50px/30px "Adobe 宋体 Std L";text-align: center;color: darkblue;text-shadow: -3px -3px 10px white, 3px 3px 10px black;
}
/*作者简写和朝代*/
.Header2 {text-align: center;/*font-style: italic;*/}
/*文本简写*/
p {text-align: center;color: black;text-indent: 2em;/*font-style: italic;*/
}* {background: white;
}Markdown将文本转换为 HTML。*[HTML]:   超文本标记语言
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>诗歌</title><link rel="icon" href="诗歌.svg"><link rel="stylesheet" href="poemstyle.css"></head>
<body>
<h1 class="Header">木兰辞</h1>
<h5 class="Header2">【作者】佚名</h5>
<h5 class="Header2">【朝代】南北朝译文</h5>
<p class="Page">唧唧复唧唧，木兰当户织。不闻机杼声，惟闻女叹息。问女何所思，问女何所忆。女亦无所思，女亦无所忆。</p><p class="Page">昨夜见军帖，可汗大点兵，军书十二卷，卷卷有爷名。阿爷无大儿，木兰无长兄，愿为市鞍马，从此替爷征。</p><p class="Page">东市买骏马，西市买鞍鞯，南市买辔头，北市买长鞭。旦辞爷娘去，暮宿黄河边。</p><p class="Page">旦辞黄河去，暮至黑山头，不闻爷娘唤女声，但闻燕山胡骑鸣啾啾。</p><p>万里赴戎机，关山度若飞。朔气传金柝，寒光照铁衣。将军百战死，壮士十年归</p><p class="Page">归来见天子，天子坐明堂。策勋十二转，赏赐百千强。可汗问所欲，木兰不用尚书郎，愿驰千里足，送儿还故乡。</p><p class="Page">爷娘闻女来，出郭相扶将；阿姊闻妹来，当户理红妆；小弟闻姊来，磨刀霍霍向猪羊。</p><p class="Page">开我东阁门，坐我西阁床，脱我战时袍，著我旧时裳。 当窗理云鬓，对镜帖花黄。</p><p class="Page">出门看火伴，火伴皆惊忙：同行十二年，不知木兰是女郎。</p><p class="Page">雄兔脚扑朔，雌兔眼迷离；双兔傍地走，安能辨我是雄雌？</p>
</body>
</html>

使用HTML+CSS完成一个简单的立体字效果相关推荐

用CSS写一个简单的幻灯片效果页面
这里是修真院前端小课堂,本篇分析的主题是 [用CSS写一个简单的幻灯片效果页面] 每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方 ...
使用css做一个简单的车轮滚滚效果
学了css之后发现很多效果只要几行代码就能实现,这个车轮滚滚的效果也不例外. 首先设置个大盒子,设置他的宽度(随意多少,但是肯定要比车轮的宽度大),高度与车轮保持一致即可.跟我一起来做个简单的车轮滚滚 ...
基于JavaScript+css写一个简单的h5动态下雨效果
基于JavaScript+css写一个简单的h5动态下雨效果文章目录什么是前端展示效果 JavaScript是什么? 步骤 1.html 2.css 3.js 什么是前端前端它是一个工作,它的 ...
html+css+小图标,HTML+CSS入门一个简单实用的CSS loading图标
本篇教程介绍了HTML+CSS入门一个简单实用的CSS loading图标,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门.< 在web开发中,为了提高用户体验,在加载数据的时 ...
【meng_项目】python+flask+html+css制作一个简单的生日祝福语网页
python+flask+html+css制作一个简单的生日祝福语网页一个py文件: test.py 一个html文件: birthday_index.html 一张图片: ...
使用CSS画一个简单的立方体
用CSS实现一个简单的立方体: 可以使用弹性盒子模型,先对父级div进行立体化(3D)操作,然后对多个子div进行操作(翻转,平移等),还可以给父级div加上CSS动画,使整体更加酷炫. 大体效果如图 ...
Jquery一个简单的点赞效果，实现点赞数+1
Jquery一个简单的点赞效果,实现点赞数+1 1.导入JS <script src="js/jquery-3.3.1.js" type="text/javascr ...
[css] 使用css写一个垂直翻转图片的效果
[css] 使用css写一个垂直翻转图片的效果 transform: rotateX(180deg); /* 垂直镜像翻转 */ 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持 ...
Unity3D 粒子系统实现一个简单的爆炸效果
一个简单的爆炸效果的实现. 先看效果. 一.准备四张贴图,做成材质二.新建一个Particle System 1. 设置形状 2. 3. 4. 5. 6. 7. 8. 曲线的第二个点往上提一点点 9 ...

使用HTML+CSS完成一个简单的立体字效果

*使用HTML+CSS完成一个简单的立体字效果**

此处用木兰辞来举列子

来看看效果

使用HTML+CSS完成一个简单的立体字效果相关推荐

最新文章

热门文章