鼠标悬停显示文字框效果html5css3

2020-10-24 15:01 84 抢沙发小王总博客 0

小王总 爱笑的小王总

动画冒泡效果采用HTML5和CSS3所写的鼠标悬停之后动画提示框，冒泡效果！

效果展示

写上你想写的东西

完整代码

<style>	
.inner {
  background: #09c999;
  padding: 1em;
  border-radius: 10px;
  width: 250px;
  clip-path: circle(10% at 90% 20%);
  transition: all .5s ease-in-out;
  cursor: pointer;
}
.inner:hover {
  clip-path: circle(75%);
  background: #20a0ff;
}
.inner h1 {
  color: white;
  margin: 0;
}
.inner p {
  color: white;
  font-size: .8rem;
}
.inner span {
  float: right;
  color: white;
  font-weight: bold;
  transition: color .5s;
  position: relative;
  margin-right: 4%;
  line-height:12px;
  font-size:24px;
}
.inner:hover span {
  color: rgba(255, 255, 255, 0);
}
</style>
 </head>  
 <body> 
  <div class="container"> 
   <div class="inner"> 
    <span>i</span> 
    <h2>小王总博客</h2>  <!--标题-->
    <p>写上你想写的东西</p>  <!--这里修改内容-->
   </div> 
  </div>  
 </body>
</html>

完整内容，可以直接复制到自己网站使用！

「点点赞赏，手留余香」

还没有人赞赏，快来当第一个赞赏的人吧！

给小王总打赏

予人玫瑰，手有余香