php输出26个英文字母,如何使用纯CSS3绘制26个英文字母的示例详解

最新推荐文章于 2022-10-19 11:31:14 发布
最新推荐文章于 2022-10-19 11:31:14 发布
阅读量219 收藏
点赞数
文章标签： php输出26个英文字母

纯CSS3绘制26个英文字母

在这里你看到的26个标准的英文字母并不是普通的字体，它们是用CSS在空白的页面上绘制出来的，纯css作品。主要运用了CSS3里的多个新变换功能，需要使用最新的浏览器进行观赏。

网页代码中用到(

)和p边距设置和浮动(margin:20px

5px 10px 80px; float: left;)。其中边距Margin四个像素依次代表：上右下左。

以下按字母表顺序，列出绘制26个字母的CSS。

38857bd3894130c2a6dea84e0ad7719e.png.A{

position:relative;

margin:10px 30px 10px 5px; /*上右下左 */

float: left;

left:30px;

width:60px;

height:91px;

border-bottom:solid 14px #0feee2;

}

.A:before{

transform:skew(-19deg,0);

position:absolute;

content:'';

top:12.5px;

left:0;

width:16px;

height:125px;

background-color:#0feee2;

}

.A:after{

transform:skew(19deg,0);

position:absolute;

content:'';

top:12.5px;

left:45px;

width:16px;

height:125px;

background-color:#0feee2;

}

17d71158067efe36a92b0aafea5fc043.png.B{

position:relative;

margin:10px 20px 10px 30px;

float: left;

top:12.5px;

left:10px;

width:60px;

height:125px;

border-left:solid 16px #2056cd;

}

.B:before{

position:absolute;

content:'';

width:52px;

height:39px;

border-width:15px 15px 10px 0;

border-color:#2056cd;

border-style:solid;

border-radius:0 240%180%0 /0 180%180%0;

}

.B:after{

position:absolute;

content:'';

bottom:0;

width:58px;

height:43px;

border-width:10px 15px 15px 0;

border-color:#2056cd;

border-style:solid;

border-radius:0 180%220%0 /0 180%180%0;

}

8630da646e4350d84c26b11ca19f38d5.png.C{

position:relative;

margin:10px 5px 10px 10px;

float: left;

top:12.5px;

left:10px;

width:84px;

height:95px;

border-width:15px 12px 15px 16px;

border-color:#87adef;

border-style:solid;

border-radius:50%;

}

.C:before{

transform:rotate(45deg);

position:absolute;

content:'';

top:2px;

left:49px;

width:90px;

height:90px;

background-color:#ffffff;

}

a3090f721e9ba41dc75ffe211a1622a2.png.D{

position:relative;

margin:10px 20px 10px 5px;

float: left;

top:12.5px;

left:10px;

border-left:solid 15px #ade081;

height:125px;

}

.D:before{

position:absolute;

content:'';

top:0;

left:0;

width:60px;

height:95px;

border-width:15px 15px 15px 0;

border-color:#ade081;

border-style:solid;

border-radius:0 300%300%0 /0 180%180%0;

}

d2c54f72a8460b46ce27df25788ca3e1.png.E{

position:relative;

margin:10px 10px 10px 60px;

float: left;

top:12.5px;

left:10px;

width:63px;

height:95px;

border-width:15px 0 15px 16px;

border-color:#cd2388;

border-style:solid;

}

.E:before{

position:absolute;

content:'';

top:38px;

left:0px;

width:53px;

height:15px;

background-color:#cd2388;

}

85a8bfbc6b1945347fc162a5550db73d.png.F{

position:relative;

margin:10px 5px 10px 10px;

float: left;

top:12.5px;

left:10px;

width:63px;

height:110px;

border-width:15px 0 0 16px;

border-color:#668899;

border-style:solid;

}

.F:before{

position:absolute;

content:'';

top:38px;

left:0px;

width:53px;

height:15px;

background-color:#668899;

}

2aa1cdb80eadb0fa937a296ddd9a36ea.png.G{

position:relative;

margin:10px 5px 10px 5px;

float: left;

top:12.5px;

left:10px;

width:84px;

height:95px;

border-width:15px 12px 15px 16px;

border-color:#f0af00;

border-style:solid;

border-radius:50%;

}

