51rgb-css3动画21-游戏风格手风琴特效制作

分享 :

网盘下载链接:

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

    官方发布

    更新日期

    2018-01-26

    适用平台

    All

    系统位数

    ALL

    文件格式

    zip

    文件语言

    中文

    文件授权

    免费

    下载次数

    59次

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

    <!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.51rgb.cn/video/page-29/282.html

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

  • 相关下载
在线客服
热线电话

微信公众账号