css3中文字“走”出來的效果
阿新 • • 發佈：2019-01-06
<!DOCTYPE html>
<html>
<head>
<title>文字從一個地方走出來的效果</title>
<style type="text/css">
.banner1{
width:234px;
height:34px;
border-radius:40px;
position:absolute;
top:400px;
left:600px;
}
.banner1 a{
display:inline-block;
width:30px;
height:30px;
line-height:30px;
border-radius:50%;
border:2px solid lightblue;
position:absolute;
left:0px;top:0px;
background:lightgreen;
color:#fff;
text-align:center;
text-decoration:none;
cursor:pointer;
z-index:2;
}
.banner1 a:hover + span{
-webkit-transform:translateX(40px);
opacity:1;
}
.banner1 span{
display:inline-block;
width:auto;
padding:0 20px;
height:30px;line-height:30px;
background:lightblue;
border-radius:30px;
text-align: center;
color:#fff;
position:absolute;
top:2px;
opacity:0;
-webkit-transition:all 1s;
-webkit-transform:translateX(80px);
}
</style>
</head>
<body>
<div class="banner1">
<a href="javascript:;">博</a>
<span>這是我的個人部落格</span>
</div>
</body>
</html>這是我的個人部落格
<html>
<head>
<title>文字從一個地方走出來的效果</title>
<style type="text/css">
.banner1{
width:234px;
height:34px;
border-radius:40px;
position:absolute;
top:400px;
left:600px;
}
.banner1 a{
display:inline-block;
width:30px;
height:30px;
line-height:30px;
border-radius:50%;
border:2px solid lightblue;
position:absolute;
left:0px;top:0px;
background:lightgreen;
color:#fff;
text-align:center;
text-decoration:none;
cursor:pointer;
z-index:2;
}
.banner1 a:hover + span{
-webkit-transform:translateX(40px);
opacity:1;
}
.banner1 span{
display:inline-block;
width:auto;
padding:0 20px;
height:30px;line-height:30px;
background:lightblue;
border-radius:30px;
text-align: center;
color:#fff;
position:absolute;
top:2px;
opacity:0;
-webkit-transition:all 1s;
-webkit-transform:translateX(80px);
}
</style>
</head>
<body>
<div class="banner1">
<a href="javascript:;">博</a>
<span>這是我的個人部落格</span>
</div>
</body>
</html>這是我的個人部落格