CSS3文本路径控制–在线生成你想要的文字以及路径

之前,我也想弄一些文件的倾斜,但是不会弄,最多也就是能通过控制每一字的高度,来形成倾斜,但实际上字还是没改变。CSS3文本路径控制–在线生成你想要的文字以及路径,这个网站很简单,也很使用,你可以根据的爱好来生成你想要的效果,操作简单,但是功能很强大!~主要也是通过生成CSS3的一些高级的控制来控制显示 http://csswarp.eleqtriq.com/

输入代码:

—————————————————————————————————-

<!DOCTYPE html> <html> <head> <meta http-equiv=’Content-Type’ content=’text/html; charset=UTF-8′ /> <title> Warped Text </title> <link rel=’stylesheet’ type=’text/css’ href=’http://fonts.googleapis.com/css?family=Abel:regular:latin’> <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: 24px; left: 21px; top: 194.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: 24px; left: 25.39px; top: 152.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: 24px; left: 40.09px; top: 112.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: 24px; left: 65.95px; top: 78.29px;}

#warped .w4 {-moz-transform: rotate(-6.68rad);-webkit-transform: rotate(-6.68rad);-o-transform: rotate(-6.68rad);-ms-transform: rotate(-6.68rad); transform: rotate(-6.68rad); width: 38px; height: 24px; left: 101.72px; top: 55.22px;}

#warped .w5 {-moz-transform: rotate(-6.33rad);-webkit-transform: rotate(-6.33rad);-o-transform: rotate(-6.33rad);-ms-transform: rotate(-6.33rad); transform: rotate(-6.33rad); width: 38px; height: 24px; left: 143.42px; top: 46.08px;}

#warped .w6 {-moz-transform: rotate(-5.97rad);-webkit-transform: rotate(-5.97rad);-o-transform: rotate(-5.97rad);-ms-transform: rotate(-5.97rad); transform: rotate(-5.97rad); width: 38px; height: 24px; left: 185.59px; top: 52px;}

#warped .w7 {-moz-transform: rotate(-5.61rad);-webkit-transform: rotate(-5.61rad);-o-transform: rotate(-5.61rad);-ms-transform: rotate(-5.61rad); transform: rotate(-5.61rad); width: 38px; height: 24px; left: 223.3px; top: 72.46px;}

#warped .w8 {-moz-transform: rotate(-5.27rad);-webkit-transform: rotate(-5.27rad);-o-transform: rotate(-5.27rad);-ms-transform: rotate(-5.27rad); transform: rotate(-5.27rad); width: 38px; height: 24px; left: 251.44px; top: 104.4px;}

#warped .w9 {-moz-transform: rotate(-5.04rad);-webkit-transform: rotate(-5.04rad);-o-transform: rotate(-5.04rad);-ms-transform: rotate(-5.04rad); transform: rotate(-5.04rad); width: 17px; height: 24px; left: 276.03px; top: 134.47px;}

#warped .w10 {-moz-transform: rotate(-4.92rad);-webkit-transform: rotate(-4.92rad);-o-transform: rotate(-4.92rad);-ms-transform: rotate(-4.92rad); transform: rotate(-4.92rad); width: 13px; height: 24px; left: 283.32px; top: 153.86px;}

#warped .w11 {-moz-transform: rotate(-4.83rad);-webkit-transform: rotate(-4.83rad);-o-transform: rotate(-4.83rad);-ms-transform: rotate(-4.83rad); transform: rotate(-4.83rad); width: 13px; height: 24px; left: 286.06px; top: 170.76px;}

#warped .w12 {-moz-transform: rotate(-4.74rad);-webkit-transform: rotate(-4.74rad);-o-transform: rotate(-4.74rad);-ms-transform: rotate(-4.74rad); transform: rotate(-4.74rad); width: 17px; height: 24px; left: 285.45px; top: 191.23px;}

#warped .w13 {-moz-transform: rotate(-4.79rad);-webkit-transform: rotate(-4.79rad);-o-transform: rotate(-4.79rad);-ms-transform: rotate(-4.79rad); transform: rotate(-4.79rad); width: 8px; height: 24px; left: 290.5px; top: 211.19px;}

#warped .w14 {-moz-transform: rotate(-4.87rad);-webkit-transform: rotate(-4.87rad);-o-transform: rotate(-4.87rad);-ms-transform: rotate(-4.87rad); transform: rotate(-4.87rad); width: 15px; height: 24px; left: 288.8px; top: 227.71px;}

#warped .w15 {-moz-transform: rotate(-4.98rad);-webkit-transform: rotate(-4.98rad);-o-transform: rotate(-4.98rad);-ms-transform: rotate(-4.98rad); transform: rotate(-4.98rad); width: 15px; height: 24px; left: 292.81px; top: 247.09px;}

#warped .w16 {-moz-transform: rotate(-5.14rad);-webkit-transform: rotate(-5.14rad);-o-transform: rotate(-5.14rad);-ms-transform: rotate(-5.14rad); transform: rotate(-5.14rad); width: 25px; height: 24px; left: 296.16px; top: 270.81px;}

