css划上去变长,CSS3悬停时箭头拉长动画

CSS

语言&＃xff1a;

CSSSCSS

确定

body {

width: 100%;

height: 100%;

margin: 0;

padding: 0;

font-family: &＃39;Righteous&＃39;, Helvetica, sans-serif;

}

p {

font-size: 17px;

line-height: 30px;

font-family: &＃39;Lato&＃39;, Helvetica, sans-serif;

letter-spacing: 0.05em;

font-weight: 400;

}

.info {

position: absolute;

top: 10px;

right: 10px;

display: block;

font-family: Avenir, Helvetica, sans-serif;

font-weight: 700;

font-size: 14px;

color: #999;

}

.info a {

color: #16b39b;

}

.container {

height: 100vh;

}

.block {

width: 400px;

height: 160px;

background-color: #000;

background-image: url("/uploads/151101/Kodak_160_VC_cc.png");

background-position: center left;

display: block;

transition: all 0.35s;

color: #fff;

padding: 40px;

cursor: pointer;

}

.block h2 {

font-size: 35px;

line-height: 30px;

margin: 0 0 25px 0;

padding: 0;

text-transform: uppercase;

letter-spacing: 0.4em;

font-weight: 400;

}

.block .arrow {

height: 4px;

background-color: #fff;

width: 10%;

margin: 35px 0;

transition: all 0.45s;

}

.block .arrow:after {

border-color: #fff;

border-style: solid;

border-width: 4px 4px 0 0;

transform: rotate(45deg);

margin-top: -12px;

width: 24px;

height: 24px;

display: block;

float: right;

content: "";

}

.block:hover {

background-image: url("/uploads/151101/old_film_03__by_stock_basicality.jpg");

background-color: #00f;

background-position: center left;

transition: all 0.35s;

}

.block:hover .arrow {

width: 100%;

transition: all 0.45s;

}