CSS3实现静态和动态效果
2024-05-15 03:29:05
电台案例
好久不更新了，因为最近在学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; }/* ******************轮播*************************** */
CSS3实现静态和动态效果相关推荐
- 做个高颜值的优秀按钮，用 CSS3 实现社交按钮动画
在过去,产品只要把功能做到位就足够了,而现在,产品不仅要有好的颜值,还要有良好的交互和动效. 一个优秀的动效不仅可以吸引用户的眼球,还可以让产品更具交互性,吸引更多用户的使用.比如,按钮(button ...
- html响应式弹性布局,CSS3响应式布局之弹性盒子
CSS3弹性盒模型可以轻松的创建自适应浏览器流动窗口的布局或自适应字体大小的布局.同时该盒子决定了一个盒子在其他盒子的分布方式,及如何处理可用的空间. 自己写了一个弹性盒子的demo: 主要HTML代 ...
- css3、less实现星空动画案例
效果如图: 技术点预览: CSS3背景径向渐变 less实现循环 近大远小原理制造空间感 CSS3关键帧动画 HTML文档结构 <!DOCTYPE html> <html lang= ...
- 全flash站制作剖析
经过一段时间的Flash学习之后,很多朋友开始对那些全Flash网站的制作发生兴趣.全Flash网站基本以图形和动画为主,所以比较适合做那些文字内容不太多,以平面.动画效果为主的应用.如:企业品牌推广 ...
- 一起来学SpringBoot | 第四篇：整合Thymeleaf模板
SpringBoot 是为了简化 Spring 应用的创建.运行.调试.部署等一系列问题而诞生的产物,自动装配的特性让我们可以更好的关注业务本身而不是外部的XML配置,我们只需遵循规范,引入相关的依赖 ...
- 第四篇：整合Thymeleaf模板
第四篇:整合Thymeleaf模板 本文链接:http://blog.battcn.com/2018/04/28/springboot/v2-web-thymeleaf/ 在前面几章中已经介绍了如何创 ...
- Dual Graph Attention Networks for Deep Latent Representation of Multifaceted Social...》论文学习笔记
Dual Graph Attention Networks for Deep Latent Representation of Multifaceted Social Effects in Recom ...
- 前端学习路线（简洁清晰，直击学习途径）
目录 第一阶段:前端入门 1.Html5 2.Css3 第二阶段:JavaScript ①JavaScript 基础语法 ②JavaScript 高级(WebAPI/Dom Bom) ③JavaSc ...
- 记一次 Intellij IDEA 的外观改造过程 - 好看的代码样式 + 炫酷的键入效果
文章目录 说个由头 效果展示 静态效果 动态效果 配置过程 主题配置 代码样式 火花效果 其他插件 最后总结 说个由头 作为一名程序员,IDEA是我主要的办公工具,除了一些脚本程序外,其作为一个强大的 ...
最新文章
- jquery压缩图片插件
- 树上边分治-求任意两点路径的总和
- 皮一皮：原来网恋就是这个感觉...
- 移动端界面中的版式设计原理
- mysql分区失败_MYSQL表分区操作错误1503解决方案
- oraclek导出表_oracle如何导出和导入数据库/表
- Python 萌新 - 花10分钟学爬虫
- Python 读取数据
- code principles
- JAVA黑马刘意学习笔记
- 2021年危险化学品经营单位安全管理人员考试及危险化学品经营单位安全管理人员考试资料
- 对向量求导的常用公式
- LC1143---最长公共子序列
- 2021-07-16 转载 - UmiJS应用框架
- win10桌面管理文件收纳_win10系统关闭桌面文件收纳盒的方法
- 个人住房抵押贷款流程让你的贷款更轻松
- 简单易懂应如何快速掌握超长激光测距仪相关性能指标TFNLR20KI激光测距仪带你走进其简单的世界
- Wparam与Lparam的区别(转)
- 基于Lattice XO2-4000HC FPGA核心板及电子森林综合训练底板的ADC数字电压表及OLED显示设计(Verilog)
- JAVA毕业设计web家教管理系统计算机源码+lw文档+系统+调试部署+数据库
热门文章
- java indexof 通配符,字符串与含有通配符‘*’的字符串匹配(非正则表达式)
- # 畸变矫正_别让这个细节毁了你的照片，学会正确进行畸变调整
- react 父子传值_React父子组件间的传值
- python停止运行_python停止不了
- minio 并发数_开源数据存储项目Minio:提供非结构化数据储存服务
- Linux 删除权限 umask,linux中的umask控制文件或目录的默认权限
- 怎么锁定计算机不让其他人安装,win10如何锁定电脑不让别人打开
- android 读取xlsx文件,android怎么解析表格.xlsx文件
- Linux系统格式化发fat32U盘密令,用diskpart命令格式化u盘为fat32的方法
- 携带token的ajax请求方法封装