人物简介 css,CSS3 简单的电影人物介绍卡片

CSS

语言：

CSSSCSS

确定

@import url(http://fonts.googleapis.com/css?family=Roboto+Slab);

@import url(http://fonts.googleapis.com/css?family=Merriweather+Sans:300);

* {

box-sizing: border-box;

}

body {

background-color: #2c2d3d;

}

.card {

width: 600px;

margin: 40px auto;

background-color: #f7f7e9;

color: #444;

overflow: hidden;

box-shadow: 5px 5px 0 0 #aaa;

}

.card h1 {

margin: 0;

padding: 20px;

text-align: center;

font-family: Roboto Slab;

font-weight: 400;

background-color: #4dd65f;

animation: fadein 1.2s;

}

.card img {

float: left;

width: 200px;

height: 200px;

margin: 20px;

position: relative;

z-index: 1;

animation: grow 0.6s;

}

.card .bio {

position: relative;

margin: 20px;

font-family: Merriweather Sans;

animation: slidein 1.2s;

}

@keyframes fadein {

from {

color: transparent;

}

to {

color: inherit;

}

}

@keyframes grow {

from {

transform: scale(0);

}

80% {

transform: scale(1.1);

}

to {

transform: scale(1);

}

}

@keyframes slidein {

from {

opacity: 0;

}

49.9% {

opacity: 0;

}

50% {

left: -240px;

}

to {

left: 0;

}

}

.comment {

font-family: Merriweather Sans;

font-size: 12px;

color: #ddd;

text-align: center;

}