.G:before{

transform:rotate(45deg);

position:absolute;

content:'';

top:2px;

left:48px;

background-color:#ffffff;

width:90px;

height:90px;

}

.G:after{

position:absolute;

content:'';

bottom:0.5px;

right:7px;

width:28px;

height:36px;

border-width:13px 14px 0 0;

border-color:#f0af00;

border-style:solid;

}

f3c5082f649fe4cb04ca039b1ae5ffd7.png.H{

position:relative;

margin:10px 10px 10px 5px;

float: left;

top:12.5px;

left:10px;

width:60px;

height:125px;

border-width:0 16px 0 16px;

border-color:#cde680;

border-style:solid;

}

.H:before{

position:absolute;

content:'';

top:53px;

left:0;

width:60px;

height:14px;

background-color:#cde680;

}

3369a546924cc3ed9438618bf1e240f5.png.I{

z-index:1;

position:relative;

margin:10px 10px 10px 10px;

float: left;

top:12.5px;

left:20px;

width:16px;

height:125px;

background-color:#020a0f;

}

e10fdea501e6b485e0f51fb9f4903250.png.J{

position:relative;

margin:10px 5px 10px 5px;

float: left;

top:12.5px;

left:-5px;

width:75px;

height:66px;

border-right:solid 16px #b0c0d0;

}

.J:before{

position:absolute;

content:'';

bottom:-60px;

right:-16px;

width:50px;

height:60px;

border-width:0 16px 15px 14px;

border-color:#b0c0d0;

border-style:solid;

border-radius:0 0 75%75%;

}

.J:after{

transform:rotate(-40deg);

position:absolute;

content:'';

top:40px;

left:-20px;

width:60px;

height:60px;

background-color:#ffffff;

}

e31d072bac9a21e80006e9af12395e41.png.K{

position:relative;

margin:10px 5px 10px 5px;

float: left;

top:12.5px;

left:10px;

width:80px;

height:125px;

border-left:solid 16px #ce6688;

overflow:hidden;

}

.K:before{

transform:skew(-43deg,0);

position:absolute;

content:'';

top:0;

left:16px;

width:19px;

height:84px;

background-color:#ce6688;

}

.K:after{

transform:skew(30deg,0);

position:absolute;

content:'';

bottom:0;

right:25px;

width:18px;

height:80px;

background-color:#ce6688;

}

dcb633ed0cc80047db8142a63f91fbe3.png.L{

position:relative;

margin:10px 5px 10px 5px;

float: left;

top:12.5px;

left:10px;

width:63px;

height:110px;

border-width:0 0 15px 16px;

border-color:#998800;

border-style:solid;

}

705ccb1df62eafde6eea30908d306b29.png.M{

position:relative;

margin:10px 5px 10px 5px;

float: left;

top:12.5px;

left:10px;

width:80px;

height:125px;

border-width:0 15px 0 15px;

border-color:#ff0000;

border-style:solid;

}

.M:before{

transform:skew(20deg,0);

position:absolute;

content:'';

top:0;

left:14px;

width:12px;

height:110px;

background-color:#ff0000;

}

.M:after{

transform:skew(-20deg,0);

position:absolute;

content:'';

top:0;

right:14px;

width:12px;

height:110px;

background-color:#ff0000;

}

1feca721af60868b80bb7abf3ee16251.png.N{

position:relative;

margin:10px 5px 10px 5px;

float: left;

top:12.5px;

left:10px;

width:63px;

height:125px;

border-width:0 15px 0 15px;

border-color:#9aff02;

border-style:solid;

}

.N:before{

transform:skew(30deg,0);

position:absolute;

content:'';

top:0;

left:24px;

width:15px;

height:125px;

background-color:#9aff02;

}

23ec6cee7740acd3f9e4555c37bc9123.png.O{

position:relative;

margin:10px 5px 10px 5px;

float: left;

top:12.5px;

left:10px;

width:70px;

height:97px;

border-width:14px 16px 14px 16px;

border-color:#ffff40;

border-style:solid;

border-radius:55% /52%;

}

