使用html+css画一个波士顿凯尔特人的三叶草logo
生活随笔
收集整理的這篇文章主要介紹了
使用html+css画一个波士顿凯尔特人的三叶草logo
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
2019獨角獸企業重金招聘Python工程師標準>>>
昨天在 oschina 上看到有人貼了一個 css 畫的 oschina 的logo,忽然想起來以前我畫過的一個東西。是去年 NBA 季后賽的時候,為了給凱爾特人加油用 css 畫的凱爾特人隊標。不是很精細,大家湊合著看看:
代碼我也貼出來,沒使用單獨的 css 是因為當時想直接貼在論壇里:
<div><divstyle="margin:0px;padding:0px;height:32px;width:20px;position:relative;background:#008349;z-index:2;left:80px;-moz-transform-origin:0% 100%;-webkit-transform-origin:0% 100%;transform-origin:0% 100%;-moz-border-radius:10px 10px 0px 10px;-webkit-border-radius:10px 10px 0px 0px;border-radius:10px 10px 0px 0px;top:30px;-moz-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transform:rotate(-45deg);"></div><divstyle="margin:0px;padding:0px;height:32px;width:20px;position:relative;background:#008349;z-index:2;left:80px;-moz-transform-origin:0% 100%;-webkit-transform-origin:0% 100%;transform-origin:0% 100%;-moz-border-radius:10px 10px 0px 10px;-webkit-border-radius:10px 10px 0px 0px;border-radius:10px 10px 0px 0px;top:-2px;-moz-transform:rotate(-155deg);-webkit-transform:rotate(-155deg);transform:rotate(-155deg);"></div><divstyle="margin:0px;padding:0px;height:32px;width:20px;position:relative;background:#008349;z-index:2;left:80px;-moz-transform-origin:0% 100%;-webkit-transform-origin:0% 100%;transform-origin:0% 100%;-moz-border-radius:10px 10px 0px 10px;-webkit-border-radius:10px 10px 0px 0px;border-radius:10px 10px 0px 0px;top:-34px;-moz-transform:rotate(65deg);-webkit-transform:rotate(65deg);transform:rotate(65deg);"></div><divstyle="margin:0px;padding:0px;height:32px;width:20px;position:relative;background:#008349;z-index:2;left:60px;-moz-transform-origin:100% 100%;-webkit-transform-origin:100% 100%;transform-origin:100% 100%;-moz-border-radius:10px 10px 0px 0px;-webkit-border-radius:10px 10px 0px 0px;border-radius:10px 10px 0px 0px;top:-66px;-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg);"></div><divstyle="margin:0px;padding:0px;height:32px;width:20px;position:relative;background:#008349;z-index:2;left:60px;-moz-transform-origin:100% 100%;-webkit-transform-origin:100% 100%;transform-origin:100% 100%;-moz-border-radius:10px 10px 0px 0px;-webkit-border-radius:10px 10px 0px 0px;border-radius:10px 10px 0px 0px;top:-98px;-moz-transform:rotate(-65deg);-webkit-transform:rotate(-65deg);transform:rotate(-65deg);"></div><divstyle="margin:0px;padding:0px;height:32px;width:20px;position:relative;background:#008349;z-index:2;left:60px;-moz-transform-origin:100% 100%;-webkit-transform-origin:100% 100%;transform-origin:100% 100%;-moz-border-radius:10px 10px 0px 0px;-webkit-border-radius:10px 10px 0px 0px;border-radius:10px 10px 0px 0px;top:-130px;-moz-transform:rotate(155deg);-webkit-transform:rotate(155deg);transform:rotate(155deg);"></div><divstyle="margin:0px;padding:0px;height:40px; width:40px;position:relative;left:78px;top:-130px;border-left:3px solid #008349;z-index:2;border-radius:0px 0px 0px 40px;-moz-border-radius:0px 0px 0px 40px;-webkit-border-radius:0px 0px 0px 40px;"></div><divstyle="margin:0px;padding:0px;position:relative;left:30px;top:-220px;height:100px; width:100px;background:white;z-index:1;border-radius:50px;-moz-border-radius:50px;-webkit-border-radius:50px;"></div><divstyle="margin:0px;padding:0px;position:relative;left:18px;top:-330px;height:120px; width:756px;background:#008349;color:white;font:bold 400% Verdana;"><p style="margin:0px;padding:0px;position:relative;left:120px;top:20px;">BOSTON CELTICS</p></div></div>
轉載于:https://my.oschina.net/legendlee/blog/93981
總結
以上是生活随笔為你收集整理的使用html+css画一个波士顿凯尔特人的三叶草logo的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: My Twelfth Page - 环形
- 下一篇: My Eighty-first Page