CSS3悬停高亮背景填充---background-position和background-size的结合使用

CSS3悬停高亮背景填充---background-position和background-size的结合使用

html：

<h1 class="title">
<a href="">Techbrood is a leading search engine on technique creatives!</a>
</h1>

css：

@import url(http://fonts.googleapis.com/css?family=Roboto:400,500,600,700);
body{
margin: auto;
padding: 25px;
background: #7abde0;
}
h1{
width: 60%;
margin: 100px auto;
font-style: italic;
font-family: "Rotobo",sans-serif;
font-weight: 800;
text-transform: uppercase;
text-decoration: none;
}
.title a{
color: #222;
font-size: 1.75em;
line-height: 1.15em;
background-image: linear-gradient(to right,rgba(255,255,255,0) 50%, #ddd 50%);
background-size: 200.22% auto;
background-position: 0% 0;
/* 过渡动画 */
transition: background-position 0.5s ease-out;
}
.title a:hover{
background-position: -99.99% 0;
}