5e2a7bfb448f93817e6106c7248f23cc.png.P{

position:relative;

margin:10px 5px 10px 5px;

float: left;

top:12.5px;

left:10px;

width:60px;

height:125px;

border-left:solid 16px #00ffff;

}

.P:before{

position:absolute;

content:'';

width:56px;

height:50px;

border-width:13px 15px 13px 0;

border-color:#00ffff;

border-style:solid;

border-radius:0 220%220%0 /0 180%180%0;

}

02c73889c66b8bb53a70e81ad66683a6.png.Q {

z-index:-1;

position:relative;

margin:10px 5px 10px 5px;

float: left;

top:12.5px;

left:10px;

width:70px;

height:97px;

border-width:14px 16px 14px 16px;

border-color:#deff00;

border-style:solid;

border-radius:55% /52%;

}

.Q:before{

transform:rotate(-84deg);

position:absolute;

content:'';

top:82px;

left:49px;

width:16px;

height:48px;

border-width:16px 0 13px 13px;

border-color:#deff00;

border-style:solid;

border-radius:200%0 0 200% /100%0 0 100%;

}

.Q:after{

transform:rotate(-18deg);

position:absolute;

content:'';

bottom:-35px;

right:-44px;

width:30px;

height:30px;

background-color:#ffffff;

}

ece1ef33f6b167dd43a92ba5ac1093ad.png.R{

position:relative;

margin:10px 5px 10px 5px;

float: left;

top:12.5px;

left:10px;

width:60px;

height:125px;

border-left:solid 16px #a0b0c0;

}

.R:before{

position:absolute;

content:'';

width:52px;

height:44px;

border-width:13px 15px 13px 0;

border-color:#a0b0c0;

border-style:solid;

border-radius:0 220%220%0 /0 180%180%0;

}

.R:after{

transform:skew(32deg,0);

position:absolute;

content:'';

bottom:0;

left:38px;

width:18px;

height:58px;

background-color:#a0b0c0;

}

7e0f209ec0c8366f820a493d3fb9753a.png.S{

transform:rotate(14deg);

position:relative;

margin:10px 5px 10px 5px;

float: left;

width:105px;

height:150px;

top:10px;

left:10px;

}

.S:before{

transform:rotate(18deg);

position:absolute;

content:'';

width:44px;

height:40px;

border-width:14px 0 15px 15.5px;

border-color:#ffaf80;

border-style:solid;

border-radius:220%0 0 150% /150%0 0 100%;

}

.S:after{

transform:rotate(198deg);

position:absolute;

content:'';

top:65px;

left:21px;

width:52px;

height:44px;

border-width:14px 0 15px 15px;

border-color:#ffaf80;

border-style:solid;

border-radius:240%0 0 110% /140%0 0 100%;

}

e5e9a3274e1753dd780f3f5a52f1bca2.png.T{

position:relative;

margin:10px 5px 10px 5px;

float: left;

top:12.5px;

left:10px;

width:100px;

height:125px;

border-top:solid 15px #ffd0e0;

}

.T:before{

position:absolute;

content:'';

top:0;

left:42px;

width:16px;

height:110px;

background-color:#ffd0e0;

}

9111f2d323b50b3495ce1a0d675b0581.png.U{

position:relative;

margin:10px 5px 10px 5px;

float: left;

top:12.5px;

left:10px;

width:60px;

height:80px;

border-width:0 16px 0 16px;

border-color:#ff8f01;

border-style:solid;

}

.U:before{

position:absolute;

content:'';

top:65px;

left:-16px;

width:60px;

height:45px;

border-width:0 16px 15px 16px;

border-color:#ff8f01;

border-style:solid;

border-radius:0 0 200%200% /0 0 300%300%;

}

cd438c6974c629bf2dd3364e917a620a.png.V{

position:relative;

margin:10px 5px 10px 5px;

float: left;

top:12.5px;

left:30px;

width:59px;

}

.V:before{

transform:skew(18deg,0);

position:absolute;

content:'';

top:0;

left:0;

height:125px;

border-left:solid 16px #008800;

}

