在不使用 img的情况下,在 HTML 5中构建 HTML 5徽标的最学术方法是什么?元素或使用画布drawImage,或使用图像资源的位图数据. 换句话说,使用HTML 5,CSS3准确构建HTML 5徽标的方法是什么?我会想
换句话说,使用HTML 5,CSS3准确构建HTML 5徽标的方法是什么?我会想象DIV和画布画?我不是一个CSS3向导,它看起来相当令人生畏,比如说100行,知道一种解决这个问题的标准方法会很好.
这是一个非常有趣的编程问题.徽标本身非常酷,看起来非常HTML 5 / CSS3.
这个单一标签标志将帮助您 –纯净的CSS
<div id="css3icon" />
CSS-
#css3icon { outline:solid 1px transparent; display:inline-block; position:relative; height:0.8em; width:0.8em; background:transparent; color:transparent; line-height:0.8em; overflow:visible; box-shadow: 0.8em 0 0 #38c, 1.4em 0 0 #38c, 2em 0 0 #38c, 2.6em 0 0 #38c, 3.2em 0 0 #38c, 3.6em 0 0 #38c, 4em 0 0 #38c, 4em 0.65em 0 #38c, 0.8em 1.3em 0 #38c, 1.4em 1.3em 0 #38c, 2em 1.3em 0 #38c, 2.6em 1.3em 0 #38c, 3.2em 1.3em 0 #38c, 3.6em 1.3em 0 #38c, 4em 1.3em 0 #38c, 4em 1.9em 0 #38c, 0.8em 2.6em 0 #38c, 4em 2.6em 0 #38c; transform: skewX(-12deg); -webkit-transform: skewX(-12deg); -ms-transform: skewX(-12deg); } #css3icon:before { position:absolute; content:''; display:block; height:0.8em; width:2em; margin:3.4em 0 0 0.8em; background:#38c; transform: skew(-1deg,18.4deg); transform-origin: 100% 100%; -webkit-transform: skew(-1deg,18.4deg); -webkit-transform-origin: 100% 100%; -ms-transform: skew(-1deg,18.4deg); -ms-transform-origin: 100% 100%; border-right:solid 1px #38c; } #css3icon:after { position:absolute; content:''; display:block; height:0.8em; width:2em; margin:3.4em 0 0 2.8em; background:#38c; transform: skew(1deg,-18.4deg); transform-origin: 0% 100%; -webkit-transform: skew(1deg,-18.4deg); -webkit-transform-origin: 0 100%; -ms-transform: skew(1deg,-18.4deg); -ms-transform-origin: 0 100%; } body { width:100%; padding-top:1em; font-size:3em; text-align:center; } body > * { position:relative; left:-2.4em; }
单击Here对于实例.