css3仿QQ网页播放器及分享功能实现

最新推荐文章于 2019-04-19 16:03:28 发布

想旅游咯

最新推荐文章于 2019-04-19 16:03:28 发布

阅读量523

点赞数

分类专栏： web前端

web前端专栏收录该内容

109 篇文章 2 订阅

订阅专栏

css3仿QQ网页播放器及分享功能实现

<!doctype html>
<html lang="en">
<head>

<meta charset="UTF-8">

<title>标题</title>
<meta name="Keywords" content="关键字">
<meta name="Description" content="描述">

<style type="text/css">
/*css样式里面注释符 px像素*/
*{margin:0px;/*外边距*/ padding:0px;/*内边距*/}/* * 通配符代表所有的标签 */
body{background:url("img/public-bg9.jpg");/*背景图 url 图片地址*/}
span{display:block; float:left;}/*span是行内元素要设置宽度和高度就必须给变属性*/
.music{width:680px;/*宽度 */ height:420px;/*高度 */ /*background:#66ffff;背景颜色 */ margin:120px auto; /*auto 自适应盒子水平居中*/}
    .cont{height:320px;/*高度 */ }
.cont .contleft{background:#cccccc;width:248px; height:300px; float:left; /*浮动*/}
.cont .contleft img{margin:8px 4px;}
.cont .contright{ width:400px;height:300px; float:right; /*浮动*/}
.cont .contright h1{color:#FFFFFF;/*文字颜色*/ line-height:40px; /*文字行间距*/}
.cont .contright h2{color:#FFFFFF; line-height:40px;}
.cont .contright p{color:#B2B2B2; line-height:24px; font-size:14px;/*设置文字字体大小*/}
.bottom .circle{width:60px;height:60px; border:2px solid #FFFFFF;/*边框*/ margin:10px; float:left; border-radius:30px;/*css3 圆*/}
/*制作小三角*/
.triangleLeft{width:0px; height:0px;border-Right: 30px solid #FFF;border-top: 25px solid transparent; border-bottom: 25px solid transparent; transform:scale(0.6,0.7);/*缩放*/}
.pre1{margin:5px -5px 0px 4px;/*上右下左*/}
.pre2{margin:5px 0px 0px -8px;/*上右下左*/}
.triangleRight{width:0px; height:0px;border-Left: 30px solid #FFF;border-top: 25px solid transparent; border-bottom: 25px solid transparent; transform:scale(0.6,0.7);/*缩放*/}
.next1{margin:5px 0px 0px 8px;/*上右下左*/}
.next2{margin:5px -5px 0px -12px;/*上右下左*/}
.pause{width:10px; height:35px; background:#ffffff;}
.pause1{margin:15px 5px 0px 15px;}
.pause2{margin:15px 10px 0px 5px;}
.circle:hover{box-shadow:0px 0px 15px rgba(255,255,255,0.6)/*css3阴影*/}/*鼠标经过效果*/
.share{ float:left;margin:25px 15px; }
</style>
</head>

<body>

<div class="music">
  <div class="cont">
    <div class="contleft">
    
    <img src="img/115663190.jpg"/>
    </div>
    <div class="contright">
    <h1>Grenade</h1>
    <p>《Doo-Wops & Hooligans》</p>
    <h2>Bruno Mars</h2>
    <p>Bruno Mars </p>
    <p>Easy come Easy go</p>
    <p>That's just how you live oh</p>
    <p>Take take take it all</p>
    <p>But you never give,</p>
    <p>Should of known you were trouble</p>
    <p>From the first kiss had your eyes wide open,</p>
    <p>Why were they open? </p>
    </div>
  </div>
  <div class="bottom">
   <div class="circle">
    <span class="triangleLeft pre1"></span>
    <span class="triangleLeft pre2"></span>
   </div>
   <div class="circle">
    <span class="pause pause1"></span>
    <span class="pause pause2"></span>
   </div>
   <div class="circle">
    <span class="triangleRight next1"></span>
    <span class="triangleRight next2"></span>
   </div>
   <div class="share">
   <div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a title="分享到QQ空间" href="#" class="bds_qzone" data-cmd="qzone"></a><a title="分享到新浪微博" href="#" class="bds_tsina" data-cmd="tsina"></a><a title="分享到腾讯微博" href="#" class="bds_tqq" data-cmd="tqq"></a><a title="分享到微信" href="#" class="bds_weixin" data-cmd="weixin"></a><a title="分享到百度相册" href="#" class="bds_bdxc" data-cmd="bdxc"></a><a title="分享到腾讯朋友" href="#" class="bds_tqf" data-cmd="tqf"></a></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"32"},"share":{},"image":{"viewList":["qzone","tsina","tqq","weixin","bdxc","tqf"],"viewText":"123","viewSize":"32"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["qzone","tsina","tqq","weixin","bdxc","tqf"]}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
   </div>
  <div>
</div>

</body>
</html>