突发奇想,想用css做个光盘..
反正闲着,就尝试一下看看能不能弄出来…
效果图
写得很蛋疼,用一个个圆定位上去的(好像这种写法很垃圾…..
上代码~~
<html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="author" content="Xoris"> <meta http-equiv="Content-Type" content="text/html" charset="utf-8"> <title>CD Cover</title> <style type="text/css"> .CD { margin: auto auto auto -250px; width: 500px; height: 500px; background: none repeat scroll 0% 0% #0253A2; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50%; box-shadow: 0px 0px 0px 5px rgba(173, 157, 169, 0.4); position: absolute; opacity: 0.80; left: 50%; top: 55px; } .CD2 { width: 165px; height: 165px; background: none repeat scroll 0% 0% rgba(27, 27, 27, 0.93); border-radius: 50%; box-shadow: 0px 0px 0px 5px rgba(173, 157, 169, 0.4); position: relative; left: 167px; top: 167px; opacity: 0.80; } .CD3 { width: 60px; height: 60px; background: none repeat scroll 0% 0% #fff; border-radius: 50%; box-shadow: 0px 0px 0px 5px rgba(173, 157, 169, 0.4); position: absolute; left: 52px; top: 52px; opacity: 0.70; } .CD:after { margin-left: -250px; color: #FFF; text-align: center; font-size: 43px; font-weight: bold; font-family: "Times New Roman",serif; text-shadow: 0px 0px 40px #000, 0px -1px 0px #F3F3F3, 0px -2px 0px #F3F3F3; width: 500px; content: "CD Cover"; position: absolute; left: 50%; top: 55px; } .CD:before { margin-left: -250px; color: #FFF; text-align: center; font-size: 16px; font-family: 'Comic Sans MS', cursive, sans-serif; width: 500px; content: "CD Cover Base On CSS3\AXoris [flylai.com]\A 2014.12.27"; white-space: pre; position: absolute; left: 50%; top: 385px; } </style> </head> <body style="background-image:url(bg.jpg);background-attachment:fixed;"> <div class="CD"> <div class="CD2"> <div class="CD3"></div> </div> </div> </body> </html>
再改下可以当作电台的cd封面啥的..
各位自己发挥惹。
望各位路过的大神指导~~
背景自己改惹= =
木有演示地址..
天了噜 吼厉害惹
不厉害 。。很菜很菜
哎哟卧槽,木有演示地址,请允悲
你也用上这个插件啦
这是我见过的最好的代码高亮插件(WP
一个div就能做到了的说…
喔…钉子那种写法么…
yeah 全部用box-shadow 实现√