Maison > Article > interface Web > CSS3 pour obtenir un effet d'onde de choc
CSS3 pour obtenir un effet d'onde de choc
- 小云云original
- 2018-01-13 10:00:171631parcourir
Cet article présente principalement l'exemple de code CSS3 pour obtenir un effet d'onde de choc. L'éditeur pense que c'est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.
Récemment, l'effet d'onde de choc suivant apparaîtra lorsque vous cliquerez sur de nombreux boutons du navigateur. Par curiosité, j'ai étudié et implémenté cet effet en me référant aux informations sur Internet.
Idée d'implémentation :
Observez que la vague passe de petite à grande et que les changements d'attributs CSS3 impliqués incluent la largeur, la hauteur , à gauche, en haut, opacité, réalisez d'abord la couche d'onde de choc via une pseudo-classe, et en même temps, vous devez définir la position du point central avant et après l'onde de choc (un peu de connaissances mathématiques sont impliquées ici : dessinez une image pour calculer la position de deux points), et enfin définir la durée de transition : 0 pour obtenir des changements instantanés, ps learning Vous pouvez utiliser a:active pour simuler l'effet du clic de la souris
Dessinez simplement l'image suivante (très simple ) :
Le code implémenté :
<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>Effet obtenu :
Recommandations associées :
dessin css3 Partage d'un exemple d'animation de cercle de chargement rond
javascript, html5, css3 fenêtre pop-up personnalisée
Parlez en détail de l'animation des effets d'animation CSS3 Séquence
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!