编程知识 cdmana.com

CSS3 animation flash Effect

CSS animation Documentation

CSS animation Propriétés

Tableau des effets

Tableau des effets

Introduction

animation La propriété est une propriété abrégée,Utilisé pour définir six propriétés d'animation:

  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction

Syntaxe

animation: name duration timing-function delay iteration-count direction;
Copier le Code

Code source

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>animation</title>
</head>
<style>
  .point {
    width: 50px;
    height: 50px;
    background-color: #2ea598;
    position: relative;
    border-radius: 50%;
  }
 
  /*  Définir la couleur avant l'animation  */
  .point-flicker:after {
    background-color: #2ea598;
  }
 
  /*  Couleur après animation  */
  .point-flicker:before {
    background-color: rgba(0, 168, 253, 0.2);
  }
 
  /* Animer */
  .point-flicker:before,
  .point-flicker:after {
    content: '';
    width: 80px;
    height: 80px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -40px;
    margin-top: -40px;
    border-radius: 50%;
    animation: warn 1.5s ease-out 0s infinite;
  }
 
  @keyframes warn {
    0% {
      transform: scale(0.5);
      opacity: 1;
    }
 
    30% {
      opacity: 1;
    }
 
    100% {
      transform: scale(1.4);
      opacity: 0;
    }
  }
</style>
 
<body>
  <div class="point point-flicker"></div>
</body>
<script>
</script> 
</html>

Copier le Code

Supplément

Pour modifier la position sur la page

Oui. .point Set to position:absoulute ,Modifierleft , top Position.

.point-flicker C'est relatif. .point Pour localiser

Modifier la taille pour la redimensionner margin-left: -40px; margin-top: -40px; À la moitié de la taille correspondante

版权声明
本文为[Suisuiz]所创,转载请带上原文链接,感谢
https://cdmana.com/2021/09/20210914164426018h.html

Scroll to Top