.V:after{

transform:skew(-18deg,0);

position:absolute;

content:'';

top:0;

right:0;

height:125px;

border-left:solid 16px #008800;

}

c65ea19a9f425f3ed3196b4ee3fffe4e.png.W{

position:relative;

margin:10px 5px 10px 40px;

float: left;

top:12.5px;

left:25px;

width:100px;

}

.W:before{

transform:skew(11deg,0);

position:absolute;

content:'';

top:0;

left:0;

width:42px;

height:125px;

border-width:0 13px 0 15px;

border-color:#000000;

border-style:solid;

}

.W:after{

transform:skew(-11deg,0);

position:absolute;

content:'';

top:0;

right:0;

width:42px;

height:125px;

border-width:0 15px 0 13px;

border-color:#000000;

border-style:solid;

}

42907dcc5662e117af9d49150bd3216b.png.X{

position:relative;

margin:10px 5px 10px 25px;

float: left;

top:12.5px;

left:50px;

width:16px;

height:125px;

}

.X:before{

transform:skew(32deg,0);

position:absolute;

content:'';

top:0;

left:0;

width:16px;

height:125px;

background-color:#0066ff;

}

.X:after{

transform:skew(-32deg,0);

position:absolute;

content:'';

top:0;

right:0;

width:16px;

height:125px;

background-color:#0066ff;

}

ecaa1a85d3c934f8e246c58eeca1da88.png.Y{

position:relative;

margin:10px 5px 10px 80px;

float: left;

top:92.5px;

left:52px;

width:16px;

height:50px;

background-color:#22ff55;

}

.Y:before{

transform:skew(28deg,0);

position:absolute;

content:'';

top:-80px;

left:-21px;

width:16px;

height:80px;

background-color:#22ff55;

}

.Y:after{

transform:skew(-28deg,0);

position:absolute;

content:'';

top:-80px;

right:-21px;

width:16px;

height:80px;

background-color:#22ff55;

}

a644e6a78759a8ffa9cf09f1c102751b.png.Z{

position:relative;

margin:20px 5px 10px 80px;

float: left;

top:12.5px;

left:10px;

width:90px;

height:95px;

border-width:15px 0 15px 0;

border-color:#336699;

border-style:solid;

}

.Z:before{

transform:skew(-37deg,0);

position:absolute;

content:'';

top:0;

left:36px;

width:18px;

height:95px;

background-color:#336699;

}

完整的HTML5+CSS3版Demo。

效果截图：

87ab20f45ffecc37eb4333e95e5c1aa6.png

CSS3绘制26个字母

.A{

position:relative;

margin:10px 30px 10px 5px; /*上右下左 */

float: left;

left:30px;

width:60px;

height:91px;

border-bottom:solid 14px #0feee2;

}

.A:before{

transform:skew(-19deg,0);

position:absolute;

content:'';

top:12.5px;

left:0;

width:16px;

height:125px;

background-color:#0feee2;

}

.A:after{

transform:skew(19deg,0);

position:absolute;

content:'';

top:12.5px;

left:45px;

width:16px;

height:125px;

background-color:#0feee2;

}

.B{

position:relative;

margin:10px 20px 10px 30px;

float: left;

top:12.5px;

left:10px;

width:60px;

height:125px;

border-left:solid 16px #2056cd;

}

.B:before{

position:absolute;

content:'';

width:52px;

height:39px;

border-width:15px 15px 10px 0;

border-color:#2056cd;

border-style:solid;

border-radius:0 240%180%0 /0 180%180%0;

}

.B:after{

position:absolute;

content:'';

bottom:0;

width:58px;

height:43px;

border-width:10px 15px 15px 0;

border-color:#2056cd;

border-style:solid;

border-radius:0 180%220%0 /0 180%180%0;

}

.C{

position:relative;

margin:10px 5px 10px 10px;

float: left;

top:12.5px;

left:10px;

width:84px;

height:95px;

border-width:15px 12px 15px 16px;

border-color:#87adef;

border-style:solid;

border-radius:50%;

}

