Dragon

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

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

效果展示


i

写上你想写的东西


代码源码

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


  <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给Mr-XiaoYi打赏
×
予人玫瑰,手有余香
  • 2
  • 5
  • 10
  • 20
  • 50
2
支付

本文为原创文章,版权归所有,欢迎分享本文,转载请保留出处!

2020-10-24

2020-10-24

发表评论

表情 贴图 链接 私密 格式 签到
扫一扫二维码分享