Template:NoWorld/members.css

/*以下样式用于“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页面]] */