.C:before{

transform:rotate(45deg);

position:absolute;

content:'';

top:2px;

left:49px;

width:90px;

height:90px;

background-color:#ffffff;

}

.D{

position:relative;

margin:10px 20px 10px 5px;

float: left;

top:12.5px;

left:10px;

border-left:solid 15px #ade081;

height:125px;

}

.D:before{

position:absolute;

content:'';

top:0;

left:0;

width:60px;

height:95px;

border-width:15px 15px 15px 0;

border-color:#ade081;

border-style:solid;

border-radius:0 300%300%0 /0 180%180%0;

}

.E{

position:relative;

margin:10px 10px 10px 60px;

float: left;

top:12.5px;

left:10px;

width:63px;

height:95px;

border-width:15px 0 15px 16px;

border-color:#cd2388;

border-style:solid;

}

.E:before{

position:absolute;

content:'';

top:38px;

left:0px;

width:53px;

height:15px;

background-color:#cd2388;

}

.F{

position:relative;

margin:10px 5px 10px 10px;

float: left;

top:12.5px;

left:10px;

width:63px;

height:110px;

border-width:15px 0 0 16px;

border-color:#668899;

border-style:solid;

}

.F:before{

position:absolute;

content:'';

top:38px;

left:0px;

width:53px;

height:15px;

background-color:#668899;

}

.G{

position:relative;

margin:10px 5px 10px 5px;

float: left;

top:12.5px;

left:10px;

width:84px;

height:95px;

border-width:15px 12px 15px 16px;

border-color:#f0af00;

border-style:solid;

border-radius:50%;

}

.G:before{

transform:rotate(45deg);

position:absolute;

content:'';

top:2px;

left:48px;

background-color:#ffffff;

width:90px;

height:90px;

}

.G:after{

position:absolute;

content:'';

bottom:0.5px;

right:7px;

width:28px;

height:36px;

border-width:13px 14px 0 0;

border-color:#f0af00;

border-style:solid;

}

.H{

position:relative;

margin:10px 10px 10px 5px;

float: left;

top:12.5px;

left:10px;

width:60px;

height:125px;

border-width:0 16px 0 16px;

border-color:#cde680;

border-style:solid;

}

.H:before{

position:absolute;

content:'';

top:53px;

left:0;

width:60px;

height:14px;

background-color:#cde680;

}

.I{

z-index:1;

position:relative;

margin:10px 10px 10px 10px;

float: left;

top:12.5px;

left:20px;

width:16px;

height:125px;

background-color:#020a0f;

}

.J{

position:relative;

margin:10px 5px 10px 5px;

float: left;

top:12.5px;

left:-5px;

width:75px;

height:66px;

border-right:solid 16px #b0c0d0;

}

.J:before{

position:absolute;

content:'';

bottom:-60px;

right:-16px;

width:50px;

height:60px;

border-width:0 16px 15px 14px;

border-color:#b0c0d0;

border-style:solid;

border-radius:0 0 75%75%;

}

.J:after{

transform:rotate(-40deg);

position:absolute;

content:'';

top:40px;

left:-20px;

width:60px;

height:60px;

background-color:#ffffff;

}

.K{

position:relative;

margin:10px 5px 10px 5px;

float: left;

top:12.5px;

left:10px;

width:80px;

height:125px;

border-left:solid 16px #ce6688;

overflow:hidden;

}

.K:before{

transform:skew(-43deg,0);

position:absolute;

content:'';

top:0;

left:16px;

width:19px;

height:84px;

background-color:#ce6688;

}

.K:after{

transform:skew(30deg,0);

position:absolute;

content:'';

bottom:0;

right:25px;

width:18px;

height:80px;

background-color:#ce6688;

}

.L{

position:relative;

margin:10px 5px 10px 5px;

float: left;

top:12.5px;

left:10px;

width:63px;

height:110px;

border-width:0 0 15px 16px;

border-color:#998800;

border-style:solid;

}

.M{

position:relative;

margin:10px 5px 10px 5px;

float: left;

top:12.5px;

left:10px;

width:80px;

height:125px;

border-width:0 15px 0 15px;

border-color:#ff0000;

border-style:solid;

}

