★→ASP程序学习群:62655404 微信公众号开发
订阅本栏目 RSS您所在的位置: 深山工作室 > DIV+CSS学习 > 正文

利用css3.0写出一个音乐播放的唱片碟盘的效果

 2021/1/24 16:30:44  字体:  浏览 1806 我要评论
需要定制网站程序、公众号程序、微信小程序可以联系:565449214或者加微信13961347334(备注:需要技术)
或者在处理一些技术问题时,有什么不懂的地方,随时可以加我QQ:565449214讨论技术或者加QQ群62655404讨论




<!doctype html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>利用css3.0写出一个音乐播放的唱片碟盘的效果</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>

相关阅读
( 2021/8/6 17:01:01 )uni-app开发表单input组件的一些规则说明自己预留使用
( 2021/7/28 10:35:24 )查询某个字符在字符串中出现的位置数组
( 2021/6/10 8:56:21 )百度小程序开发第一坑tcomponent自定义组件命名坑Compile san component failed. . [SAN ERROR] ROOT>swan-custom-component>view>千万不要用下划线作为自定义组件名
( 2021/6/8 23:24:05 )开始百度小程序开发需要准备工作
( 2021/5/26 14:13:02 )uni-app:使用uni.downloadFile下载word或pdf文件并保存到手机
( 2021/5/26 10:02:19 )小程序中利用addPhoneContact将联系人的信息添加到手机通讯录支持保存联系人头像
( 2021/5/11 19:12:56 )小程序打开pdf文件并保存到本地 支持远程pdf、word、xls表格文件打开
( 2021/5/11 18:58:19 )uni-app里面复制内容时保留换行利用正则替换br标签替换成回车换行符
共有0条关于《利用css3.0写出一个音乐播放的唱片碟盘的效果》的评论
发表评论
正在加载评论……
返回顶部发表评论
呢 称:
表 情:
内 容:
评论内容:不能超过 1000 字,需审核,请自觉遵守互联网相关政策法规。
验证码: 验证码 
深山工作室网友评论声明,请自觉遵守互联网相关政策法规。

您发布的评论即表示同意遵守以下条款:
一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家、社会、集体和公民的合法权益;
二、不得发布国家法律、法规明令禁止的内容;互相尊重,对自己在本站的言论和行为负责;
三、本站对您所发布内容拥有处置权。

更多信息>>栏目类别选择
uni-app
rss学习
个人空间
网站设计
网站公告
下载
photoshop学习
ASP学习
DIV+CSS学习
SEO搜索引擎忧化
java学习
HTML学习
网站信息
网站类信息
更多>>同类信息
jquery设置或获取修改classname
利用css中的scale()实现放大缩小效果
利用background-color:#000000a8在背景颜色16进制代码之后加字母加上数字让背景色透明
css背景使用base64编码或者将base64编码放在img图片标签中
利用css3中的-webkit-font-smoothing把网页文字的毛边去掉
解决手机端微信浏览器中视频自动播放和默认全屏问题
利用CSS实现半透明效果兼容IE与火狐与chrome等浏览器
在table中tr的display:block在firefox下显示布局错乱问题
更多>>最新添加文章
uni-app开发表单input组件的一些规则说明自己预留使用
查询某个字符在字符串中出现的位置数组
百度小程序开发第一坑tcomponent自定义组件命名坑Compile san component failed. . [SAN ERROR] ROOT>swan-custom-component>view>千万不要用下划线作为自定义组件名
开始百度小程序开发需要准备工作
uni-app:使用uni.downloadFile下载word或pdf文件并保存到手机
小程序中利用addPhoneContact将联系人的信息添加到手机通讯录支持保存联系人头像
小程序打开pdf文件并保存到本地 支持远程pdf、word、xls表格文件打开
uni-app里面复制内容时保留换行利用正则替换br标签替换成回车换行符
更多>>随机抽取信息
uni-app实现上拉加载,下拉刷新(下拉带动画)
ASP与ACCESS数据库链接代码
通过XMLHTTP检查网站能否打开
定制开发微信小程序的操作流程
Div+CSS+JS树型菜单,可刷新
利用javascript鼠标经过表格,行与列变色
高度100%的绝对定位自适应布局技巧
对MD5加密方式使用者的建议