码迷,mamicode.com
首页 > Web开发 > 详细

css3实现悬停波浪效果

时间:2018-09-09 14:44:36      阅读:279      评论:0      收藏:0      [点我收藏+]

标签:content   ali   before   play   pac   webkit   height   伪元素   mat   

<a href="" class="a1">商家入口</a>

.a1{
  background-color: orange;
  display: inline-block;
  width: 100px;
  height: 35px;
  text-align: center;
  text-decoration: none;
  //设置好元素的定位和边界
  overflow: hidden;
  position: absolute;
}
//插入一个伪元素
.a1::before{
  content: ‘‘;
  position: absolute;
  //设置缩放为0
  transform: scale(0);
  border-radius: 50%;
  background-color: #fff;
  width: 200px;
  height: 200px;
  opacity: 0.5;
  top: -80px;left: -50px;
}
//通过指针事件和缩放的动画事件,实现波浪效果
.a1:hover::before{
  animation: 1s ani2;
}
@keyframes ani2{
  0%{
  -webkit-transform: scale(0);
  opacity: 0.5;
  }
  100%{
  -webkit-transform: scale(1);
  opacity: 0;
  }
}

css3实现悬停波浪效果

标签:content   ali   before   play   pac   webkit   height   伪元素   mat   

原文地址:https://www.cnblogs.com/webwangjie/p/9613057.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!