Dragon

动画冒泡效果采用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>

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

「点点赞赏,手留余香」

还没有人赞赏,快来当第一个赞赏的人吧!

小王总给小王总打赏
×
予人玫瑰,手有余香
  • 2
  • 5
  • 10
  • 20
  • 50
2
支付

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

2020-10-24

2020-10-24

发表评论

扫一扫二维码分享