.M:before{

transform:skew(20deg,0);

position:absolute;

content:'';

top:0;

left:14px;

width:12px;

height:110px;

background-color:#ff0000;

}

.M:after{

transform:skew(-20deg,0);

position:absolute;

content:'';

top:0;

right:14px;

width:12px;

height:110px;

background-color:#ff0000;

}

.N{

position:relative;

margin:10px 5px 10px 5px;

float: left;

top:12.5px;

left:10px;

width:63px;

height:125px;

border-width:0 15px 0 15px;

border-color:#9aff02;

border-style:solid;

}

.N:before{

transform:skew(30deg,0);

position:absolute;

content:'';

top:0;

left:24px;

width:15px;

height:125px;

background-color:#9aff02;

}

.O{

position:relative;

margin:10px 5px 10px 5px;

float: left;

top:12.5px;

left:10px;

width:70px;

height:97px;

border-width:14px 16px 14px 16px;

border-color:#ffff40;

border-style:solid;

border-radius:55% /52%;

}

.P{

position:relative;

margin:10px 5px 10px 5px;

float: left;

top:12.5px;

left:10px;

width:60px;

height:125px;

border-left:solid 16px #00ffff;

}

.P:before{

position:absolute;

content:'';

width:56px;

height:50px;

border-width:13px 15px 13px 0;

border-color:#00ffff;

border-style:solid;

border-radius:0 220%220%0 /0 180%180%0;

}

.Q {

z-index:-1;

position:relative;

margin:10px 5px 10px 5px;

float: left;

top:12.5px;

left:10px;

width:70px;

height:97px;

border-width:14px 16px 14px 16px;

border-color:#deff00;

border-style:solid;

border-radius:55% /52%;

}

.Q:before{

transform:rotate(-84deg);

position:absolute;

content:'';

top:82px;

left:49px;

width:16px;

height:48px;

border-width:16px 0 13px 13px;

border-color:#deff00;

border-style:solid;

border-radius:200%0 0 200% /100%0 0 100%;

}

.Q:after{

transform:rotate(-18deg);

position:absolute;

content:'';

bottom:-35px;

right:-44px;

width:30px;

height:30px;

background-color:#ffffff;

}

.R{

position:relative;

margin:10px 5px 10px 5px;

float: left;

top:12.5px;

left:10px;

width:60px;

height:125px;

border-left:solid 16px #a0b0c0;

}

.R:before{

position:absolute;

content:'';

width:52px;

height:44px;

border-width:13px 15px 13px 0;

border-color:#a0b0c0;

border-style:solid;

border-radius:0 220%220%0 /0 180%180%0;

}

.R:after{

transform:skew(32deg,0);

position:absolute;

content:'';

bottom:0;

left:38px;

width:18px;

height:58px;

background-color:#a0b0c0;

}

.S{

transform:rotate(14deg);

position:relative;

margin:10px 5px 10px 5px;

float: left;

width:105px;

height:150px;

top:10px;

left:10px;

}

.S:before{

transform:rotate(18deg);

position:absolute;

content:'';

width:44px;

height:40px;

border-width:14px 0 15px 15.5px;

border-color:#ffaf80;

border-style:solid;

border-radius:220%0 0 150% /150%0 0 100%;

}

.S:after{

transform:rotate(198deg);

position:absolute;

content:'';

top:65px;

left:21px;

width:52px;

height:44px;

border-width:14px 0 15px 15px;

border-color:#ffaf80;

border-style:solid;

border-radius:240%0 0 110% /140%0 0 100%;

}

.T{

position:relative;

margin:10px 5px 10px 5px;

float: left;

top:12.5px;

left:10px;

width:100px;

height:125px;

border-top:solid 15px #ffd0e0;

}

.T:before{

position:absolute;

content:'';

top:0;

left:42px;

width:16px;

height:110px;

background-color:#ffd0e0;

}

.U{

position:relative;

margin:10px 5px 10px 5px;

float: left;

top:12.5px;

left:10px;

width:60px;

height:80px;

border-width:0 16px 0 16px;

border-color:#ff8f01;

border-style:solid;

}

