집 >웹 프론트엔드 >CSS 튜토리얼 >충격파 효과를 얻기 위한 CSS3

충격파 효과를 얻기 위한 CSS3

小云云원래의: 2018-01-13 10:00:171646검색

이 글에서는 주로 충격파 효과를 얻기 위한 CSS3의 샘플 코드를 소개합니다. 편집자는 이것이 꽤 좋다고 생각하므로 지금 공유하고 참고용으로 제공하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

최근 브라우저 버튼을 많이 누르면 아래와 같은 충격파 효과가 나타나는데, 호기심에 이 효과를 연구하고 구현하기 위해 인터넷 정보를 참고했습니다.

구현 아이디어:

파동을 작은 것부터 큰 것까지 관찰합니다. 관련된 CSS3 속성 변경 사항은 width, height, left, top, opacity입니다. 먼저 의사 클래스를 통해 충격파 레이어를 구현합니다. 동시에 충격파 전후의 중심을 설정해야 합니다. 포인트 위치(여기에는 약간의 수학적 지식이 포함됩니다. 두 포인트의 위치를 계산하기 위해 그림을 그립니다.) 마지막으로 순간을 달성하려면 전환 기간: 0을 설정해야 합니다. 변경 사항. PS는 a:active를 사용하면 마우스 클릭 효과를 시뮬레이션할 수 있다는 것을 알게 되었습니다.

간단히 다음 그림을 그리십시오(매우 좋음):

구현된 코드:

  <html>
  <head>
  <meta charset="UTF-8">
  <title>实现冲击波--数学知识很重要</title>
  <style>
  *{
  margin:0;
  padding:0;
  box-sizing:border-box;
  }
  html,body{
  font-family:"微软雅黑";
  }
  .wave{
  position:relative;
  float:left;
  width:50%;
  height:420px;
  }
  .wave a{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  display:inline-block;
  width:120px;
  height:50px;
  /*margin-left:-60px;
  margin-top:-25px;*/
  line-height:50px;
  text-align:center;
  border-radius:5px;
  color:#fff;
  font-size:16px;
  cursor:pointer;
  /*overflow:hidden;*/
  
  }
  #wave1{
  background-color:#00BFFF;
  }
  #wave2{
  background-color:#009955;
  }
  #wave1 a{
  background-color:burlywood;
  }
  #wave2 a{/*宽度不确定长度*/
  width:50%;
  height:50px;
  background-color:cadetblue;
  }
  .wave a:after{
  /*画图
 ，假设left:0;top:0然后画出两个中心点的水平和垂直距离*/
  content: "";
  display: block;
  position: absolute;
  left: -40px;
  top: -75px;
  width: 200px;
  height: 200px;
  background: rgba(255,255,255,0.8);
  border-radius: 50%;
  opacity:0;
  transition: all 1s;
  }
  .wave a:active:after{
  /*位于中间即是a的中点*/
  width: 0; 
  height: 0; 
  left:60px; 
  top: 25px;
  opacity: 1; 
  transition-duration: 0s;
  }
  
  #wave2 a:after{
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  }
  #wave2 a:active:after{
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  }
  </style>
  </head>
  <body>
  <!--实现冲击波按钮确定长度-->
  <p class="wave" id="wave1">
  <a>点我</a>
  </p>
  <!--实现冲击波按钮不确定长度时-->
  <p class="wave" id="wave2">
  <a>点我哈哈</a>
  </p>
  </body>
  </html>

달성된 효과:

충격파 효과를 얻기 위한 CSS3

관련 기사