#warped .w17 {-moz-transform: rotate(-5.35rad);-webkit-transform: rotate(-5.35rad);-o-transform: rotate(-5.35rad);-ms-transform: rotate(-5.35rad); transform: rotate(-5.35rad); width: 25px; height: 24px; left: 310.9px; top: 296.23px;}

#warped .w18 {-moz-transform: rotate(-5.59rad);-webkit-transform: rotate(-5.59rad);-o-transform: rotate(-5.59rad);-ms-transform: rotate(-5.59rad); transform: rotate(-5.59rad); width: 25px; height: 24px; left: 331.32px; top: 318px;}

#warped .w19 {-moz-transform: rotate(-5.77rad);-webkit-transform: rotate(-5.77rad);-o-transform: rotate(-5.77rad);-ms-transform: rotate(-5.77rad); transform: rotate(-5.77rad); width: 8px; height: 24px; left: 357.43px; top: 330.25px;}

#warped .w20 {-moz-transform: rotate(-5.91rad);-webkit-transform: rotate(-5.91rad);-o-transform: rotate(-5.91rad);-ms-transform: rotate(-5.91rad); transform: rotate(-5.91rad); width: 15px; height: 24px; left: 368.65px; top: 337.36px;}

#warped .w21 {-moz-transform: rotate(-6.09rad);-webkit-transform: rotate(-6.09rad);-o-transform: rotate(-6.09rad);-ms-transform: rotate(-6.09rad); transform: rotate(-6.09rad); width: 17px; height: 24px; left: 388.24px; top: 343.54px;}

#warped .w22 {-moz-transform: rotate(-6.27rad);-webkit-transform: rotate(-6.27rad);-o-transform: rotate(-6.27rad);-ms-transform: rotate(-6.27rad); transform: rotate(-6.27rad); width: 17px; height: 24px; left: 410.21px; top: 345.97px;}

#warped .w23 {-moz-transform: rotate(-6.45rad);-webkit-transform: rotate(-6.45rad);-o-transform: rotate(-6.45rad);-ms-transform: rotate(-6.45rad); transform: rotate(-6.45rad); width: 17px; height: 24px; left: 431.48px; top: 344.5px;}

#warped .w24 {-moz-transform: rotate(-6.63rad);-webkit-transform: rotate(-6.63rad);-o-transform: rotate(-6.63rad);-ms-transform: rotate(-6.63rad); transform: rotate(-6.63rad); width: 17px; height: 24px; left: 453px; top: 339px;}

#warped .w25 {-moz-transform: rotate(-6.81rad);-webkit-transform: rotate(-6.81rad);-o-transform: rotate(-6.81rad);-ms-transform: rotate(-6.81rad); transform: rotate(-6.81rad); width: 17px; height: 24px; left: 472.74px; top: 329.86px;}

#warped .w26 {-moz-transform: rotate(-6.96rad);-webkit-transform: rotate(-6.96rad);-o-transform: rotate(-6.96rad);-ms-transform: rotate(-6.96rad); transform: rotate(-6.96rad); width: 8px; height: 24px; left: 491.67px; top: 320.04px;}

#warped .w27 {-moz-transform: rotate(-7.1rad);-webkit-transform: rotate(-7.1rad);-o-transform: rotate(-7.1rad);-ms-transform: rotate(-7.1rad); transform: rotate(-7.1rad); width: 17px; height: 24px; left: 500.38px; top: 307.89px;}

#warped .w28 {-moz-transform: rotate(-7.28rad);-webkit-transform: rotate(-7.28rad);-o-transform: rotate(-7.28rad);-ms-transform: rotate(-7.28rad); transform: rotate(-7.28rad); width: 17px; height: 24px; left: 514.05px; top: 290.55px;}

#warped .w29 {-moz-transform: rotate(-7.47rad);-webkit-transform: rotate(-7.47rad);-o-transform: rotate(-7.47rad);-ms-transform: rotate(-7.47rad); transform: rotate(-7.47rad); width: 27px; height: 24px; left: 521.68px; top: 266.5px;}

</style> </head> <body> <div id=’warped’> <span class=’w0′>欢</span><span class=’w1′>迎</span><span class=’w2′>来</span><span class=’w3′>到</span><span class=’w4′>我</span><span class=’w5′>的</span><span class=’w6′>博</span><span class=’w7′>客</span><span class=’w8′>:</span><span class=’w9′>h</span><span class=’w10′>t</span><span class=’w11′>t</span><span class=’w12′>p</span><span class=’w13′>:</span><span class=’w14′>/</span><span class=’w15′>/</span><span class=’w16′>w</span><span class=’w17′>w</span><span class=’w18′>w</span><span class=’w19′>.</span><span class=’w20′>y</span><span class=’w21′>u</span><span class=’w22′>g</span><span class=’w23′>a</span><span class=’w24′>g</span><span class=’w25′>a</span><span class=’w26′>.</span><span class=’w27′>c</span><span class=’w28′>o</span><span class=’w29′>m</span> </div> </body>

</html>

——————————————————————————————————-

截图:

代码演示:http://www.cangzhang.com/wp-content/uploads/2012/08/qingxie.htm

 

共有 0 条评论

Top