html中文本高亮,CSS3 文本高亮/突显动画

CSS

语言：

CSSSCSS

确定

html,

body {

height: 100%;

}

body {

background: #2c3e50;

display: flex;

}

.card {

width: 350px;

padding: 30px;

background: #1abc9c;

margin: auto;

transition: 0.3s ease;

box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);

}

.card:hover {

box-shadow: 0 5px 20px rgba(0, 0, 0, 0.8);

transform: translateY(-10px) scale(1.02);

}

.card:hover .entry-title {

background-position: -100% 0;

}

.entry-title {

background: linear-gradient(to right, rgba(255, 255, 255, 0) 50%, #16a085 50%);

background-size: 200%;

background-position: 0 0;

display: inline;

transition: 0.5s ease-in-out;

font-family: raleway, arial, sans-serif;

text-transform: uppercase;

}

.entry-title a {

color: white;

text-decoration: none;

}

small {

margin-top: 20px;

display: block;

font-family: raleway, arial, sans-serif;

color: white;

text-transform: uppercase;

}

small a {

font-weight: 700;

color: white;

text-decoration: none;

}

span {

display: block;

margin-top: 10px;

font-family: raleway, arial, sans-serif;

font-weight: 700;

color: #16a085;

}

span a {

color: white;

}