电台案例
好久不更新了，因为最近在学css3新特性（学的很烂），悲催啊。
示例效果图
我们看到这个大案例了先不要慌，首先先规划出一个大体结构，怎么分块就看自己平时的积累了。
首先我是这样子分的：
一、页面顶部
- 导航栏
- 固定定位在顶部
二、页面中部内容部分
- 页面中部又可以分为六大块
- 轮播图
- 导航栏
- 推荐TING
- TOP TING
- 热门电台
- 最新发声
三、页面底部
- 固定定位在底部
先这样分好，开始代码编写一次不要分的太细了，要不然也记不住，太乱了。
1.先把页面顶部和底部写好（因为这两部分最简单）。
- HTML部分代码
- 首部这里我用了header作为最外层容器。
<!-- 作为首页的顶部 -->
<header class="head">
<!-- 实现水平方向的居中效果 -->
<div class="container">
<!-- 完成网站的logo效果 -->
<div class="logo-container">
<a href="#">
<img src="imgs/head-logo.png">
</a>
</div>
<!-- 完成网站的导航菜单效果 -->
<div class="nav-container">
<!-- 完成导航菜单 -->
<ul>
<li class="active"><a href="#">首页</a></li>
<li><a href="#">阅读</a></li>
<li><a href="#">电台</a></li>
<li><a href="#">碎片</a></li>
<li><a href="#">客户端</a></li>
</ul>
</div>
<!-- 完成网站的登录与注册功能 -->
<div class="login-container">
<!-- 完成显示图标 -->
<div class="edit"><!-- 完成外层圆的效果 -->
<div><!-- 完成内层圆的效果 -->
<img src="imgs/edit-icon.png" >
</div>
</div>
<!-- 完成登录与注册按钮 -->
<div class="login">
<a href="#">登录 / 注册</a>
</div>
</div>
</div>
</header>
- CSS部分代码
body {
margin: 0;
padding: 0;
overflow: auto;
}
a {
text-decoration: none;
color: #333333;
}
/* 页面的顶部 */
.head {
/*
设置为固定定位时 - width默认为100%失效
* width: 100%
* left: 0, right: 0;
*/
position: fixed;
top: -90px;
width: 100%;
background-color: rgba(255,255,255,0.95);
box-shadow: 0 1px 4px 0 #ececec;
margin-bottom: 90px;
z-index: 99;
}
/* 实现水平居中 */
.container {
width: 1200px;
/*
margin实现水平居中的问题:
1.当前元素的宽度不能是父级元素的100%
2.当前元素不能脱离文档流
*/
margin: 0 auto;
/* 解决高度塌陷 */
overflow: hidden;
position: relative;
padding-top: 100px;
}
.container-foot {
width: 1200px;
/*
margin实现水平居中的问题:
1.当前元素的宽度不能是父级元素的100%
2.当前元素不能脱离文档流
*/
margin: 0 auto;
/* 解决高度塌陷 */
overflow: hidden;
position: relative;
padding-top: 300px;
top: -300px;
}
.content {
margin-top: 120px;
}
/* logo */
.head .logo-container {
float: left;
margin-right: 92px;
}
.head .logo-container a {
display: block;
height: 90px;
}
.head .logo-container img {
display: block;
position: relative;
top: 50%;
transform: translateY(-50%);
}
/* 导航菜单 */
.head .nav-container {
float: left;
}
.head .nav-container ul {
list-style: none;/* 去掉项目符号 */
padding: 0;/* 去掉项目符号所占空间 */
margin: 0;/* 无序列表默认具有外边距 */
overflow: hidden;/* 解决高度塌陷 */
}
.head .nav-container ul li {
float: left;
}
.head .nav-container ul li:hover {
background-color: #fbfbfb;
}
.head .nav-container ul li a {
text-decoration: none;/* 去掉链接中的下划线 */
color: #333;
font-size: 16px;
font-weight: bolder;
line-height: 90px;
display: block;
height: 90px;
padding: 0 26px;
}
.active {
background-color: #fbfbfb;
box-shadow: inset 0 -3px 0 0 #333;
}
/* 登录与注册 */
.head .login-container {
float: right;
height: 90px;
}
.head .login-container .edit {
float: left;
width: 44px;
height: 44px;
margin-right: 25px;
border-radius: 22px;
border: 1px solid #57ad68;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.head .login-container .edit div {
width: 38px;
height: 38px;
border-radius: 19px;
background-color: #57ad68;
margin-left: 3px;
margin-top: 3px;
transition: .2s;
}
.head .login-container .edit:hover div {
box-shadow: inset 0 0 5px .5px #fff;
}
.head .login-container .edit img {
width: 20px;
margin-left: 9px;
margin-top: 9px;
}
.head .login-container .login {
float: left;
width: 126px;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.head .login-container .login a {
box-sizing: border-box;
color: #57ad68;
font-size: 14px;
line-height: 44px;
text-align: center;
display: block;
width: 126px;
height: 44px;
border: 1px solid #57ad68;
border-radius: 23px;
transition: .2s;
}
.head .login-container .login:hover a {
background-color: #57AD68;
color: #fff;
}
2.OK！完成页面顶部了，接下来是页面底部了。
- HTML部分代码
- 底部这里我用了footer作为最外层容器。
<!-- 作为首页的底部 -->
<footer class="foot">
<div class="container-foot container">
<div class="desc">
<img src="imgs/foot-logo.png">
<div class="link">
<p>
<a href="#">关于我们</a>
<a href="#">友情链接</a>
<a href="#">片刻帮助</a>
<a href="#">意见反馈</a>
<a href="#">成长记忆</a>
</p>
<p>All right reserved @ 2020 piank.me /。。。</p>
</div>
</div>
<div class="icon">
<div class="app"></div>
<div class="sina"></div>
<div class="wechat"></div>
<div class="safe"></div>
</div>
</div>
</footer>
- CSS部分代码
- 底部这里用了两个伪元素：before、after，用了做微信二维码的显示与隐藏。
.foot {
height: 118px;
background-color: #1a1818;
}
.foot .desc {
float: left;
width: 600px;
height: 118px;
}
.foot .desc img {
display: block;
width: 100px;
position: relative;
top: 50%;
transform: translateY(-50%);
float: left;
}
.foot .desc .link {
float: left;
position: relative;
top: 50%;
transform: translateY(-50%);
margin-left: 15px;
}
.foot .desc .link p {
font-size: 12px;
color: #666;
}
.foot .desc .link p a {
color: #666;
display: block;
float: left;
padding: 0 8px;
}
.foot .desc .link p a:first-child {
padding-left: 0;
}
.foot .desc .link p a:last-child {
padding-right: 0;
}
.foot .desc .link p:first-child {
margin: 0 0 10px;
}
.foot .desc .link p:not(:first-child) {
margin: 0;
}
.foot .icon {
float: right;
width: 400px;
height: 118px;
position: relative;
}
.foot .icon div {
width: 44px;
height: 44px;
float: left;
margin-right: 20px;
position: relative;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
background-size: 44px;
}
.foot .icon .app {
background-image: url(../imgs/foot-app.png);
}
.foot .icon .sina {
background-image: url(../imgs/foot-sina.png);
}
.foot .icon .wechat {
background-image: url(../imgs/foot-wechat.png);
}
.foot .icon .safe {
width: 86px;
background-image: url(../imgs/foot-safe.png);
background-size: 86px 44px;
float: right;
}
.foot .icon .app:hover {
background-image: url(../imgs/foot-appH.png);
}
.foot .icon .sina:hover {
background-image: url(../imgs/foot-sinaH.png);
}
.foot .icon .wechat:hover {
background-image: url(../imgs/foot-wechatH.png);
}
.foot .icon .wechat::before {
content: "";
position: absolute;
width: 200px;
height: 200px;
top: -233px;
left: -83px;
display: none;
}
.foot .icon .wechat:hover::before {
background-image: url(../imgs/pianke-code.png);
border: 10px solid #fff;
box-shadow: 0 0 5px .2px black;
display: block;
}
.foot .icon .wechat::after {
content: "";
position: absolute;
width: 0;
height: 0;
border-width: 15px;
border-style: solid;
border-color: white transparent transparent transparent;
top: -13px;
left: 8px;
display: none;
}
.foot .icon .wechat:hover::after {
display: block;
}
.foot .icon .safe:hover {
background-image: url(../imgs/foot-safe.png);
}
3.接下来就是要完成页面中间最重要（最难）的部分了。
-
根据前面想好的结构开始代码编写
-
先来个轮播图。。。
- 唉唉哎，没写出来！！！
- 没事，先跳过这里吧（虽然不甘心）
- 既然没写出来，那就先写下面的，把这里的结构部分先留出来
- 导航栏部分HTML代码
<div class="radio-type-group"> <div class="radio-type-cpt"> <a href="#"> <img src="imgs/radio-type-love.png" width="25px">爱情</a> </div> <div class="radio-type-cpt"> <a href="#"> <img src="imgs/radio-type-trip.png" width="18px">旅行</a> </div> <div class="radio-type-cpt"> <a href="#"> <img src="imgs/radio-type-story.png" width="27px">故事</a> </div> <div class="radio-type-cpt"> <a href="#"> <img src="imgs/radio-type-music.png" width="24px">音乐</a> </div> <div class="radio-type-cpt"> <a href="#"> <img src="imgs/radio-type-movie.png" width="24px">电影</a> </div> <div class="radio-type-cpt"> <a href="#"> <img src="imgs/radio-type-poetry.png" width="25px">读诗</a> </div> </div>- CSS部分代码
/* 电台类型组 */ .radio-type-group { border: 1px dashed #333; border-left: none; border-right: none; height: 139px; } .radio-type-cpt { float: left; height: 54px; width: 150px; background-color: #fff; border: 1px solid #e8e8e8; line-height: 54px; text-align: center; font-size: 17px; margin: 0 4px; font-weight: lighter; margin-top: 40px; } .radio-type-cpt a { color: #666; } .radio-type-cpt img { vertical-align: sub; padding-right: 14px; }- 既然 推荐TING、TOP TING、最新发声都是一样的，所以我就写到一起了。
- HTML部分代码
<div class="ting-list-group"> <div class="title-cpt">推荐TING | Recommendation TING</div> <div class="ting-list"> <div class="ting-cpt"> <div class="ting-img"> <a href="#" target="_blank"> <img src="imgs/44a9f10c70efce7b773c17c054ef8e3c20180120.jpeg" class="lazy loaded"> <span></span> </a> </div> <div class="ting-info"> <div class="ting-title"> <a href="#" target="_blank">中国最好的民谣乐队：野孩子</a> </div> <div class="ting-author"> <a href="#" target="_blank">主播 / 汶霖FM</a> </div> <div class="ting-others">6.8 k次播放 | 评论:4 | 喜欢:52 </div> </div> </div> <div class="ting-cpt"> <div class="ting-img"> <a href="#" target="_blank"> <img src="imgs/wKgO0l51GbPTEKCcAADCrMcTAKg200.jpg" class="lazy loaded"> <span></span> </a> </div> <div class="ting-info"> <div class="ting-title"> <a href="#" target="_blank">你认识我的时候，我已是待嫁的年龄</a> </div> <div class="ting-author"> <a href="#" target="_blank">主播 / 阳芷的时光</a> </div> <div class="ting-others">12.5 k次播放 | 评论:34 | 喜欢:375 </div> </div> </div> <div class="ting-cpt"> <div class="ting-img"> <a href="$" target="_blank"> <img src="imgs/20171004191459_Gw2TY.jpeg" class="lazy loaded"> <span></span> </a> </div> <div class="ting-info"> <div class="ting-title"> <a href="#" target="_blank">房东的猫：人生最美好的是相遇，最难得的是重逢</a> </div> <div class="ting-author"> <a href="#" target="_blank">主播 / 七锦菇凉</a> </div> <div class="ting-others">9.7 k次播放 | 评论:37 | 喜欢:338 </div> </div> </div> </div> </div> <div class="ting-list-group"> <div class="title-cpt">TOP TING</div> <div class="ting-list"> <div class="ting-cpt"> <div class="ting-img"> <a href="#" target="_blank"> <img src="imgs/4ad920b94af594ed47b59ee25b2ee1f420170112.jpg" class="lazy loaded"> <span></span> </a> </div> <div class="ting-info"> <div class="ting-title"> <a href="#" target="_blank">巴士情缘</a> </div> <div class="ting-author"> <a href="#" target="_blank">主播 / 姜水水</a> </div> <div class="ting-others">1.7 k次播放 | 评论:1 | 喜欢:34 </div> </div> </div> <div class="ting-cpt"> <div class="ting-img"> <a href="#" target="_blank"> <img src="imgs/wKgJL1hEOUrA_AdkAADygE24kkE087.jpg" class="lazy loaded"> <span></span> </a> </div> <div class="ting-info"> <div class="ting-title"> <a href="#" target="_blank">他不忙，只是你不够重要</a> </div> <div class="ting-author"> <a href="#" target="_blank">主播 / DJ鹿鸣</a> </div> <div class="ting-others">1.2 k次播放 | 评论:7 | 喜欢:32 </div> </div> </div> <div class="ting-cpt"> <div class="ting-img"> <a href="#" target="_blank"> <img src="imgs/f79331a763d79c6fa18101428d8acf2020180706.jpeg" class="lazy loaded"> <span></span> </a> </div> <div class="ting-info"> <div class="ting-title"> <a href="#" target="_blank">你必须熬过一些不为人知的苦难</a> </div> <div class="ting-author"> <a href="#" target="_blank">主播 / 瑾岫</a> </div> <div class="ting-others">1.2 k次播放 | 评论:8 | 喜欢:28 </div> </div> </div> </div> </div> <div class="ting-list-group radio-ting-list"> <div class="title-cpt">最新发声 | New Voice</div> <div class="ting-list"> <div class="ting-cpt"> <div class="ting-img"> <a href="#" target="_blank"> <img src="imgs/timg.jpg" class="lazy loaded"> <span></span> </a> </div> <div class="ting-info"> <div class="ting-title"> <a href="#" target="_blank">我祝你前程似锦，我要你光彩依旧。</a> </div> <div class="ting-author"> <a href="#" target="_blank">主播 / 茧里</a> </div> <div class="ting-others">42次播放 | 评论:0 | 喜欢:0 </div> </div> </div> <div class="ting-cpt"> <div class="ting-img"> <a href="#" target="_blank"> <img src="imgs/wKgMdF1k2cDiAQaWAAF5yg6-FyQ633.jpg" class="lazy loaded"> <span></span> </a> </div> <div class="ting-info"> <div class="ting-title"> <a href="#" target="_blank">真正爱你的人，做不到死缠烂打</a> </div> <div class="ting-author"> <a href="#" target="_blank">主播 / 瑾岫</a> </div> <div class="ting-others">29次播放 | 评论:0 | 喜欢:0 </div> </div> </div> <div class="ting-cpt"> <div class="ting-img"> <a href="#" target="_blank"> <img src="imgs/29591550792167175_320x320.jpg" class="lazy loaded"> <span></span> </a> </div> <div class="ting-info"> <div class="ting-title"> <a href="#" target="_blank">你是此生的最美归途</a> </div> <div class="ting-author"> <a href="#" target="_blank">主播 / 薏仁小大姐</a> </div> <div class="ting-others">405次播放 | 评论:1 | 喜欢:7 </div> </div> </div> </div> </div>- CSS部分代码
/* 推荐 */ .title-cpt { clear: both; padding-bottom: 40px; background-repeat: no-repeat; padding-top: 70px; padding-left: 28px; background-position: 0 74px; background-image: url(../imgs/square.png); } .ting-list-group .ting-list { margin-left: -30px; } .ting-cpt { box-sizing: border-box; border: 1px solid #e8e8e8; float: left; margin-left: 30px; width: 300px; height: 420px; background-color: #fff; color: #333; font-size: 12px; font-weight: 200; } .ting-cpt .ting-img { position: relative; width: 100%; height: 300px; overflow: hidden; } .ting-cpt a { color: #333; } .ting-cpt a img { height: 300px; width: auto; transition: .5s; } .ting-cpt:hover img { transform: scale(1.2) rotate(5deg); filter: blur(2px); } .ting-cpt .ting-info { padding: 25px 20px 13px; } .ting-cpt .ting-info .ting-title { padding-bottom: 10px; font-size: 24px; height: 24px; width: 260px; line-height: 26px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ting-cpt .ting-info .ting-author { padding-bottom: 13px; } .ting-cpt .ting-info .ting-others { font-weight: lighter; } .radio-list-group .radio-list { width: 1020px; margin-left: -30px; } .radio-cpt { width: 340px; float: left; height: 498px; text-align: center; border-radius: 10px; } .radio-cpt .radio-img { padding-top: 27px; margin-left: 20px; margin-bottom: 45px; width: 300px; height: 300px; position: relative; } .radio-cpt .radio-img img { display: block; border-radius: 7px; transition: .5s; } .radio-cpt .radio-img img:nth-child(1) { transform: rotate(270deg); width: 80%; height: 80%; margin-left: 30px; margin-top: 70px; box-shadow: 0 15px 30px 0 rgba(0,0,0,0.2); } .radio-cpt .radio-img img:nth-child(2) { width: 90%; height: 90%; transform: rotate(90deg); margin-left: 15px; margin-top: -277px; box-shadow: 0 10px 24px 0 rgba(0,0,0,0.1); } .radio-cpt .radio-img img:nth-child(3) { width: 100%; height: 100%; transform: rotate(0); margin-top: -307px; box-shadow: 0 10px 25px 0 rgba(0,0,0,0.2); } .radio-cpt .radio-img:hover img:nth-child(1) { transform: rotate(360deg); } .radio-cpt .radio-img:hover img:nth-child(2) { margin-top: -282px; transform: rotate(-360deg); } .radio-cpt .radio-img:hover img:nth-child(3) { margin-top: -312px; } .radio-cpt .radio-img .radio-img-bg { position: absolute; top: 0; left: 0; background-color: rgba(0,0,0,0); width: 100%; height: 91.6%; margin-top: 23px; border-radius: 7px; } .radio-cpt .radio-img span:not(.radio-img-bg) { position: absolute; top: 0; left: 0; color: #fff; font-size: 16px; margin-top: 136px; width: 170px; height: 51px; margin-left: 65px; font-weight: 100; opacity: 0; text-align: center; } .radio-cpt .radio-info { color: #333; font-weight: 200; font-size: 12px; } .radio-cpt .radio-info .radio-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 10px; font-size: 30px; } .radio-cpt .radio-info a { color: #333; } .radio-cpt .radio-info .radio-author { padding-top: 7px; padding-bottom: 5px; } .radio-cpt .radio-info .radio-others { font-weight: lighter; } .ting-list-group .ting-list { margin-left: -30px; } .radio-ting-list .ting-cpt { margin-bottom: 128px; }- 热门电台
<div class="radio-list-group"> <div class="title-cpt">热门电台 | Hot Radio</div> <div class="radio-list"> <div class="radio-cpt"> <div class="radio-img"> <img src="imgs/d02e858975daa236c3cb82231561fe69.jpg"> <img src="imgs/d02e858975daa236c3cb82231561fe69.jpg"> <img src="imgs/d02e858975daa236c3cb82231561fe69.jpg"> <a href="/pages/radio/radioInfo.html?id=581ef487723125e14e8b45bf" target="_blank"> <span class="radio-img-bg"></span> <span>- <br>给你片刻最新发声 ......『片刻每日新声推荐』</span> </a> </div> <div class="radio-info"> <div class="radio-title"> <a href="#" target="_blank">最新发声</a> </div> <div class="radio-author"> <a href="#" target="_blank">主播 / pianketing</a> </div> <div class="radio-others">12.3 m次播放</div> </div> </div> <div class="radio-cpt"> <div class="radio-img"> <img src="imgs/89f647e50adf785a565baeccd186edc8.jpg"> <img src="imgs/89f647e50adf785a565baeccd186edc8.jpg"> <img src="imgs/89f647e50adf785a565baeccd186edc8.jpg"> <a href="#" target="_blank"> <span class="radio-img-bg"></span> <span>- <br>给你夜晚片刻安宁 ......『片刻每日晚安推荐』</span> </a> </div> <div class="radio-info"> <div class="radio-title"> <a href="#" target="_blank">七夜电台</a> </div> <div class="radio-author"> <a href="#" target="_blank">主播 / pianketing</a> </div> <div class="radio-others">45.9 m次播放</div> </div> </div> <div class="radio-cpt"> <div class="radio-img"> <img src="imgs/c42354a58d4270fb334134676180f24c.JPG"> <img src="imgs/c42354a58d4270fb334134676180f24c.JPG"> <img src="imgs/c42354a58d4270fb334134676180f24c.JPG"> <a href="#" target="_blank"> <span class="radio-img-bg"></span> <span>- <br>最好听的翻唱都在这里了 (ง •̀_•́)ง </span> </a> </div> <div class="radio-info"> <div class="radio-title"> <a href="#" target="_blank">片刻翻唱</a> </div> <div class="radio-author"> <a href="#" target="_blank">主播 / pianketing</a> </div> <div class="radio-others">15.3 m次播放</div> </div> </div> </div> </div>- 最后就是轮播图了
- HTML部分代码
<div class="radio-type"> <div class="type-title-cpt"> <span class="active-cpt">精选</span> <span class="">全部电台</span> </div> </div> <div class="choice-radio"> <div class="slide-cpt radio-slide-cpt"> <!-- <div class="banner-btn left-btn"></div> --> <input type="radio" name="slides" id="slide1" checked> <input type="radio" name="slides" id="slide2"> <input type="radio" name="slides" id="slide3"> <div class="slide-controls"> <label for="slide1"></label> <label for="slide2"></label> <label for="slide3"></label> </div> <div class="banner-img-box"> <ul class="img-group"> <!-- 中间的图片 --> <li class="active picture-mid" style="width: 640px; height: 375px; top: 0px; left: 160px;"> <a href="#" target="_blank"> <img src="imgs/7164a70cf60d3e085c814d6ffbf2b18720170417.jpg"> </a> </li> <li class="active picture-mid" style="width: 640px; height: 375px; top: 0px; left: 160px;"> <a href="#" target="_blank"> <img src="imgs/70141776893d405dead9bfc09552059420170426.jpg"> </a> </li> <li class="active picture-mid" style="width: 640px; height: 375px; top: 0px; left: 160px;"> <a href="#" target="_blank"> <img src="imgs/19cfeb13c5f71e01d57ef78ab29cc59820170511.jpg"> </a> </li> <!-- 左边的图片 --> <li class="picture-left" style="width: 150px; height: 289px; top: 33px; left: 0px;"> <a href="#" target="_blank"> <img src="imgs/19cfeb13c5f71e01d57ef78ab29cc59820170511.jpg"> </a> </li> <li class="picture-left" style="width: 150px; height: 289px; top: 33px; left: 0px;"> <a href="#" target="_blank"> <img src="imgs/7164a70cf60d3e085c814d6ffbf2b18720170417.jpg"> </a> </li> <li class="picture-left" style="width: 150px; height: 289px; top: 33px; left: 0px;"> <a href="#" target="_blank"> <img src="imgs/70141776893d405dead9bfc09552059420170426.jpg"> </a> </li> <!-- 右边的图片 --> <li class="picture-right" style="width: 150px; height: 289px; top: 33px; left: 810px;"> <a href="#" target="_blank"> <img src="imgs/19cfeb13c5f71e01d57ef78ab29cc59820170511.jpg"> </a> </li> <li class="picture-right" style="width: 150px; height: 289px; top: 33px; left: 810px;"> <a href="#" target="_blank"> <img src="imgs/70141776893d405dead9bfc09552059420170426.jpg"> </a> </li> <li class="picture-right" style="width: 150px; height: 289px; top: 33px; left: 810px;"> <a href="#" target="_blank"> <img src="imgs/7164a70cf60d3e085c814d6ffbf2b18720170417.jpg"> </a> </li> </ul> <div class="banner-line" style="width: 108px;"> <div style="left: 0px;"></div> </div> </div> <!-- <div class="banner-btn right-btn"></div> --> </div> <div class="index-content"> <div class="radio-type-group"> <div class="radio-type-cpt"> <a href="#"> <img src="imgs/radio-type-love.png" width="25px">爱情</a> </div> <div class="radio-type-cpt"> <a href="#"> <img src="imgs/radio-type-trip.png" width="18px">旅行</a> </div> <div class="radio-type-cpt"> <a href="#"> <img src="imgs/radio-type-story.png" width="27px">故事</a> </div> <div class="radio-type-cpt"> <a href="#"> <img src="imgs/radio-type-music.png" width="24px">音乐</a> </div> <div class="radio-type-cpt"> <a href="#"> <img src="imgs/radio-type-movie.png" width="24px">电影</a> </div> <div class="radio-type-cpt"> <a href="#"> <img src="imgs/radio-type-poetry.png" width="25px">读诗</a> </div> </div>- CSS部分代码
/* 录播图 */ .slide-cpt { margin: 0 auto; width: 1130px; height: 400px; margin-top: 50px; } /* 左右切换按钮 */ .banner-btn { width: 24px; height: 100%; cursor: pointer; background-repeat: no-repeat; background-size: 24px; background-position: center; } /* 向左切换按钮 */ .left-btn { float: left; background-image: url('../imgs/left-btn.png'); } /* 向右切换按钮 */ .right-btn { float: right; background-image: url('../imgs/right-btn.png'); } /* 轮播图的图片容器 */ .banner-img-box { width: 960px; height: 100%; float: left; margin-left: 59px; overflow: hidden; position: relative; } .banner-img-box .img-group { width: 960px; position: relative; list-style: none; padding: 0; } .banner-img-box .img-group li { cursor: pointer; /* z-index: 0; */ position: absolute; top: 0; left: 0; overflow: hidden; } .banner-img-box .img-group .active { /* border-right: 10px solid #fafafa; border-left: 10px solid #fafafa; */ border-radius: 20px; } .banner-img-box .img-group li a { pointer-events: none; } .banner-img-box .img-group .active a { pointer-events: all; } .banner-img-box .img-group li img { width: 100%; height: 100%; } /* 轮播图的分页器 */ /* 导航轮播 */ .banner-line > label { position: absolute; margin-bottom: 10px; display: inline-block; width: 36px; height: 1px; background-color: #333; top: 50%; transform: translateY(-50%); cursor: pointer; } .banner-line > label:nth-child(2) { background-color: #00FF00; left: 35px; } .banner-line > label:nth-child(3) { background-color: ##e8e8e8; left: 60px; } .choice-radio input{ display: none; } .choice-radio .banner-img-box .img-group li img { /* 隐藏图片 */ display: block; position: relative; opacity: 0; z-index: 0; } /* 设置label */ .choice-radio .slide-controls label { width: 24px; height: 45px; position: absolute; top: 365px; /* left: 0; */ right: 0; /* background-image: url(../imgs/left-btn.png); */ background-repeat: no-repeat; cursor: pointer; background-size: 24px; z-index: 99; } /* 找到slider对应的图片 */ @keyframes animate-1{ 0% { transform: rotate3d(0, 1, 0, 30deg) skew(-9deg, -20deg); transform-origin: right; } 50% { transform: rotate3d(0, 1, 0, 50deg) skew(-15deg, -20deg); transform-origin: right; } 100% { transform: rotate3d(0, 1, 0, 30deg) skew(-9deg, -20deg); transform-origin: right; } } @keyframes animate-2{ 0% { transform: rotate3d(0, 1, 0, 30deg) skew(9deg, 20deg); transform-origin: left; } 50% { transform: rotate3d(0, 1, 0, 50deg) skew(15deg, 20deg); transform-origin: left; } 100% { transform: rotate3d(0, 1, 0, 30deg) skew(9deg, 20deg); transform-origin: left; } } .picture-mid { } .banner-img-box .img-group .picture-left img, .banner-img-box .img-group .picture-right img { width: 493px; height: 289px; } .banner-img-box .img-group .picture-left { border-radius: 520px 430px 90px 270px; } .banner-img-box .img-group .picture-right { border-radius: 310px 443px 333px 89px; } #slide1:checked~.banner-img-box .img-group li:nth-child(1) { z-index: 9; } #slide1:checked~.banner-img-box .img-group li:nth-child(1) img, #slide1:checked~.banner-img-box .img-group li:nth-child(6) img, #slide1:checked~.banner-img-box .img-group li:nth-child(7) img { opacity: 1; z-index: 1; } #slide3:checked~.banner-img-box .img-group li:nth-child(3) img, #slide3:checked~.banner-img-box .img-group li:nth-child(5) img, #slide3:checked~.banner-img-box .img-group li:nth-child(8) img { opacity: 1; z-index: 1; } #slide2:checked~.banner-img-box .img-group li:nth-child(2) img, #slide2:checked~.banner-img-box .img-group li:nth-child(4) img, #slide2:checked~.banner-img-box .img-group li:nth-child(9) img { opacity: 1; z-index: 1; } #slide1:checked~.slide-controls label:nth-child(3), #slide2:checked~.slide-controls label:nth-child(1), #slide3:checked~.slide-controls label:nth-child(2) { background-image: url(../imgs/left-btn.png); width: 24px; left: 0; } #slide1:checked~.slide-controls label:nth-child(2), #slide2:checked~.slide-controls label:nth-child(3), #slide3:checked~.slide-controls label:nth-child(1) { width: 24px; right: 20px; background-image: url(../imgs/right-btn.png); } /* ******* */ .choice-radio input:checked~.banner-img-box .img-group .picture-left { animation: animate-1 1s forwards infinite; } .choice-radio input:checked~.banner-img-box .img-group .picture-right { animation: animate-2 1s forwards infinite; } /* ******************轮播*************************** */
352
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
