使用HTML和CSS的弯曲文本_html-js-css

概述我知道已有关于弯曲文本的帖子,但我正在寻找具体的东西. 在这个网页上(http://mrcthms.com/),Marc使用了一种很好的技术来为他的名字勾勒出文字曲线,但我不知道如何复制这项技术.这是我正在尝试的： <html xmlns="http://www.w3.org/1999/xhtml"><head><meta content="text/html; charset=utf-8" 我知道已有关于弯曲文本的帖子,但我正在寻找具体的东西.

在这个网页上(http://mrcthms.com/),marc使用了一种很好的技术来为他的名字勾勒出文字曲线,但我不知道如何复制这项技术.这是我正在尝试的：

<HTML xmlns="http://www.w3.org/1999/xhtml"><head><Meta content="text/HTML; charset=utf-8" http-equiv="Content-Type" x-undefined="" /><Title>Curved Text</Title><style type="text/CSS">span {    display: inline-block;    Font-family: futura-pt,'Helvetica Neue',sans-serif;    Font-size: 2.5em;    Font-weight: 300;    margin: 1px;}.arced {    display: block;    text-shadow: rgba(0,0.298039) 8px 8px;    text-align: center;    margin: 20px;    padding: 50px 0 50px;}div span {    text-shadow: rgba(0,0.298039) 8px 8px;    Font-family: futura-pt,sans-serif;    Font-size: 2.5em;    Font-weight: 300;}.arced > span:nth-child(1) {    -webkit-transform:translateX(-1px) translateY(68px) rotate(-17deg);    -webkit-Transition:0s;}</style></head><body>    <span >        <span >S</span>        <span >T</span>        <span >E</span>        <span >V</span>        <span >E</span></span></body></HTML>

解决方法他在每个字母上使用CSS3变换.例如,他的名字的HTML如下：

<span >    <span >M</span>    <span >a</span>    <span >r</span>    <span >c</span>    ...</span>

反过来,CSS如下：

.show .hero h1 .arced > span:nth-child(1) {    -webkit-transform: translateX(-1px) translateY(68px) rotate(-17deg);       -moz-transform: translateX(-1px) translateY(68px) rotate(-17deg);        -ms-transform: translateX(-1px) translateY(68px) rotate(-17deg);         -o-transform: translateX(-1px) translateY(68px) rotate(-17deg);            transform: translateX(-1px) translateY(68px) rotate(-17deg);    -webkit-Transition-delay: 0s;       -moz-Transition-delay: 0s;         -o-Transition-delay: 0s;            Transition-delay: 0s;}.show .hero h1 .arced > span:nth-child(2) {    -webkit-transform: translateX(-3px) translateY(39px) rotate(-13deg);       -moz-transform: translateX(-3px) translateY(39px) rotate(-13deg);        -ms-transform: translateX(-3px) translateY(39px) rotate(-13deg);         -o-transform: translateX(-3px) translateY(39px) rotate(-13deg);            transform: translateX(-3px) translateY(39px) rotate(-13deg);    -webkit-Transition-delay: .04s;       -moz-Transition-delay: .04s;         -o-Transition-delay: .04s;            Transition-delay: .04s;}

等等.

总结

以上是内存溢出为你收集整理的使用HTML和CSS的弯曲文本全部内容，希望文章能够帮你解决使用HTML和CSS的弯曲文本所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1141220.html