利用css3.0寫(xiě)出一個(gè)音樂(lè )播放的唱片碟盤(pán)的效果
<!doctype html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>利用css3.0寫(xiě)出一個(gè)音樂(lè )播放的唱片碟盤(pán)的效果</title>
</head>
<body>
<div class="vinyldiv"></div>
<style>
.vinyldiv {
position: absolute;
top: 2px;
left: 2px;
display: block;
z-index: 10;
width: 112px;
height: 112px;
-webkit-border-radius: 59px;
-moz-border-radius: 59px;
-webkit-box-shadow: 0 0 6px rgba(0,0,0,.5);
-webkit-transition: all .25s linear;
overflow: hidden;
border: solid 1px black;
background: -webkit-gradient( linear, left top, left bottom, from(transparent), color-stop(0.1, transparent), color-stop(0.5, rgba(255,255,255,0.25)), color-stop(0.9, transparent), to(transparent)), -webkit-gradient( radial, 56 56, 10, 56 56, 114, from(transparent), color-stop(0.01, transparent), color-stop(0.021, rgba(0,0,0,1)), color-stop(0.09, rgba(0,0,0,1)), color-stop(0.1, rgba(28,28,28,1)), to(rgba(28,28,28,1)));
border-top: 1px solid rgba(255,255,255,.25);
}
</style>
</body>
</html>
- 相關(guān)閱讀
- DIV與Table布局在大型網(wǎng)站的可用性比較
- 正則的常表達式
- NameError: name ‘xxx‘ is not defined問(wèn)題總結
- radio單選按鈕組選擇詳細
- 經(jīng)典的仿藍色理想TAB橫向下拉菜單效果
- 仿taobao效果拼音字母檢索功能
- asp截取字符串:根據右邊第一個(gè)點(diǎn)(.)去掉擴展名
- css里expression實(shí)現界面對象的批量控制
- 共有0條關(guān)于《利用css3.0寫(xiě)出一個(gè)音樂(lè )播放的唱片碟盤(pán)的效果》的評論
- 發(fā)表評論
您發(fā)布的評論即表示同意遵守以下條款:
一、不得利用本站危害國家安全、泄露國家秘密,不得侵犯國家、社會(huì )、集體和公民的合法權益;
二、不得發(fā)布國家法律、法規明令禁止的內容;互相尊重,對自己在本站的言論和行為負責;
三、本站對您所發(fā)布內容擁有處置權。
- 更多信息>>欄目類(lèi)別選擇
- 百度小程序開(kāi)發(fā)
- 微信小程序開(kāi)發(fā)
- 微信公眾號開(kāi)發(fā)
- uni-app
- asp函數庫
- ASP
- DIV+CSS
- HTML
- python
- 更多>>同類(lèi)信息
- jquery設置或獲取修改classname
- 利用css3.0寫(xiě)出一個(gè)音樂(lè )播放的唱片碟盤(pán)的效果
- 利用css中的scale()實(shí)現放大縮小效果
- 利用background-color:#000000a8在背景顏色16進(jìn)制代碼之后加字母加上數字讓背景色透明
- css背景使用base64編碼或者將base64編碼放在img圖片標簽中
- 利用css3中的-webkit-font-smoothing把網(wǎng)頁(yè)文字的毛邊去掉
- 更多>>最新添加文章
- 抖音直播音掛載小雪花 懂車(chē)帝小程序
- javascript獲取瀏覽器指紋可以用來(lái)做投票
- 火狐Mozilla Firefox出現:無(wú)法載入您的Firefox配置文件 它可能已經(jīng)丟失 或是無(wú)法訪(fǎng)問(wèn) 問(wèn)題解決集合處理辦法
- 在A(yíng)ndroid、iOS、Windows、MacOS中微信小程序的文件存放路徑
- python通過(guò)代碼修改pip下載源讓下載庫飛起
- python里面requests.post返回的res.text還有其它的嗎
- aliyun阿里云續費域名優(yōu)惠口令(注冊、續費都可以使用)
- windows7環(huán)境下安裝配置jdk