Question

按钮有以下内容：

＆＃13;

$(document).ready(function() {
	$('.sm-hover-ripple').hover(function() {
		var $this = $(this),
			$content = $this.html(),
			$height = $this.css('height').replace('px', ''),
			$width = $this.css('width').replace('px', ''),
			$padding_top = $this.css('padding-top').replace('px', ''),
			$padding_left = $this.css('padding-left').replace('px', ''),
			$padding_bottom = $this.css('padding-bottom').replace('px', ''),
			$padding_right = $this.css('padding-right').replace('px', ''),
			$background = $this.css('background');

		var $html = '' +
			'<div class="sm-button-filler" style="' +
				'height:'+ $height +'px; ' +
				'width: '+ $width +'px; ' +
				'margin: -'+ $padding_top +'px -'+ $padding_right +'px -'+ $padding_bottom +'px -'+ $padding_left +'px' +
			'">' +
				'<div class="sm-circle-hover" style="' +
					'line-height: '+ ($height / 100) * 150 +'px; ' +
					'background: '+ $background +'; ' +
					'height: '+ ($height / 100) * 150 +'px;  ' +
                    'width:'+ ($width - 10 ) +'px; ' + 
					'border-radius: '+ $height +'px; ' +
					'margin: -'+ ((($height / 100) * 150) - $height) / 2 +'px 0 0 0;' +
					'animation:pulse-width 3000ms infinite}' +
					'@keyframes pulse-width{0%{width:'+ $width +'px}25%{width: '+ ($width - 10) +'px}50%{width: '+ ($width - 5) +'px}75%{width: '+ ($width - 10) +'px}100%{width:'+ $width +'px}}' +
				'">' +
					''+ $content +'' +
				'</div>' +
			'</div>';

		$this.html('<div class="sm-button-filler" style="height:'+ $height +'px; width: '+ $width +'px; margin: -'+ $padding_top +'px -'+ $padding_right +'px -'+ $padding_bottom +'px -'+ $padding_left +'px"><div class="sm-circle-hover" style="line-height: '+ ($height / 100) * 150 +'px; background: '+ $background +'; height: '+ ($height / 100) * 150 +'px;  width: '+ ($width - 10) +'px; -webkit-border-radius: '+ $height +'px; -moz-border-radius: '+ $height +'px;-ms-border-radius:'+ $height +'px; -o-border-radius: '+ $height +'px; border-radius: '+ $height +'px; margin: -'+ ((($height / 100) * 150) - $height) / 2 +'px 0 0 0;">'+ $content +'</div></div>');
	},
	function() {
		var $this = $(this),
			$content = $this.find('.sm-circle-hover').html();

		$this.html($content);
	});
});

＆＃13;

.sm-raised-button {
  color: #fff;
  background:#2196F3;
  border: none;
  min-width: 64p;
  height: 36px;
  line-height: 36px;
  padding: 0 16px;
  margin: 8px;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  outline: none;
}

.sm-button-filler {
  background: rgba(00, 00,00, .12);
  padding: 0 5%;
  overflow: hidden;
  transition: padding 300ms ease-in-out;
  animation: pulse-padding 3000ms infinite;
  @-keyframes pulse-padding {
    0% {
      padding: 0 0px;
    }
    25% {
      padding: 0 10px;
    }
    50% {
      padding: 0 5px;
    }
    75% {
      padding: 0 10px;
    }
    100% {
      padding: 0 0px;
    }
  }
}

.sm-circle-hover {
  transition: width 300ms ease-in-out;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="sm-raised-button sm-hover-ripple">Hover ripple</button>

＆＃13;

我遗漏了所有其他浏览器前缀，但我确实拥有它们。我不知道为什么动画在这里不起作用，当你使用动画时它应该起作用。

下面是一些正在发生的事情的图片：

我希望获得的内容类似于example（在行为下是一段简短视频。它是焦点示例）。

问题在于，当我将鼠标悬停在按钮上时，动画开始并起作用，但是它没有将内容保持在中心，而是从一侧移动到另一侧。我希望有些人可以帮我把内容留在中心。

提前致谢。

Answer 1

我不明白为什么当你使用普通的CSS几乎所有时，这太复杂了：

＆＃13;

a {
  display: inline-block;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1" height="1" viewBox="0 0 2 2"><circle fill="red" cx="1" cy="1" r="1" /></svg>') no-repeat 50% 50% orange;
  background-size: 0 0;
  transition: background-size .5s, background-color .7s;
  padding: 30px;
}
a:hover {
  background-size: 100% auto;
  background-color: red;
}

＆＃13;

<a href="#">TestButton</a>

＆＃13;

当动画简化时，居中变得只是使用一些简单的CSS。

Answer 2

终于找到了对我有用的东西。不得不使用:before和:after来获得我想要的结果

＆＃13;

.sm-hover-ripple {
	z-index: 1;
	overflow: hidden;
	position: relative;
}

.sm-hover-ripple:hover:after
  animation: beat 3s ease-in-out infinite;

  @-keyframes beat {
    0%, 50%, 100% {
      transform:scale(1) translateZ(0);
    }
    25%, 75% {
      transform: scale(.95) translateZ(0);
    }
}

.sm-hover-ripple:before {
  background: rgba(00, 00, 00, .12);
  content: "";
  height: 100%;
  width: 150%;
  position: absolute;
  z-index: -2;
  margin: 0px -50%;
}

.sm-hover-ripple:after {
  content: "";
  width: 90%;
  height: 0;
  padding-top: 85%;
  object-fit: contain;
  background: blue;
  position: absolute;
  top: 100%;
  left: 50%;
  margin: -45%;
  opacity: 1;
  border-radius: 50%;
  transform: scale(0) translateZ(0));
  transition: all .2s ease-in-out;
  z-index: -1;
}

.sm-raised-button {
  color: white;
  background: blue;
  border: none;
  min-width: 64px;
  height:36px;
  line-height: 36px;
  padding: 0 16px;
  margin: 8px;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  outline: none;
}

＆＃13;

<button class="sm-raised-button sm-hover-ripple">Hover ripple</button>

＆＃13;

CSS动画关键帧不以内容为中心

2 个答案: