您现在的位置是：主页 > news > 国内优秀设计网站/营销计划书7个步骤
国内优秀设计网站/营销计划书7个步骤
admin2025/5/1 8:42:38【news】
简介国内优秀设计网站,营销计划书7个步骤,重庆巴南网站建设,wordpress 代码分析来源：http://www.itivy.com/html5/archive/2012/4/14/css3-text-path.html 之前，我们利用CSS只能让文字横平竖直地显示，连倾斜一个角度都不行，更不用说让一串文字按指定的路径轨迹显示了。但是，CSS3到来之后ÿ…
国内优秀设计网站,营销计划书7个步骤,重庆巴南网站建设,wordpress 代码分析来源：http://www.itivy.com/html5/archive/2012/4/14/css3-text-path.html
之前，我们利用CSS只能让文字横平竖直地显示，连倾斜一个角度都不行，更不用说让一串文字按指定的路径轨迹显示了。但是，CSS3到来之后ÿ…
HTML代码如下：
另外有一个网站可以让你生成这些按路径显示的文字的代码：
http://csswarp.eleqtriq.com/
来源：http://www.itivy.com/html5/archive/2012/4/14/css3-text-path.html
之前，我们利用CSS只能让文字横平竖直地显示，连倾斜一个角度都不行，更不用说让一串文字按指定的路径轨迹显示了。但是，CSS3到来之后，这一切实现起来是那么的简单，我们可以利用CSS3的text-transform options: rotation, skew, matrix, transform-origin等属性来实现对文字的显示路径。下面是一个示例，支持CSS3的浏览器才能看出效果
欢迎关注HTML5中文网站
CSS代码如下：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | <style type='text/css'> #warped {position: relative; display: block; width:588px; height:440px;} #warped>span[class^=w]:nth-of-type(n+0){display:block; position:absolute; -moz-transform-origin:50% 100%; -webkit-transform-origin:50% 100%; -o-transform-origin:50% 100%; -ms-transform-origin:50% 100%; transform-origin:50% 100%; } #warped span{font-family:'Abel';font-size:38px;font-weight:regular;font-style:normal; line-height:0.65; white-space:pre; overflow:visible; padding:0px;} #warped .w0 {-moz-transform: rotate(-7.85rad);-webkit-transform: rotate(-7.85rad);-o-transform: rotate(-7.85rad);-ms-transform: rotate(-7.85rad); transform: rotate(-7.85rad); width: 38px; height: 25px; left: 21px; top: 193.8px;} #warped .w1 {-moz-transform: rotate(-7.65rad);-webkit-transform: rotate(-7.65rad);-o-transform: rotate(-7.65rad);-ms-transform: rotate(-7.65rad); transform: rotate(-7.65rad); width: 38px; height: 25px; left: 25.39px; top: 151.85px;} #warped .w2 {-moz-transform: rotate(-7.37rad);-webkit-transform: rotate(-7.37rad);-o-transform: rotate(-7.37rad);-ms-transform: rotate(-7.37rad); transform: rotate(-7.37rad); width: 38px; height: 25px; left: 40.09px; top: 111.13px;} #warped .w3 {-moz-transform: rotate(-7.04rad);-webkit-transform: rotate(-7.04rad);-o-transform: rotate(-7.04rad);-ms-transform: rotate(-7.04rad); transform: rotate(-7.04rad); width: 38px; height: 25px; left: 65.95px; top: 77.29px;} #warped .w4 {-moz-transform: rotate(-6.75rad);-webkit-transform: rotate(-6.75rad);-o-transform: rotate(-6.75rad);-ms-transform: rotate(-6.75rad); transform: rotate(-6.75rad); width: 21px; height: 25px; left: 102.45px; top: 57.78px;} #warped .w5 {-moz-transform: rotate(-6.55rad);-webkit-transform: rotate(-6.55rad);-o-transform: rotate(-6.55rad);-ms-transform: rotate(-6.55rad); transform: rotate(-6.55rad); width: 17px; height: 25px; left: 126.79px; top: 49.23px;} #warped .w6 {-moz-transform: rotate(-6.34rad);-webkit-transform: rotate(-6.34rad);-o-transform: rotate(-6.34rad);-ms-transform: rotate(-6.34rad); transform: rotate(-6.34rad); width: 25px; height: 25px; left: 148.4px; top: 45.15px;} #warped .w7 {-moz-transform: rotate(-6.13rad);-webkit-transform: rotate(-6.13rad);-o-transform: rotate(-6.13rad);-ms-transform: rotate(-6.13rad); transform: rotate(-6.13rad); width: 16px; height: 25px; left: 177.98px; top: 46.5px;} #warped .w8 {-moz-transform: rotate(-5.94rad);-webkit-transform: rotate(-5.94rad);-o-transform: rotate(-5.94rad);-ms-transform: rotate(-5.94rad); transform: rotate(-5.94rad); width: 20px; height: 25px; left: 198.23px; top: 52.26px;} #warped .w9 {-moz-transform: rotate(-5.65rad);-webkit-transform: rotate(-5.65rad);-o-transform: rotate(-5.65rad);-ms-transform: rotate(-5.65rad); transform: rotate(-5.65rad); width: 38px; height: 25px; left: 219.49px; top: 68.52px;} #warped .w10 {-moz-transform: rotate(-5.31rad);-webkit-transform: rotate(-5.31rad);-o-transform: rotate(-5.31rad);-ms-transform: rotate(-5.31rad); transform: rotate(-5.31rad); width: 38px; height: 25px; left: 249.06px; top: 99.72px;} #warped .w11 {-moz-transform: rotate(-5.01rad);-webkit-transform: rotate(-5.01rad);-o-transform: rotate(-5.01rad);-ms-transform: rotate(-5.01rad); transform: rotate(-5.01rad); width: 38px; height: 25px; left: 267.04px; top: 138.14px;} #warped .w12 {-moz-transform: rotate(-4.78rad);-webkit-transform: rotate(-4.78rad);-o-transform: rotate(-4.78rad);-ms-transform: rotate(-4.78rad); transform: rotate(-4.78rad); width: 38px; height: 25px; left: 274.56px; top: 180.94px;} </style> |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <div id='warped'><span class='w0'>欢</span><span class='w1'>迎</span><span class='w2'>关</span><span class='w3'>注</span><span class='w4'>H</span><span class='w5'>T</span><span class='w6'>M</span><span class='w7'>L</span><span class='w8'>5</span><span class='w9'>中</span><span class='w10'>文</span><span class='w11'>网</span><span class='w12'>站</span></div> |
