css3 menu 휴대폰 메뉴 1

9449 단어 css3
먼저 효과도 보기;
 
효과 1, 주로translateY(100px)-->translateY(0px);opacity:0;—>opacity: 1; 그리고 귀속 지연, 번거로울까봐 직접 for 순환을 써도 돼요.
.one a {transform: translateY(100px); opacity:0;}

.one:hover a {transform: translateY(0px);-webkit-transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: all 0.4s ease-in-out ; opacity: 1;}

 
효과2, 주로translateX(100px)-->translateX(0px);opacity:0;—>opacity: 1; 그리고 귀속 지연
.two a {transform:  translateX(100px); opacity: 0;}

.two:hover a {transform: translateX(0);transition: all 0.4s ease-in-out ; opacity: 1;}

 
효과 3, 주로translateY(100px)-->translateY(0px);translateX(100px) -->translateX(0px);opacity:0;—>opacity: 1; 그리고 귀속 지연
.three a {transform: translateY(100px) translateX(100px); opacity: 0;}

.three:hover a {transform: translateY(0px) translateX(0); transition: all 0.4s; opacity: 1;}

 
효과 4는 주로 위 3의 기초 위에서 css3 짝짓기 판단을 한다.그리고 귀속 지연
.four li:nth-child(odd) b {transform: translateY(100px) translateX(100px); opacity: 0;}

.four li:nth-child(even) b {transform: translateY(100px) translateX(-100px); opacity: 0;}

.four:hover li b {transform: translateY(0px) translateX(0); transition: all .4s; opacity: 1;}

 
소스 코드는 다음과 같습니다.
<!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     1</title>	

