时间戳

首页 > 解决方案 > 波纹效果动画在我的 HTML 代码中不起作用

html - 波纹效果动画在我的 HTML 代码中不起作用

问题描述

这是我的 HTML 代码，它位于 body 标记中。HTML 代码：

<div calss="wapper">
<div class="box">
  <span class="animate"></span>
    <div class="img-area">
      <img src="../picture/pic1.jpeg" alt="">
    </div>
    <h2>Abu Jafor</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, sequi.</p>
    <p class="social">
      <i class="fa fa-youtube"></i>
      <i class="fa fa-linkedin"></i>
      <i class="fa fa-twitter"></i>
    </p>

</div>

CSS 代码：

.animation 是我的动画类名。它不会影响我的 HTML 代码。

.animate{
width: 5px;
height: 5px;
background: rgba(255, 255, 255,, 0.1);
display: inline-block;
border-radius: 100%;
animation: ripple 0.6s linear infinite;
}


@@keyframes ripple {

 0%{
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1),
              0 0 0 60px rgba(255, 255, 255, 0.1),
              0 0 0 120px rgba(255, 255, 255, 0.1),
              0 0 0 180px rgba(255, 255, 255, 0.1);
 }

100%{
box-shadow: 0 0 0 20 rgba(255, 255, 255, 0.1),
            0 0 0 120px rgba(255, 255, 255, 0.1),
            0 0 0 240px rgba(255, 255, 255, 0.1),
            0 0 0 360px rgba(255, 255, 255, 0.1);
}

}

你能帮我找出问题吗？

标签： htmlcss

解决方案

请试试这个，

编辑：

  • @@keyframes{...}波纹变化以@keyframes ripple{...}消除额外的@
  • <div calss="wapper">更改类的拼写。
  • 添加ease-in-out到平滑过渡
  • alternate;动画先向前播放，再向后播放
  • 给body加一个背景，就是body{background:#888;}知道涟漪效应。
 animation: ripple 0.6s ease-in-out infinite alternate;


.animate{
  width: 15px;
  height: 15px;
  background: rgba(255, 255, 255,, 0.1);
  display: inline-block;
  border-radius: 100%;
  animation: ripple 0.6s ease-in-out infinite alternate;
}
body{
  background:#888;
}

@keyframes ripple {

 0%{
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1),
              0 0 0 60px rgba(255, 255, 255, 0.1),
              0 0 0 120px rgba(255, 255, 255, 0.1),
              0 0 0 180px rgba(255, 255, 255, 0.1);
 }

 100%{
  box-shadow: 0 0 0 20 rgba(255, 255, 255, 0.1),
              0 0 0 120px rgba(255, 255, 255, 0.1),
              0 0 0 240px rgba(255, 255, 255, 0.1),
              0 0 0 360px rgba(255, 255, 255, 0.1);
 }

}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="wapper">
<div class="box">
  <span class="animate"></span>
    <div class="img-area">
      <img src="https://dummyimage.com/50x50/00ff00/fff&text=Logo" alt="">
    </div>
    <h2>Abu Jafor</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, sequi.</p>
    <p class="social">
      <i class="fa fa-youtube"></i>
      <i class="fa fa-linkedin"></i>
      <i class="fa fa-twitter"></i>
    </p>

</div>
</div>

推荐阅读