经验分享程序开发文档资料数据资源其它资源

CSS3带动画效果的手风琴特效代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 CSS3带动画效果的手风琴特效代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

CSS3带动画效果的手风琴特效代码

HTML代码(index.html):

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3带动画效果的手风琴特效</title>
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel='stylesheet' href='css/ionicons.min.css'>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<div class='left'>
  <div class='left_inner'>
	<h1>Funky Pure CSS Accordion</h1>
	<h2>Go on, give it some clicks</h2>
	<a class='download' href='#/'>
	  <i class="icon ion-eye"></i> <span>这里是标题</span>
	</a>
	<a class='follow' href='#/jiaoben/'>
	  <i class="icon ion-social-codepen-outline"></i> <span>脚本代码</span>
	</a>
  </div>
</div>
<div class='right'>
  <div class='app'>
	<div class='app_inner'>
	  <input checked='' id='tab-1' name='buttons' type='radio'>
	  <label for='tab-1'>
		<div class='app_inner__tab'>
		  <h2>
			<i class='icon ion-android-alarm-clock'></i>
			8am - 10am
		  </h2>
		  <div class='tab_left'>
			<i class='big icon ion-android-color-palette'></i>
			<div class='tab_left__image'>
			  <i class='icon ion-android-color-palette'></i>
			</div>
		  </div>
		  <div class='tab_right'>
			<h3>Jamie talks design</h3>
			<h4>Monday - Thursday</h4>
			<p>I talk a bunch of rubbish</p>
			<button>More information</button>
		  </div>
		</div>
	  </label>
	  <input false='' id='tab-2' name='buttons' type='radio'>
	  <label for='tab-2'>
		<div class='app_inner__tab'>
		  <h2>
			<i class='icon ion-android-alarm-clock'></i>
			10am - 12am
		  </h2>
		  <div class='tab_left'>
			<i class='big icon ion-music-note'></i>
			<div class='tab_left__image'>
			  <i class='icon ion-music-note'></i>
			</div>
		  </div>
		  <div class='tab_right'>
			<h3>Arctic Monkeys Live</h3>
			<h4>Monday - Wednesday</h4>
			<p>Music for your lug holes</p>
			<button>More information</button>
		  </div>
		</div>
	  </label>
	  <input false='' id='tab-3' name='buttons' type='radio'>
	  <label for='tab-3'>
		<div class='app_inner__tab'>
		  <h2>
			<i class='icon ion-android-alarm-clock'></i>
			12am - 4pm
		  </h2>
		  <div class='tab_left'>
			<i class='big icon ion-android-microphone'></i>
			<div class='tab_left__image'>
			  <i class='icon ion-android-microphone'></i>
			</div>
		  </div>
		  <div class='tab_right'>
			<h3>Steven Fry podcast</h3>
			<h4>Staurday - Sunday</h4>
			<p>Steven Fry says words</p>
			<button>More information</button>
		  </div>
		</div>
	  </label>
	  <input false='' id='tab-4' name='buttons' type='radio'>
	  <label for='tab-4'>
		<div class='app_inner__tab'>
		  <h2>
			<i class='icon ion-android-alarm-clock'></i>
			4pm - 8pm
		  </h2>
		  <div class='tab_left'>
			<i class='big icon ion-android-bar'></i>
			<div class='tab_left__image'>
			  <i class='icon ion-android-bar'></i>
			</div>
		  </div>
		  <div class='tab_right'>
			<h3>Massive event</h3>
			<h4>Monday - Friday</h4>
			<p>Some kind of music festival</p>
			<button>More information</button>
		  </div>
		</div>
	  </label>
	</div>
  </div>
</div>

</body>
</html>

CSS代码(styles.css):

@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300);*{box-sizing:border-box;}
body{/*background:#292B31;*/
 overflow:hidden;font-family:'Roboto Condensed',sans-serif;}