<!--[if IE]>

		<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>

	<![endif]-->

    

	<style type="text/css"> 

		  /*Fontawesome Iconfont*/

		  @import url(http://libs.useso.com/js/font-awesome/4.0.1/css/font-awesome.min.css);

		  @import url(http://fonts.useso.com/css?family=Montserrat);

		* {margin: 0; padding: 0;}

		 ul,li {margin: 0; padding: 0;list-style-type: none;}

          

		 h1{width:1450px;margin: 0 auto; height:80px; line-height:80px;} 

		  

		.grid {width:1500px;margin: 0 auto;}

		.grid > li { width:320px; height: 480px; overflow: hidden; float: left; margin: 20px 0 20px 30px; position: relative; }

		.grid > li:hover {box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.5);}



		.grid>li section {position: relative; transition: all 0.25s; width:320px; height:480px;}

		.grid>li h2 {font: bold 14px montserrat; color: #eeeeee; text-transform: uppercase; position: absolute; text-align: center; width: 60%; left: 20%; top:48px; padding: 10px 0; border:1px solid white; border-radius: 4px;}



		.sidenav { position: absolute; top: 0; left: 0; bottom: 0; background: linear-gradient(rgba(50,60,60, 1), rgba(50,60,60, 0.7)); width: 50px; transition: all 0.25s; overflow: hidden; padding-top: 100px;}

		.sidenav li { _overflow: hidden; width: 150px; }

        .sidenav a { text-decoration: none; color: #eee;  display: block; line-height: 48px;  }

		.sidenav span {display: block;}

		.sidenav b { padding-left 10px; display: block; color: white; font-family: Montserrat; font-size: 12px; line-height: 4; opacity: 0; }

		.sidenav a i { display: block; float: left; font-size: 16px; line-height: 48px; width: 50px; text-align: center; }



		/*All instances*/

		section{ background:url(../../../images/TaylorSwift.jpg) no-repeat #333 center center /contain;  height:500px;}

		.grid>li:hover .sidenav {width: 150px;}

		.grid>li:hover section {margin-left: 140px;}

		.grid>li:hover b {opacity: 1;}





		/*one*/

		.one li {overflow: visible;}

		.one a {transform: translateY(100px); opacity:0;}

		.one:hover a {transform: translateY(0px);-webkit-transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: all 0.4s ease-in-out ; opacity: 1;}



		/*two*/

		.two li {overflow: visible;}

		.two a {transform:  translateX(100px); opacity: 0;}

		.two:hover a {transform: translateX(0);transition: all 0.4s ease-in-out ; opacity: 1;}

		

		

		/*Three*/

		.three li {overflow: visible;}

		.three a {transform: translateY(100px) translateX(100px); opacity: 0;}

		.three:hover a {transform: translateY(0px) translateX(0); transition: all 0.4s; opacity: 1;}  

		



		/*Four*/

		.four li {overflow: visible; width: 150px;}

		.four li a i {opacity: 0; transition: all 0.4s;}

		.four li:nth-child(odd) b {transform: translateY(100px) translateX(100px); opacity: 0;}

		.four li:nth-child(even) b {transform: translateY(100px) translateX(-100px); opacity: 0;}

		.four:hover li b {transform: translateY(0px) translateX(0); transition: all .4s; opacity: 1;}

		.four:hover li a i {opacity: 1;}

		

		

		

		/*     */

		.sidenav li:nth-child(1) b, .sidenav li:nth-child(1) a, .sidenav li:nth-child(1) i {transition-delay: .08s;}

		.sidenav li:nth-child(2) b, .sidenav li:nth-child(2) a, .sidenav li:nth-child(2) i {transition-delay: .16s;}

		.sidenav li:nth-child(3) b, .sidenav li:nth-child(3) a, .sidenav li:nth-child(3) i {transition-delay: .24s;}

		.sidenav li:nth-child(4) b, .sidenav li:nth-child(4) a, .sidenav li:nth-child(4) i {transition-delay: .32s;}

		.sidenav li:nth-child(5) b, .sidenav li:nth-child(5) a, .sidenav li:nth-child(5) i {transition-delay: .40s;}

		.sidenav li:nth-child(6) b, .sidenav li:nth-child(6) a, .sidenav li:nth-child(6) i {transition-delay: .48s;}

	</style>

	

</head>

<body>

        <h1>   translateX     translateY </h1>

		<ul class="grid">

			<li class="one">

				<ul class="sidenav">

					<li><a><i class="fa fa-check"></i><b>  </b></a></li>

					<li><a><i class="fa fa-inbox"></i><b>Messages</b></a></li>

					<li><a><i class="fa fa-pencil"></i><b>New Post</b></a></li>

					<li><a><i class="fa fa-cog"></i><b>Settings</b></a></li>

					<li><a><i class="fa fa-star"></i><b>Starred</b></a></li>

					<li><a><i class="fa fa-power-off"></i><b>Logout</b></a></li>

				</ul>

				<section>

					<h2>Slide Up</h2>

				</section>

			</li>

            

            

			<li class="two">

				<ul class="sidenav">

					<li><a><i class="fa fa-check"></i><b>  </b></a></li>

					<li><a><i class="fa fa-inbox"></i><b>Messages</b></a></li>

					<li><a><i class="fa fa-pencil"></i><b>New Post</b></a></li>

					<li><a><i class="fa fa-cog"></i><b>Settings</b></a></li>

					<li><a><i class="fa fa-star"></i><b>Starred</b></a></li>

					<li><a><i class="fa fa-power-off"></i><b>Logout</b></a></li>

				</ul>

				<section>

					<h2>Slide Left</h2>

				</section>

			</li>

            

            

            <li class="three">

				<ul class="sidenav">

					<li><a><i class="fa fa-check"></i><b>    </b></a></li>

					<li><a><i class="fa fa-inbox"></i><b>Messages</b></a></li>

					<li><a><i class="fa fa-pencil"></i><b>New Post</b></a></li>

					<li><a><i class="fa fa-cog"></i><b>Settings</b></a></li>

					<li><a><i class="fa fa-star"></i><b>Starred</b></a></li>

					<li><a><i class="fa fa-power-off"></i><b>Logout</b></a></li>

				</ul>

				<section>

					<h2>Slide Top Left</h2>

				</section>

			</li>

            

            

			<li class="four">

				<ul class="sidenav">

					<li><a><i class="fa fa-check"></i><b>    </b></a></li>

					<li><a><i class="fa fa-inbox"></i><b>Messages</b></a></li>

					<li><a><i class="fa fa-pencil"></i><b>New Post</b></a></li>

					<li><a><i class="fa fa-cog"></i><b>Settings</b></a></li>

					<li><a><i class="fa fa-star"></i><b>Starred</b></a></li>

					<li><a><i class="fa fa-power-off"></i><b>Logout</b></a></li>

				</ul>

				<section>

					<h2>Criss-Cross</h2>

				</section>

			</li>

		</ul>

</body>

</html>
다 중 정규 표현 식 일치 (다 중 정규 표현 식 일치)
Salesforce Apex 개발 환경 설정 및 테스트

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage