css3 menu 휴대폰 메뉴 3
6629 단어 css3
효과 1, 주로 scale(0)-->scale(1px);opacity:0;—>opacity: 1; 그리고 귀속 지연, 번거로울까봐 직접 for 순환을 써도 돼요.
.five b {transform: scale(0); opacity: 0;}
.five:hover b {transform: scale(1); opacity: 1; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
.five i {transform: scale(0); opacity: 0;}
.five:hover i {transform: scale(1); opacity: 1; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
효과 2, 주로 scale(1.5)-->scale(1px);opacity:0;—>opacity: 1;스스로 cubic-bezier(0.175,0.885,0.32,1.275)를 만들기;유사 용수철
.six a {transform: scale(1.5); opacity: 0;}
.six:hover a {transform: scale(1); opacity: 1; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
:
<!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 3</title>
<style type="text/css">
@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 {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: 150px;
-webkit-filter: blur(1px); /* Chrome, Opera */
-moz-filter: blur(1px);/* svg */
-ms-filter: blur(1px);
filter: blur(1px);}
.grid>li:hover b {opacity: 1;}
.sidenav li:nth-child(1) b, .sidenav li:nth-child(1) a {transition-delay: .08s;}
.sidenav li:nth-child(2) b, .sidenav li:nth-child(2) a {transition-delay: .16s;}
.sidenav li:nth-child(3) b, .sidenav li:nth-child(3) a {transition-delay: .24s;}
.sidenav li:nth-child(4) b, .sidenav li:nth-child(4) a {transition-delay: .32s;}
.sidenav li:nth-child(5) b, .sidenav li:nth-child(5) a {transition-delay: .40s;}
.sidenav li:nth-child(6) b, .sidenav li:nth-child(6) a {transition-delay: .48s;}
/*Five*/
.five b {transform: scale(0); opacity: 0;}
.five:hover b {transform: scale(1); opacity: 1; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
.five i {transform: scale(0); opacity: 0;}
.five:hover i {transform: scale(1); opacity: 1; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
.sidenav li:nth-child(1) i {transition-delay: .48s;}
.sidenav li:nth-child(2) i {transition-delay: .40s;}
.sidenav li:nth-child(3) i {transition-delay: .32s;}
.sidenav li:nth-child(4) i {transition-delay: .24s;}
.sidenav li:nth-child(5) i {transition-delay: .16s;}
.sidenav li:nth-child(6) i {transition-delay: .08s;}
/*Six*/
.six a {transform: scale(1.5); opacity: 0;}
.six:hover a {transform: scale(1); opacity: 1; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
</style>
<!--[if IE]>
<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<h1> scale </h1>
<ul class="grid">
<li class="five">
<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>Ripple Effect</h2></section>
</li>
<li class="six">
<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>Scroll Down</h2></section>
</li>
</ul>
</body>
</html>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
초보자를 위한 간단한 카드 호버 애니메이션html과 css만 사용하여 만든 매우 간단한 카드 호버 애니메이션을 살펴보겠습니다. css 속성을 알고 있다면 이해할 수 있지만 완전히 초보자라면 css의 기초를 배우는 것이 좋습니다. 1단계: 마크업 즉, HTM...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.