body .left{float:left;width:50%;height:100vh;position:Relative;}
body .left_inner{width:340px;margin:0 auto;-webkit-transform:translateY(-50%);transform:translateY(-50%);height:414px;position:absolute;right:20px;top:35%;}
body .left_inner h1{color:white;font-size:28px;margin:120px 0px 0px 0px;}
body .left_inner h2{color:#767b8a;font-size:22px;font-weight:200;margin:0px 0px 0px 0px;}
body .right{float:right;position:relative;width:50%;height:100vh;}
.app{border-radius:10px;width:340px;margin:0 auto;height:414px;position:absolute;left:0;top:35%;box-shadow:4px 5px 0px rgba(0,0,0,0.11);-webkit-animation:intro 0.34s 0.4s cubic-bezier(1,1.4,0.41,1.01) forwards;animation:intro 0.34s 0.4s cubic-bezier(1,1.4,0.41,1.01) forwards;-webkit-transform:translateY(-50%) scale(0) rotateX(10deg) rotateY(10deg) rotateZ(10deg);transform:translateY(-50%) scale(0) rotateX(10deg) rotateY(10deg) rotateZ(10deg);margin:auto;overflow:hidden;font-family:'Roboto Condensed',sans-serif;}
.app_inner{position:relative;}
.app_inner input[type="radio"]{display:none;}
.app_inner input[type="radio"]:checked + label .app_inner__tab{height:175px;}
.app_inner input[type="radio"]:checked + label .app_inner__tab .tab_right{top:39px;-webkit-transition:all 0.3s 0.2s cubic-bezier(0.455,0.03,0.515,0.955);transition:all 0.3s 0.2s cubic-bezier(0.455,0.03,0.515,0.955);}
.app_inner input[type="radio"]:not(checked) + label .app_inner__tab{height:80px;border-left:12px solid rgba(0,0,0,0.12);}
.app_inner input[type="radio"]:not(checked) + label .app_inner__tab .tab_right{top:200px;-webkit-transition:all 0.3s 0.3s cubic-bezier(0.455,0.03,0.515,0.955);transition:all 0.3s 0.3s cubic-bezier(0.455,0.03,0.515,0.955);}
.app_inner input[type="radio"]:checked + label .app_inner__tab .tab_left .tab_left__image{-webkit-animation:move_in 0.55s 0.05s cubic-bezier(0.455,0.03,0.515,0.955) forwards;animation:move_in 0.55s 0.05s cubic-bezier(0.455,0.03,0.515,0.955) forwards;-webkit-transition:all 0.3s 0.36s cubic-bezier(0.455,0.03,0.515,0.955);transition:all 0.3s 0.36s cubic-bezier(0.455,0.03,0.515,0.955);}
.app_inner input[type="radio"]:not(checked) + label .app_inner__tab .tab_left .tab_left__image{-webkit-animation:move_out 0.75s 0s cubic-bezier(0.455,0.03,0.515,0.955) forwards;animation:move_out 0.75s 0s cubic-bezier(0.455,0.03,0.515,0.955) forwards;-webkit-transition:all 0.3s 0.3s cubic-bezier(0.455,0.03,0.515,0.955);transition:all 0.3s 0.3s cubic-bezier(0.455,0.03,0.515,0.955);}
.app_inner input[type="radio"]:checked + label .app_inner__tab .tab_left .big{left:260px;}
.app_inner input[type="radio"]:not(checked) + label .app_inner__tab .tab_left .big{left:400px;}
.app_inner input[type="radio"]:checked + label .app_inner__tab h2 i{opacity:0;}
.app_inner input[type="radio"]:not(checked) + label .app_inner__tab h2 i{opacity:.3;}
.app_inner label{display:block;width:100%;}
.app_inner label:nth-of-type(1) .app_inner__tab{background:#99b998;height:200px;}
.app_inner label:nth-of-type(1) .app_inner__tab:hover{-webkit-transition:all .2s;transition:all .2s;background:#8db18c;}
.app_inner label:nth-of-type(1) .app_inner__tab .tab_left__image{background:#EA495F;}
.app_inner label:nth-of-type(2) .app_inner__tab{background:#E4B794;}
.app_inner label:nth-of-type(2) .app_inner__tab:hover{-webkit-transition:all .2s;transition:all .2s;background:#e0ac84;}
.app_inner label:nth-of-type(2) .app_inner__tab .tab_left__image{background:#99B998;}
.app_inner label:nth-of-type(3) .app_inner__tab{background:#f4837d;}
.app_inner label:nth-of-type(3) .app_inner__tab:hover{-webkit-transition:all .2s;transition:all .2s;background:#f2716a;}
.app_inner label:nth-of-type(3) .app_inner__tab .tab_left__image{background:#E4B794;}
.app_inner label:nth-of-type(4) .app_inner__tab{background:#ea495f;}
.app_inner label:nth-of-type(4) .app_inner__tab:hover{-webkit-transition:all .2s;transition:all .2s;background:#e8374f;}
.app_inner label:nth-of-type(4) .app_inner__tab .tab_left__image{background:#F4837D;}
.app_inner__tab{width:100%;height:80px;background:red;cursor:pointer;overflow:hidden;position:relative;-webkit-transition:all 0.65s cubic-bezier(1,0,0.41,1.01);transition:all 0.65s cubic-bezier(1,0,0.41,1.01);}
.app_inner__tab h2{position:absolute;right:20px;top:16px;color:#1a1c1d;font-size:18px;}
.app_inner__tab h2 i{position:absolute;right:271px;opacity:0.3;-webkit-transition:all .3s;transition:all .3s;}
.app_inner__tab .tab_right{width:60%;float:right;position:relative;top:200px;text-align:right;padding:20px;}
.app_inner__tab .tab_right h3,.app_inner__tab .tab_right h4,.app_inner__tab .tab_right p{margin:0;}
.app_inner__tab .tab_right h3{font-size:14px;color:rgba(0,0,0,0.65);}
.app_inner__tab .tab_right h4{font-size:12px;margin:4px 0px;color:rgba(0,0,0,0.33);}
.app_inner__tab .tab_right p{font-size:11px;color:white;}
.app_inner__tab .tab_right button{margin-top:10px;border:2px solid white;background:none;border-radius:5px;padding:6px 20px;cursor:pointer;font-family:'Roboto Condensed',sans-serif;outline:none;font-size:11px;color:white;-webkit-transition:all .3s;transition:all .3s;}
.app_inner__tab .tab_right button:hover{background:white;color:black;}
.app_inner__tab .tab_left{width:30%;float:left;position:relative;}
.app_inner__tab .tab_left .big{position:absolute;top:-17px;-webkit-transition:all .3s .3s;transition:all .3s .3s;left:390px;font-size:180px;opacity:0.08;}
.app_inner__tab .tab_left__image{position:relative;top:-100px;text-align:center;background:white;left:47px;border-radius:20px;width:80px;height:80px;}
.app_inner__tab .tab_left__image i{color:white;font-size:40px;top:18px;position:relative;}
@-webkit-keyframes move_out{0%{top:47px;}
100%{top:200px;}
}
@keyframes move_out{0%{top:47px;}
100%{top:200px;}
}
@-webkit-keyframes move_in{0%{top:-200px;}
100%{top:47px;}
}
@keyframes move_in{0%{top:-200px;}
100%{top:47px;}
}
@-webkit-keyframes bump{0%{top:16px;}
25%{top:13px;}
50%{top:16px;}
75%{top:13px;}
100%{top:16px;}
}
@keyframes bump{0%{top:16px;}
25%{top:13px;}
50%{top:16px;}
75%{top:13px;}
100%{top:16px;}
}
@-webkit-keyframes intro{0%{-webkit-transform:translateY(-50%) scale(0) rotateX(10deg) rotateY(10deg) rotateZ(40deg);transform:translateY(-50%) scale(0) rotateX(10deg) rotateY(10deg) rotateZ(40deg);}
100%{-webkit-transform:translateY(-50%) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg);transform:translateY(-50%) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
}
@keyframes intro{0%{-webkit-transform:translateY(-50%) scale(0) rotateX(10deg) rotateY(10deg) rotateZ(40deg);transform:translateY(-50%) scale(0) rotateX(10deg) rotateY(10deg) rotateZ(40deg);}
100%{-webkit-transform:translateY(-50%) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg);transform:translateY(-50%) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
}
a.download,a.follow{text-align:center;margin-top:13px;width:300px;float:left;display:inline-block;padding:16px 30px;background:#EA495F;color:white;font-weight:900;font-family:'Roboto Condensed',sans-serif;text-decoration:none;border-radius:4px;margin-right:12px;}
a.download i,a.follow i{margin-right:10px;}
a.follow{float:left;padding:14px 30px;background:none;color:white;border:2px solid white;}
a.follow:hover{color:#41EFB6;border-color:#41EFB6;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
16.96 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
16.96 KB
立即下载
柯馥
了解
打赏作者 鼓励作者
Html Js 手拉琴特效
最新结算
股权转让协议意向书模板
类型: .docx 金额: CNY 2.23￥ 状态: 待结算 详细>
股权转让协议意向书模板
类型: .docx 金额: CNY 0.28￥ 状态: 待结算 详细>
CSS3图片向上3D翻转渐隐消失特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3图片向上3D翻转渐隐消失特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
.net c# 将金额转人名币大写金额
类型: .rar 金额: CNY 2.39￥ 状态: 待结算 详细>
.net c# 将金额转人名币大写金额
类型: .rar 金额: CNY 0.3￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 2.23￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 0.28￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 2.23￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 0.28￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章