<form id="htvdb"></form>

            <form id="htvdb"><nobr id="htvdb"></nobr></form>

              <address id="htvdb"></address>

              <form id="htvdb"><form id="htvdb"><nobr id="htvdb"></nobr></form></form>
              <form id="htvdb"></form>


                    51rgb-css3动画15-手风琴切换特效

                    分享 :

                    网盘下载链接:

                    提取密码: u4qi
                    复制提取密码
                    51RGB在线教育,WEB前端开发直播体验课,用CSS3风琴切换特效!源码下载
                    • 详情
                      文件来源

                      官方发布

                      更新日期

                      2018-01-26

                      适用平台

                      All

                      系统位数

                      ALL

                      文件格式

                      zip

                      文件语言

                      中文

                      文件授权

                      免费

                      下载次数

                      185次

                      源码,可以直接复制使用!

                      <!DOCTYPE HTML>
                      <html>
                      
                      <head>
                      	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
                      	<title></title>
                      </head>
                      <style type="text/css">
                      	.ts {
                      		overflow: hidden;
                      		width: 1200px;
                      		margin: 0 auto;
                      	}
                      
                      	.ts-ul {
                      		overflow: hidden;
                      		width: 100%;
                      		height: 500px;
                      		margin: 0 auto;
                      	}
                      
                      	.ts-ul li {
                      		list-style-type: none;
                      		overflow: hidden;
                      		float: left;
                      		width: 95px;
                      		-webkit-transition: width 0.5s;
                      		-webkit-transform: translateZ(0);
                      	}
                      
                      	.ts-ul b {
                      		-webkit-transition: all 0.5s;
                      		width: 95px;
                      		display: block;
                      		height: 440px;
                      		text-indent: -9999em;
                      		background: url(http://gyc.woniu.com/tg/ad6/images/ts.jpg);
                      	}
                      
                      	.ts-ul-li1 {
                      		background: url(http://gyc.woniu.com/tg/ad6/images/ts1_on.jpg) no-repeat;
                      	}
                      
                      	.ts-ul-li2 {
                      		background: url(http://gyc.woniu.com/tg/ad6/images/ts2_on.jpg) no-repeat;
                      	}
                      
                      	.ts-ul-li3 {
                      		background: url(http://gyc.woniu.com/tg/ad6/images/ts3_on.jpg) no-repeat;
                      	}
                      
                      	.ts-ul-li4 {
                      		background: url(http://gyc.woniu.com/tg/ad6/images/ts4_on.jpg) no-repeat;
                      	}
                      
                      	.ts-ul li.on {
                      		width: 787px;
                      	}
                      
                      	.ts-ul li.on b {
                      		opacity: 0.0;
                      		filter: Alpha(opacity=0);
                      		-webkit-transform: translate3d(-100%, 0, 0);
                      	}
                      
                      	.ts-ul-li1 b {
                      		background-position: 0 0
                      	}
                      
                      	.ts-ul-li2 b {
                      		background-position: -95px 0
                      	}
                      
                      	.ts-ul-li3 b {
                      		background-position: -190px 0
                      	}
                      
                      	.ts-ul-li4 b {
                      		background-position: -285px 0
                      	}
                      </style>
                      
                      <body>
                      	<div class="ts">
                      		<ul class="ts-ul">
                      			<li class="ts-ul-li1"><b></b></li>
                      			<li class="ts-ul-li2"><b></b></li>
                      			<li class="ts-ul-li3"><b></b></li>
                      			<li class="ts-ul-li4"><b></b></li>
                      		</ul>
                      	</div>
                      
                      	<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
                      	<script type="text/javascript">
                      		$(function() {
                      			$(".ts-ul li").mouseover(function() {
                      				$(".ts-ul li.on").removeClass("on");
                      				$(this).addClass("on");
                      			}).eq(0).mouseover();
                      		});
                      	</script>
                      </body>
                      
                      </html>
                      
                      
                    • 使用说明

                      本节课视频资源:

                      课程在线回放地址:http://www.gonooa.com/video/page-29/282.html

                      关注微信公众号:网页设计自学平台 回复:【css3动画】关键字即可获取全套css3动画教程及源码

                    • 相关下载
                    北京赛车玩法和赔率|官网_首页