Difference between revisions of "Team:BIT/Interlab/test3"

Line 1: Line 1:
  
−
<!DOCTYPE html>
+
<html>
−
<html lang="en" dir="ltr" class="client-nojs">
+
 
<head>
 
<head>
−
<meta charset="UTF-8" />
+
<meta charset="utf-8">
−
<title>Team:BIT/Interlab/test3 - 2018.igem.org</title>
+
<title>天空中白云飘动CSS3特效 - 站长素材</title>
−
<meta name="generator" content="MediaWiki 1.24.1" />
+
−
<link rel="alternate" type="application/x-wiki" title="Edit" href="/wiki/index.php?title=Team:BIT/Interlab/test3&amp;action=edit" />
+
−
<link rel="edit" title="Edit" href="/wiki/index.php?title=Team:BIT/Interlab/test3&amp;action=edit" />
+
−
<link rel="shortcut icon" href="/favicon.ico" />
+
−
<link rel="search" type="application/opensearchdescription+xml" href="/wiki/opensearch_desc.php" title="2018.igem.org (en)" />
+
−
<link rel="EditURI" type="application/rsd+xml" href="https://2018.igem.org/wiki/api.php?action=rsd" />
+
−
<link rel="alternate" hreflang="x-default" href="/Team:BIT/Interlab/test3" />
+
−
<link rel="copyright" href="http://creativecommons.org/licenses/by/3.0/" />
+
−
<link rel="alternate" type="application/atom+xml" title="2018.igem.org Atom feed" href="/wiki/index.php?title=Special:RecentChanges&amp;feed=atom" />
+
−
<link rel="stylesheet" href="https://2018.igem.org/wiki/load.php?debug=false&amp;lang=en&amp;modules=mediawiki.legacy.commonPrint%2Cshared%7Cmediawiki.skinning.content.externallinks%7Cmediawiki.skinning.interface%7Cmediawiki.ui.button%7Cskins.igem.styles&amp;only=styles&amp;skin=igem&amp;*" />
+
−
<!--[if IE 6]><link rel="stylesheet" href="/wiki/skins/Igem/IE60Fixes.css?303" media="screen" /><![endif]-->
+
−
<!--[if IE 7]><link rel="stylesheet" href="/wiki/skins/Igem/IE70Fixes.css?303" media="screen" /><![endif]--><meta name="ResourceLoaderDynamicStyles" content="" />
+
−
<style>a:lang(ar),a:lang(kk-arab),a:lang(mzn),a:lang(ps),a:lang(ur){text-decoration:none}
+
−
/* cache key: 2018_igem_org:resourceloader:filter:minify-css:7:4954c207eac863ca01279ce65317a567 */</style>
+
−
<script src="https://2018.igem.org/wiki/load.php?debug=false&amp;lang=en&amp;modules=startup&amp;only=scripts&amp;skin=igem&amp;*"></script>
+
−
<script>if(window.mw){
+
−
mw.config.set({"wgCanonicalNamespace":"","wgCanonicalSpecialPageName":false,"wgNamespaceNumber":0,"wgPageName":"Team:BIT/Interlab/test3","wgTitle":"Team:BIT/Interlab/test3","wgCurRevisionId":122450,"wgRevisionId":122450,"wgArticleId":20556,"wgIsArticle":true,"wgIsRedirect":false,"wgAction":"view","wgUserName":"PolypolyA","wgUserGroups":["*","user","autoconfirmed"],"wgCategories":[],"wgBreakFrames":false,"wgPageContentLanguage":"en","wgPageContentModel":"wikitext","wgSeparatorTransformTable":["",""],"wgDigitTransformTable":["",""],"wgDefaultDateFormat":"dmy","wgMonthNames":["","January","February","March","April","May","June","July","August","September","October","November","December"],"wgMonthNamesShort":["","Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],"wgRelevantPageName":"Team:BIT/Interlab/test3","wgUserId":3931,"wgUserEditCount":100,"wgUserRegistration":1531721993000,"wgUserNewMsgRevisionId":null,"wgIsProbablyEditable":true,"wgRestrictionEdit":[],"wgRestrictionMove":[],"wgWikiEditorEnabledModules":{"toolbar":false,"dialogs":false,"hidesig":true,"preview":false,"previewDialog":false,"publish":false}});
+
−
}</script><script>if(window.mw){
+
−
mw.loader.implement("user.options",function($,jQuery){mw.user.options.set({"ccmeonemails":0,"cols":80,"date":"default","diffonly":0,"disablemail":0,"editfont":"default","editondblclick":0,"editsectiononrightclick":0,"enotifminoredits":0,"enotifrevealaddr":0,"enotifusertalkpages":1,"enotifwatchlistpages":1,"extendwatchlist":0,"fancysig":0,"forceeditsummary":0,"gender":"unknown","hideminor":0,"hidepatrolled":0,"imagesize":2,"math":1,"minordefault":0,"newpageshidepatrolled":0,"nickname":"","norollbackdiff":0,"numberheadings":0,"previewonfirst":0,"previewontop":1,"rcdays":7,"rclimit":50,"rows":25,"showhiddencats":0,"shownumberswatching":1,"showtoolbar":1,"skin":"igem","stubthreshold":0,"thumbsize":5,"underline":2,"uselivepreview":0,"usenewrc":1,"watchcreations":1,"watchdefault":1,"watchdeletion":0,"watchlistdays":3,"watchlisthideanons":0,"watchlisthidebots":0,"watchlisthideliu":0,"watchlisthideminor":0,"watchlisthideown":0,"watchlisthidepatrolled":0,"watchmoves":0,"watchrollback":0,
+
−
"wllimit":250,"useeditwarning":1,"prefershttps":1,"language":"en","variant-gan":"gan","variant-iu":"iu","variant-kk":"kk","variant-ku":"ku","variant-shi":"shi","variant-sr":"sr","variant-tg":"tg","variant-uz":"uz","variant-zh":"zh","searchNs0":true,"searchNs1":false,"searchNs2":false,"searchNs3":false,"searchNs4":false,"searchNs5":false,"searchNs6":false,"searchNs7":false,"searchNs8":false,"searchNs9":false,"searchNs10":false,"searchNs11":false,"searchNs12":false,"searchNs13":false,"searchNs14":false,"searchNs15":false});},{},{});mw.loader.implement("user.tokens",function($,jQuery){mw.user.tokens.set({"editToken":"c0fb9e44453f53de2c7f32276ded1015+\\","patrolToken":"ceece827e38b2bb858b99531ce56bf1a+\\","watchToken":"334dc3030e7e176eebaeea6ef4bd5767+\\"});},{},{});
+
−
/* cache key: 2018_igem_org:resourceloader:filter:minify-js:7:5a31f7ffb9791de8e93b004b84195408 */
+
−
}</script>
+
−
<script>if(window.mw){
+
−
mw.loader.load(["mediawiki.page.startup","mediawiki.legacy.wikibits","mediawiki.legacy.ajax"]);
+
−
}</script>
+
−
</head>
+
−
<body class="mediawiki ltr sitedir-ltr ns-0 ns-subject page-Team_BIT_Interlab_test3 skin-igem action-view">
+
−
 
+
−
        <script type='text/javascript'        src ='/common/tablesorter/jquery.tablesorter.min.js'></script>
+
−
        <link rel='stylesheet' type='text/css' href='/common/tablesorter/themes/groupparts/style.css' />
+
−
        <link rel='stylesheet' type='text/css' href='/common/table_styles.css' />
+
−
 
+
−
        <script type='text/javascript'        src ='/wiki/skins/Igem/resources/2018_skin.js'></script>
+
−
 
+
−
 
+
−
    <div id='globalWrapper'>
+
−
        <div id='top_menu_under' class='noprint'></div>
+
−
        <div id='top_menu_14' class='noprint'>Loading menubar.....</div> <!-- Will be replaced with the jQuery.load -->
+
−
<script>jQuery('#top_menu_14').load('https://2018.igem.org/cgi/top_menu_14/menubar_reply.cgi',
+
−
    {  t:"Team%3ABIT%2FInterlab%2Ftest3",
+
−
a:"View+%2FTeam%3ABIT%2FInterlab%2Ftest3++Edit+%2Fwiki%2Findex.php%3Ftitle%3DTeam%3ABIT%2FInterlab%2Ftest3%26action%3Dedit++History+%2Fwiki%2Findex.php%3Ftitle%3DTeam%3ABIT%2FInterlab%2Ftest3%26action%3Dhistory++Move+%2FSpecial%3AMovePage%2FTeam%3ABIT%2FInterlab%2Ftest3++Unwatch+%2Fwiki%2Findex.php%3Ftitle%3DTeam%3ABIT%2FInterlab%2Ftest3%26action%3Dunwatch%26token%3D722e8bc66af4c0d2df01ec86099b4ce4%252B%255C++Page+%2FTeam%3ABIT%2FInterlab%2Ftest3++Discussion+%2Fwiki%2Findex.php%3Ftitle%3DTalk%3ATeam%3ABIT%2FInterlab%2Ftest3%26action%3Dedit%26redlink%3D1++" });
+
−
</script>
+
−
 
+
−
        <!-- Content div contains HQ_page for HQ styles, Logo and title div, and USER CONTENT -->
+
−
<div id="content" class="mw-body" role="main">
+
−
    <a id="top"></a>
+
−
 
+
−
            <div id="top_title">
+
−
                <div class="logo_2018">
+
−
                    <a href="https://2018.igem.org">
+
−
                    <img src="https://static.igem.org/mediawiki/2018/8/8b/HQ_page_logo.jpg" width="100px">
+
−
                    </a>
+
−
                </div>
+
−
 
+
−
        <h1 id="firstHeading" class="firstHeading">
+
−
            <span dir="auto">Team:BIT/Interlab/test3</span>
+
−
        </h1>
+
−
            </div>
+
  
−
            <div id="HQ_page">
 
−
                <div id="bodyContent">
 
−
            <div id="mw-content-text" lang="en" dir="ltr" class="mw-content-ltr"><p>
 
−
<head>
 
 
<style>
 
<style>
−
*, *:before, *:after {
+
@keyframes tail {
−
   box-sizing: border-box;
+
  6.6666666667% {
 +
    transform: rotate(0);
 +
  }
 +
  10% {
 +
    transform: rotate(10deg);
 +
  }
 +
  16.6666666667% {
 +
    transform: rotate(-5deg);
 +
   }
 +
  20% {
 +
    transform: rotate(30deg);
 +
  }
 +
  26.6666666667% {
 +
    transform: rotate(-2deg);
 +
  }
 +
  46.6666666667% {
 +
    transform: rotate(10deg);
 +
  }
 +
  53.3333333333% {
 +
    transform: rotate(-5deg);
 +
  }
 +
  56.6666666667% {
 +
    transform: rotate(10deg);
 +
  }
 
}
 
}
−
 
+
@keyframes body {
−
html {
+
  6.6666666667% {
−
   font-size: 18px;
+
    transform: scaleY(1);
−
   line-height: 1.5;
+
   }
−
   font-weight: 300;
+
  10% {
−
   color: #333;
+
    transform: scaleY(1.15);
−
   font-family: "Nunito Sans", sans-serif;
+
   }
 +
  16.6666666667% {
 +
    transform: scaleY(1);
 +
  }
 +
  20% {
 +
    transform: scaleY(1.25);
 +
   }
 +
  26.6666666667% {
 +
    transform: scaleY(1);
 +
   }
 +
  46.6666666667% {
 +
    transform: scaleY(1.15);
 +
   }
 +
  53.3333333333% {
 +
    transform: scaleY(1);
 +
  }
 +
  56.6666666667% {
 +
    transform: scaleY(1.15);
 +
  }
 
}
 
}
−
 
+
@keyframes left-whisker {
−
body {
+
  6.6666666667% {
−
   margin: 0px;
+
    transform: rotate(0);
−
   padding: 0px;
+
   }
−
   height: 100vh;
+
  10% {
−
   background-color: #ecf0f9;
+
    transform: rotate(0deg);
−
   background-attachment: fixed;
+
   }
 +
  16.6666666667% {
 +
    transform: rotate(-5deg);
 +
   }
 +
  20% {
 +
    transform: rotate(0deg);
 +
   }
 +
  26.6666666667% {
 +
    transform: rotate(0deg);
 +
   }
 +
  46.6666666667% {
 +
    transform: rotate(10deg);
 +
  }
 +
  53.3333333333% {
 +
    transform: rotate(-5deg);
 +
  }
 +
  56.6666666667% {
 +
    transform: rotate(10deg);
 +
  }
 
}
 
}
−
 
+
@keyframes right-whisker {
−
.content {
+
  6.6666666667% {
−
width: 100%;
+
    transform: rotate(180deg);
 +
  }
 +
  10% {
 +
    transform: rotate(190deg);
 +
  }
 +
  16.6666666667% {
 +
    transform: rotate(180deg);
 +
  }
 +
  20% {
 +
    transform: rotate(175deg);
 +
  }
 +
  26.6666666667% {
 +
    transform: rotate(190deg);
 +
  }
 +
  46.6666666667% {
 +
    transform: rotate(180deg);
 +
  }
 +
  53.3333333333% {
 +
    transform: rotate(185deg);
 +
  }
 +
  56.6666666667% {
 +
    transform: rotate(175deg);
 +
  }
 +
}
 +
@keyframes left-ear {
 +
  0% {
 +
    transform: rotate(-20deg);
 +
  }
 +
  6.6666666667% {
 +
    transform: rotate(-6deg);
 +
  }
 +
  13.3333333333% {
 +
    transform: rotate(-15deg);
 +
  }
 +
  26.6666666667% {
 +
    transform: rotate(-15deg);
 +
  }
 +
  33.3333333333% {
 +
    transform: rotate(-30deg);
 +
  }
 +
  40% {
 +
    transform: rotate(-30deg);
 +
  }
 +
  46.6666666667% {
 +
    transform: rotate(0deg);
 +
  }
 +
  53.3333333333% {
 +
    transform: rotate(0deg);
 +
  }
 +
  60% {
 +
    transform: rotate(-15deg);
 +
  }
 +
  80% {
 +
    transform: rotate(-15deg);
 +
  }
 +
  93.3333333333% {
 +
    transform: rotate(-6deg);
 +
  }
 +
  100% {
 +
    transform: rotateZ(-6deg);
 +
  }
 +
}
 +
@keyframes right-ear {
 +
  0% {
 +
    transform: rotateZ(-16deg);
 +
  }
 +
  6.6666666667% {
 +
    transform: rotateZ(-16deg);
 +
  }
 +
  13.3333333333% {
 +
    transform: rotateZ(-19deg);
 +
  }
 +
  26.6666666667% {
 +
    transform: rotateZ(-19deg);
 +
  }
 +
  33.3333333333% {
 +
    transform: rotateZ(-30deg);
 +
  }
 +
  36.6666666667% {
 +
    transform: rotateZ(-19deg);
 +
  }
 +
  37.3333333333% {
 +
    transform: rotateZ(-30deg);
 +
  }
 +
  38% {
 +
    transform: rotateZ(-19deg);
 +
  }
 +
  40% {
 +
    transform: rotateZ(-19deg);
 +
  }
 +
  40.6666666667% {
 +
    transform: rotateZ(-30deg);
 +
  }
 +
  41.3333333333% {
 +
    transform: rotateZ(-19deg);
 +
  }
 +
  46.6666666667% {
 +
    transform: rotateZ(-9deg);
 +
  }
 +
  53.3333333333% {
 +
    transform: rotateZ(-9deg);
 +
  }
 +
  60% {
 +
    transform: rotateZ(-19deg);
 +
  }
 +
  60.6666666667% {
 +
    transform: rotateZ(-30deg);
 +
  }
 +
  61.3333333333% {
 +
    transform: rotateZ(-19deg);
 +
  }
 +
  62.6666666667% {
 +
    transform: rotateZ(-19deg);
 +
  }
 +
  63.3333333333% {
 +
    transform: rotateZ(-30deg);
 +
  }
 +
  64% {
 +
    transform: rotateZ(-19deg);
 +
  }
 +
  80% {
 +
    transform: rotateZ(-19deg);
 +
  }
 +
  93.3333333333% {
 +
    transform: rotateZ(-16deg);
 +
  }
 +
  100% {
 +
    transform: rotateZ(-16deg);
 +
  }
 +
}
 +
body {
 
   display: flex;
 
   display: flex;
−
  margin: 0;
 
 
   justify-content: center;
 
   justify-content: center;
 
   align-items: center;
 
   align-items: center;
−
   flex-wrap: wrap;
+
   height: 100vh;
−
  max-width: 1000px;
+
 
}
 
}
  
−
.heading {
+
.main {
−
   width: 100%;
+
   height: 400px;
−
   margin-left: 1rem;
+
   width: 400px;
−
   font-weight: 900;
+
   position:absolute;
−
  font-size: 1.618rem;
+
right: 100px;
−
  text-transform: uppercase;
+
bottom: 100px;
−
  letter-spacing: .1ch;
+
−
  line-height: 1;
+
−
  padding-bottom: .5em;
+
−
  margin-bottom: 1rem;
+
−
  position: relative;
+
 
}
 
}
−
.heading:after {
+
.main .stand {
−
  display: block;
+
−
  content: '';
+
 
   position: absolute;
 
   position: absolute;
−
   width: 60px;
+
   top: 50%;
−
   height: 4px;
+
  left: 50%;
−
   background: linear-gradient(135deg, #1a9be6, #1a57e6);
+
  transform: translate(-50%);
−
   bottom: 0;
+
   height: 20px;
 +
   width: 200px;
 +
  border-radius: 20px;
 +
  background-color: #fd6e72;
 +
   z-index: 2;
 
}
 
}
−
 
+
.main .stand::after {
−
.description {
+
   content: "";
−
   width: 100%;
+
  position: absolute;
−
   margin-top: 0;
+
  bottom: -10px;
−
   margin-left: 1rem;
+
  left: 50%;
−
   margin-bottom: 3rem;
+
   transform: translate(-50%);
 +
  height: 10px;
 +
   width: 50px;
 +
  border-radius: 20px;
 +
   background-color: #fdf9de;
 +
  box-shadow: 0 10px 0 #fdf9de, 0 20px 0 #fdf9de, 0 30px 0 #fdf9de, 0 40px 0 #fdf9de, 0 50px 0 #fdf9de, 0 60px 0 #fdf9de, 0 70px 0 #fdf9de, 0 80px 0 #fdf9de, 0 90px 0 #fdf9de, 0 100px 0 #fdf9de, 0 110px 0 #fdf9de, 0 120px 0 #fdf9de, 0 130px 0 #fdf9de, 0 140px 0 #fdf9de, 0 150px 0 #fdf9de, 0 160px 0 #fdf9de, 0 170px 0 #fdf9de;
 
}
 
}
−
 
+
.main .cat {
−
.card {
+
   width: 110px;
−
   color: inherit;
+
   height: 50px;
−
   cursor: pointer;
+
   position: absolute;
−
   width: calc(33% - 2rem);
+
   top: calc(50% - 50px);
−
   min-width: calc(33% - 2rem);
+
   right: 130px;
−
   height: 400px;
+
   border-top-left-radius: 100px;
−
   min-height: 400px;
+
   border-top-right-radius: 100px;
−
   perspective: 1000px;
+
−
  margin: 1rem;
+
−
  position: relative;
+
 
}
 
}
−
@media screen and (max-width: 800px) {
+
.main .cat .body {
−
   .card {
+
  width: 110px;
−
    width: calc(50% - 2rem);
+
   height: 50px;
−
   }
+
  background-color: #745260;
 +
  position: absolute;
 +
  border-top-left-radius: 100px;
 +
   border-top-right-radius: 100px;
 +
  animation: body 12s none infinite;
 
}
 
}
−
@media screen and (max-width: 500px) {
+
.main .cat .head {
−
   .card {
+
   content: "";
−
    width: 100%;
+
  width: 70px;
−
   }
+
  height: 35px;
 +
  background-color: #745260;
 +
  position: absolute;
 +
  top: calc(50% - 10px);
 +
   left: -40px;
 +
  border-top-left-radius: 80px;
 +
  border-top-right-radius: 80px;
 
}
 
}
  
−
.front,
+
.tail-container {
−
.back {
+
−
  display: flex;
+
−
  border-radius: 6px;
+
−
  background-position: center;
+
−
  background-size: cover;
+
−
  text-align: center;
+
−
  justify-content: center;
+
−
  align-items: center;
+
 
   position: absolute;
 
   position: absolute;
−
   height: 100%;
+
   right: 0;
−
   width: 100%;
+
   bottom: -13px;
−
  -webkit-backface-visibility: hidden;
+
   z-index: 3;
−
   backface-visibility: hidden;
+
−
  transform-style: preserve-3d;
+
−
  transition: ease-in-out 600ms;
+
 
}
 
}
  
−
.front {
+
.tail {
−
  background-size: cover;
+
−
  padding: 2rem;
+
−
  font-size: 1.618rem;
+
−
  font-weight: 600;
+
−
  color: #fff;
+
−
  overflow: hidden;
+
−
  font-family: Poppins, sans-serif;
+
−
}
+
−
.front:before {
+
 
   position: absolute;
 
   position: absolute;
−
   display: block;
+
   height: 30px;
−
   content: '';
+
   width: 14px;
−
   top: 0;
+
   bottom: -10px;
−
  left: 0;
+
 
   right: 0;
 
   right: 0;
−
   bottom: 0;
+
   border-bottom-right-radius: 5px;
−
   background: linear-gradient(135deg, #1a9be6, #1a57e6);
+
   background: #745260;
−
  opacity: .25;
+
   z-index: 0;
−
   z-index: -1;
+
 
}
 
}
−
.card:hover .front {
+
.tail > .tail {
−
   transform: rotateY(180deg);
+
   animation: tail 12s none infinite;
−
}
+
  height: 100%;
−
.card:nth-child(even):hover .front {
+
  width: 14px;
−
   transform: rotateY(-180deg);
+
  transform-origin: left;
 +
   border-bottom-left-radius: 20px 20px;
 +
  border-bottom-right-radius: 20px 20px;
 +
  border-top-right-radius: 40px;
 
}
 
}
  
−
.back {
+
.ear {
−
   background: #fff;
+
   position: absolute;
−
   transform: rotateY(-180deg);
+
  left: 4px;
−
   padding: 0 2em;
+
  top: -4px;
 +
  width: 0;
 +
  height: 0;
 +
  border-left: 12px solid transparent;
 +
  border-right: 12px solid transparent;
 +
  border-bottom: 20px solid #745260;
 +
   transform: rotate(-30deg);
 +
   animation: left-ear 12s both infinite;
 
}
 
}
−
.card:hover .back {
+
.ear + .ear {
−
   transform: rotateY(0deg);
+
   animation: right-ear 12s both infinite;
−
}
+
  top: -12px;
−
.card:nth-child(even) .back {
+
   left: 30px;
−
  transform: rotateY(180deg);
+
−
}
+
−
.card:nth-child(even):hover .back {
+
−
   transform: rotateY(0deg);
+
 
}
 
}
  
−
.button {
+
.nose {
−
   transform: translateZ(40px);
+
   position: absolute;
−
   cursor: pointer;
+
   bottom: 10px;
−
   -webkit-backface-visibility: hidden;
+
   left: -10px;
−
  backface-visibility: hidden;
+
   background-color: #fd6e72;
−
   font-weight: bold;
+
   height: 5px;
−
  color: #fff;
+
   width: 5px;
−
   padding: .5em 1em;
+
   border-radius: 50%;
−
   border-radius: 100px;
+
−
  font: inherit;
+
−
  background: linear-gradient(135deg, #1a9be6, #1a57e6);
+
−
   border: none;
+
−
  position: relative;
+
−
  transform-style: preserve-3d;
+
−
  transition: 300ms ease;
+
 
}
 
}
−
.button:before {
+
 
−
  transition: 300ms ease;
+
.whisker-container {
 
   position: absolute;
 
   position: absolute;
−
   display: block;
+
   bottom: 5px;
−
   content: '';
+
   left: -36px;
−
  transform: translateZ(-40px);
+
   width: 20px;
−
  -webkit-backface-visibility: hidden;
+
   height: 10px;
−
  backface-visibility: hidden;
+
   transform-origin: right;
−
  height: calc(100% - 20px);
+
   animation: left-whisker 12s both infinite;
−
   width: calc(100% - 20px);
+
−
   border-radius: 100px;
+
−
  left: 10px;
+
−
   top: 16px;
+
−
   box-shadow: 0 0 10px 10px rgba(26, 87, 230, 0.25);
+
−
  background-color: rgba(26, 87, 230, 0.25);
+
 
}
 
}
−
.button:hover {
+
.whisker-container:nth-child(2) {
−
   transform: translateZ(55px);
+
  left: -20px;
 +
  bottom: 12px;
 +
   transform-origin: right;
 +
  transform: rotate(180deg);
 +
  animation: right-whisker 12s both infinite;
 
}
 
}
−
.button:hover:before {
+
 
−
   transform: translateZ(-55px);
+
.whisker {
 +
  position: absolute;
 +
  top: 0;
 +
  width: 100%;
 +
  border: 1px solid #fdf9de;
 +
   transform-origin: 100% 0;
 +
  transform: rotate(10deg);
 
}
 
}
−
.button:active {
+
.whisker:last-child {
−
   transform: translateZ(20px);
+
  top: 0;
 +
   transform: rotate(-20deg);
 
}
 
}
−
.button:active:before {
+
.img1{
−
  transform: translateZ(-20px);
+
width: 300px;
−
  top: 12px;
+
}
−
}a
+
h1{
−
 
+
font-family: "微软雅黑 Light";
 +
position: absolute;
 +
bottom: 70px;
 +
left: 550px;
 +
left: 520px;
 +
color: cornflowerblue;
 +
text-shadow:5px 5px 5px #FF0000;
 +
}
 +
</style>
 
</head>
 
</head>
 
<body>
 
<body>
−
 
+
<div>
−
<div class="content">
+
    <a href="#">
−
  <a class="card" href="#!">
+
    <h1>ENTRANCE</h1>
−
     <div class="front" style="background-image: url(img/559.jpg);">
+
<img  class="img1" src="../../photoshop/QQ截图20180610204251.png">
−
      <p>Lorem ipsum dolor sit amet consectetur adipisi.</p>
+
</a>
−
    </div>
+
</div>
−
    <div class="back">
+
<div class="main">
−
       <div>
+
    <span class="stand"></span>
−
        <p>Consectetur adipisicing elit. Possimus, praesentium?</p>
+
     <div class="cat">
−
        <p>Provident consectetur natus voluptatem quis tenetur sed beatae eius sint.</p>
+
    <div class="body"></div>
−
        <button class="button">Click Here</button>
+
    <div class="head">
−
      </div>
+
      <div class="ear"></div>
−
    </div></a><a class="card" href="#!">
+
    <div class="ear"></div>
−
    <div class="front" style="background-image: url(img/560.jpg);">
+
    </div>
−
      <p>Lorem ipsum dolor sit amet consectetur adipisi.</p>
+
    <div class="face">
−
    </div>
+
       <div class="nose"></div>
−
    <div class="back">
+
    <div class="whisker-container">
−
      <div>
+
      <div class="whisker"></div>
−
        <p>Consectetur adipisicing elit. Possimus, praesentium?</p>
+
      <div class="whisker"></div>
−
        <p>Provident consectetur natus voluptatem quis tenetur sed beatae eius sint.</p>
+
    </div>
−
         <button class="button">Click Here</button>
+
    <div class="whisker-container">
 +
      <div class="whisker"></div>
 +
      <div class="whisker"></div>
 +
    </div>
 +
    </div>
 +
    <div class="tail-container">
 +
      <div class="tail">
 +
        <div class="tail">
 +
          <div class="tail">
 +
            <div class="tail">
 +
              <div class="tail">
 +
                <div class="tail">
 +
                  <div class="tail"></div>
 +
                </div>
 +
              </div>
 +
            </div>
 +
          </div>
 +
         </div>
 
       </div>
 
       </div>
−
    </div></a><a class="card" href="#!">
+
    </div>
−
    <div class="front" style="background-image: url(img/567.jpg);">
+
  </div>
−
      <p>Lorem ipsum dolor sit amet consectetur adipisi.</p>
+
</div>
−
    </div>
+
−
    <div class="back">
+
−
      <div>
+
−
        <p>Consectetur adipisicing elit. Possimus, praesentium?</p>
+
−
        <p>Provident consectetur natus voluptatem quis tenetur sed beatae eius sint.</p>
+
−
        <button class="button">Click Here</button>
+
−
      </div>
+
−
    </div></a><a class="card" href="#!">
+
−
    <div class="front" style="background-image: url(img/562.jpg);">
+
−
      <p>Lorem ipsum dolor sit amet consectetur adipisi.</p>
+
−
    </div>
+
−
    <div class="back">
+
−
      <div>
+
−
        <p>Consectetur adipisicing elit. Possimus, praesentium?</p>
+
−
        <p>Provident consectetur natus voluptatem quis tenetur sed beatae eius sint.</p>
+
−
        <button class="button">Click Here</button>
+
−
      </div>
+
−
    </div></a><a class="card" href="#!">
+
−
    <div class="front" style="background-image: url(img/563.jpg);">
+
−
      <p>Lorem ipsum dolor sit amet consectetur adipisi.</p>
+
−
    </div>
+
−
    <div class="back">
+
−
      <div>
+
−
        <p>Consectetur adipisicing elit. Possimus, praesentium?</p>
+
−
        <p>Provident consectetur natus voluptatem quis tenetur sed beatae eius sint.</p>
+
−
        <button class="button">Click Here</button>
+
−
      </div>
+
−
    </div></a><a class="card" href="#!">
+
−
    <div class="front" style="background-image: url(img/564.jpg);">
+
−
      <p>Lorem ipsum dolor sit amet consectetur adipisi.</p>
+
−
    </div>
+
−
    <div class="back">
+
−
      <div>
+
−
        <p>Consectetur adipisicing elit. Possimus, praesentium?</p>
+
−
        <p>Provident consectetur natus voluptatem quis tenetur sed beatae eius sint.</p>
+
−
        <button class="button">Click Here</button>
+
−
      </div>
+
−
    </div></a>
+
 
</div>
 
</div>
 
</body>
 
</body>
−
 
−
</p>
 
−
<!--
 
−
NewPP limit report
 
−
CPU time usage: 0.001 seconds
 
−
Real time usage: 0.001 seconds
 
−
Preprocessor visited node count: 4/1000000
 
−
Preprocessor generated node count: 24/1000000
 
−
Post‐expand include size: 0/2097152 bytes
 
−
Template argument size: 0/2097152 bytes
 
−
Highest expansion depth: 2/40
 
−
Expensive parser function count: 0/100
 
−
-->
 
−
 
−
<!-- Saved in parser cache with key 2018_igem_org:pcache:idhash:20556-0!*!*!*!*!*!* and timestamp 20180906045431 and revision id 122450
 
−
-->
 
−
</div>             <div class="visualClear"></div>
 
−
            </div>
 
−
    </div>
 
−
 
−
        </div>
 
−
    </div>
 
 
</html>
 
</html>

Revision as of 06:53, 6 September 2018

天空中白云飘动CSS3特效 - 站长素材