html5css3鼠标悬停动画冒泡提示框

2020-10-24 15:01 10 抢沙发小逸博客 0

Mr-XiaoYi 走在天边捉一只爱分享爱讨论的小逸

效果展示

写上你想写的东西

代码源码

不会玩的修改文字直接放到你想要的位置


  <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>XiaoYi</h2>  <!--标题-->
    <p>写上你想写的东西</p>  <!--这里修改内容-->
   </div> 
  </div>  
 </body>
</html>

「点点赞赏，手留余香」

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

给Mr-XiaoYi打赏

予人玫瑰，手有余香