css3中文字“走”出来的效果

最新推荐文章于 2024-08-21 16:13:13 发布

liying123466

最新推荐文章于 2024-08-21 16:13:13 发布

阅读量2.6k

点赞数

<!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> 这是我的个人博客