.U:before{

position:absolute;

content:'';

top:65px;

left:-16px;

width:60px;

height:45px;

border-width:0 16px 15px 16px;

border-color:#ff8f01;

border-style:solid;

border-radius:0 0 200%200% /0 0 300%300%;

}

.V{

position:relative;

margin:10px 5px 10px 5px;

float: left;

top:12.5px;

left:30px;

width:59px;

}

.V:before{

transform:skew(18deg,0);

position:absolute;

content:'';

top:0;

left:0;

height:125px;

border-left:solid 16px #008800;

}

.V:after{

transform:skew(-18deg,0);

position:absolute;

content:'';

top:0;

right:0;

height:125px;

border-left:solid 16px #008800;

}

.W{

position:relative;

margin:10px 5px 10px 40px;

float: left;

top:12.5px;

left:25px;

width:100px;

}

.W:before{

transform:skew(11deg,0);

position:absolute;

content:'';

top:0;

left:0;

width:42px;

height:125px;

border-width:0 13px 0 15px;

border-color:#000000;

border-style:solid;

}

.W:after{

transform:skew(-11deg,0);

position:absolute;

content:'';

top:0;

right:0;

width:42px;

height:125px;

border-width:0 15px 0 13px;

border-color:#000000;

border-style:solid;

}

.X{

position:relative;

margin:10px 5px 10px 25px;

float: left;

top:12.5px;

left:50px;

width:16px;

height:125px;

}

.X:before{

transform:skew(32deg,0);

position:absolute;

content:'';

top:0;

left:0;

width:16px;

height:125px;

background-color:#0066ff;

}

.X:after{

transform:skew(-32deg,0);

position:absolute;

content:'';

top:0;

right:0;

width:16px;

height:125px;

background-color:#0066ff;

}

.Y{

position:relative;

margin:10px 5px 10px 80px;

float: left;

top:92.5px;

left:52px;

width:16px;

height:50px;

background-color:#22ff55;

}

.Y:before{

transform:skew(28deg,0);

position:absolute;

content:'';

top:-80px;

left:-21px;

width:16px;

height:80px;

background-color:#22ff55;

}

.Y:after{

transform:skew(-28deg,0);

position:absolute;

content:'';

top:-80px;

right:-21px;

width:16px;

height:80px;

background-color:#22ff55;

}

.Z{

position:relative;

margin:20px 5px 10px 80px;

float: left;

top:12.5px;

left:10px;

width:90px;

height:95px;

border-width:15px 0 15px 0;

border-color:#336699;

border-style:solid;

}

.Z:before{

transform:skew(-37deg,0);

position:absolute;

content:'';

top:0;

left:36px;

width:18px;

height:95px;

background-color:#336699;

}

