/*以下样式用于“NoWorld”条目“组织成员”章节。*/ .main{ margin:15px; flex-basis:420px; position:relative; } .left{ width:220px; height:340px; padding:10px; box-sizing:border-box; overflow:hidden; display:flex; justify-content:center; align-items:center; transition-delay:86400s; } .left:hover{ background-color:#f9f9f9; border-radius:20px 0 0 20px; box-shadow:5px 5px 5px #888; transition:3s; transition-delay:0s; } .left:active{ background-color:#f5f5f5; box-shadow:2px 2px 2px #888; transition:0s; } .left:hover ~.right{ animation-play-state:running; } .left:hover ~.right>.article{ animation-play-state:running; } .noworldlost{ transition-delay:86400s; } .noworldlost:hover{ opacity:0; transition:3s; } .right{ position:absolute; top:0; left:0; z-index:-1; opacity:0; padding:20px; width:220px; height:340px; box-sizing:border-box; overflow:hidden; background-color:#f9f9f9; border-radius:0 20px 20px 0; box-shadow:5px 5px 5px #888; animation:right 1s ease 1; animation-fill-mode:forwards; animation-play-state:paused; } @keyframes right{ 20% {transform:translate(225px,0);} 40% {transform:translate(260px,0);opacity:0.5;} 60% {transform:translate(220px,0);opacity:1;} 80% {transform:translate(240px,0);opacity:1;} 100% {transform:translate(225px,0);opacity:1;} } .article{ width:100%; opacity:0; position:relative; left:5px; width:100%; animation:slidedown 2s cubic-bezier(0,0.51,0.83,0.52) 1s; animation-fill-mode:forwards; animation-play-state:paused; } @keyframes slidedown{ 0% {top:0;} 33% {top:30%;opacity:0.33;} 67% {top:0;opacity:0.67;} 100% {top:5%;opacity:1;} }/* [[Category:在模板名字空间下的CSS页面]] */