weixin_39979080
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
PHP输出二十六个英文字母
wgchen
03-29 1455
PHP输出二十六个英文字母
纯CSS3英文字母欢迎光临特效
07-24
纯CSS3英文字母欢迎光临特效是一款英文字母的欢迎光临七色板文字动画特效。
PHP快速输出26大小写字母
Turbo
10-19 603
PHP快速输出26大小写字母。
PHP输出二十六位英文字母
苏程宽的博客
10-17 1693
PHP输出二十六位英文字母 $ABC = []; for($i=65;$i<91;$i++){ $ABC[] = strtoupper(chr($i));//输出大写字母 } return $ABC;
php输出26个大小写英文字母
对代码不满足，是任何真正有天才的程序员的根本特征。
11-10 8042
get到一个新的技能 php输出26大小写字母 for($i=65;$i<91;$i++){ echo strtolower(chr($i)).' ';//输出小写字母 echo strtoupper(chr($i)).' ';//输出大写字母 }
纯CSS3网格霓虹灯英文字母特效
07-24
纯CSS3网格霓虹灯英文字母特效是一款纯css3蓝色的网格3D布局，复古的霓虹灯英文字母展示特效。
CSS3彩色英文字母动画特效
07-24
CSS3彩色英文字母动画特效是一款基于css3 keyframes属性制作的创意英文字母翻转，变大缩小动画特效。
JS+CSS3倾斜英文字母动画特效
07-24
JS+CSS3倾斜英文字母动画特效是一款彩色的英文字母动画，倾斜的文字动画特效。
php输出A到AZY的所有字母及组合
博客
03-02 460
代码 <?php for($i='A';$i!="AZZ";$i++){ echo $i."<br/>"; } ?> 输出A到AZY的所有字母及组合（1377个）
php 数字变26个字母
07-04
php 数字变26个字母php 数字变26个字母
php 字母范围,如何用PHP输出指定范围内的所有字母?
weixin_42394088的博客
03-17 246
在PHP面试过程中，关于用PHP输出1到100或者某个范围的数字，都是比较常见的问题。那么对于PHP学习者来说，应该是比较简单。我们都知道，只要使用基础的PHP循环语句，就可以循环输出我们想要的数据。但是对于如何输出指定范围内的所有字母，可能对于新手来说，可能有一定的难度，不过也是非常简单的。如何用PHP输出指定范围内的所有字母?下面我们就结合具体的代码示例，给大家介绍如何用PHP打印书序从a到z...
php 24字母和 数字进行转化
廖圣平
08-16 6358
切记：当数字达到很大的时候，会出现 其他的标识，慎用 。如果使用存字母和数字转换的，点击查看 &lt;?php function decimal2ABC($num){ $ABCstr = ""; $ten = $num; if($ten==0) return "A"; while($ten!=0){ $x = $ten%26; ...
php循环输出26个大小写英文字母
php菜鸟技术天地
03-09 8533
for($i=65;$i<91;$i++){ echo strtolower(chr($i)).' ';//输出小写字母 echo strtoupper(chr($i)).' ';//输出大写字母 } 引用:http://blog.csdn.net/u011650048/article/details/53117545
PHP 26个英文字母递增
tangan456的专栏
12-12 8653
/** * 大写英文字母递增 * * chr() 函数从指定的 ASCII 值返回字符 * ord() 函数返回字符串第一个字符的 ASCII 值 * * @param string $str A-Z的英文字母 * @return string */ function AZIncrement($str) { // 参数转换为大写 $str = strtouppe
php获取26个字母,php 根据26个字母分类列出用户名 代码
weixin_32769015的博客
03-11 488
有个用户表，我要把所有用户名根据26个英文字母分类列出？如图。解决方案如下，第一个数组$names假设是从数据库取出来的。$names = array ("bill gates","tanteng","wangjun","renhong","zhangyong","liyifei","wangwei","zhoutong","wangcheng","liuyingying","yuanbo","l...
php 按顺序生成字母,使用PHP按字母顺序(a-z)列出的最佳方法
weixin_42133969的博客
03-12 628
我做了一个常数时间函数,如下所示此函数给出数字索引的字母表示形式public static $alpha = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];public static ...
php 随机返回26个英文字母中的两个字母
大华的程序人生
02-23 1668
for ($i = 1; $i <= 4; $i++) { echo chr(mt_rand(65, 90)); } //97~122是小写的英文字母65~90是大写的 a-z：97-122，A-Z：65-90，0-9：48-57。 ASCII 码使用指定的7 位或8 位二进制数组合来表示128 或256 种可能的字符。 0～31及127(共33个)是控制字符或通信专用...
php 生成26个字母,js随机生成26个大小写字母_javascript技巧
weixin_32498069的博客
04-02 298
首先为大家介绍js生成26个大小写字母，主要用到 str.charCodeAt()和 String.fromCharCode()方法1、使用 charCodeAt()来获得字符串中某个具体字符的 Unicode 编码。2、fromCharCode()可接受一个(或多个)指定的 Unicode 值，然后返回对应的字符串。//生成大写字母 A的Unicode值为65function generateB...
css3魔方3乘3每层旋转_使用CSS3一个3D魔方详解~
最新发布
05-25
下面是一个使用CSS3实现的3乘3魔方旋转的示例： HTML代码： ``` <div class="face front"></div> <div class="face back"></div> <div class="face left"></div> <div class="face right"></div> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值