使用CSS3的动画特效和JS
双击后头像摇动及显示拍一拍
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.containor{
width: 550px;
height: 500px;
border: 1px solid #cccc;
position: relative;
background-color: #ccc;
}
.containor>img{
width: 50px;
height: 50px;
border-radius: 8px;
}
.containor>p{
border: 1px soli #ccc;
background-color: white;
display: inline-block;
border-radius: 5px;
color:black;
padding: 5px;
font-size: 14px;
}
.containor>img:nth-child(1){
position: absolute;
left: 10px;
top:20px;
}
.containor>img:nth-child(2){
position: absolute;
right: 10px;
top:100px;
}
.containor .one{
position: absolute;
top:18px;
left: 70px;
}
.containor .two{
position: absolute;
top:97px;
right: 70px;
}
.containor .hePad{
display: none;
position: absolute;
top:150px;
left: 200px;
background-color: darkgrey;
opacity: 0.4;
}
.containor .mePad{
display: none;
position: absolute;
top:150px;
left: 200px;
background-color: darkgrey;
opacity: 0.4;
}
@keyframes bePad{
0% {
transform: rotate(0deg);
}
20% {
transform: rotate(20deg);
}
40% {
transform: rotate(-20deg);
}
60% {
transform: rotate(20deg);
}
80% {
transform: rotate(-20deg);
}
100% {
transform: rotate(0deg);
}
}
@-webkit-@-webkit-keyframes bePad{ /* Safari and Chrome */
0% {
transform: rotate(0deg);
}
20% {
transform: rotate(20deg);
}
40% {
transform: rotate(-20deg);
}
60% {
transform: rotate(20deg);
}
80% {
transform: rotate(-20deg);
}
100% {
transform: rotate(0deg);
}
}
.containor .he{
transform-origin: bottom;
}
.containor .me{
transform-origin: bottom;
}
</style>
<script>
window.onload=function(){
var he=document.querySelector(".he");
var me=document.querySelector(".me");
var hePad=document.querySelector(".hePad");
var mePad=document.querySelector(".mePad");
he.ondblclick=function(){
this.style.animation=" bePad 0.5s ";
hePad.style.display="block";
setTimeout(()=>{
this.style.animation=" ";
hePad.style.display="";
},2000);
};
me.ondblclick=function(){
this.style.animation=" bePad 0.5s ";
mePad.style.display="block";
setTimeout(()=>{
this.style.animation=" ";
mePad.style.display="";
},2000);
}
};
</script>
</head>
<body>
<div class="containor">
<img src="./two.jpg" alt="" class="he">
<img src="./one.jpg" alt="" class="me">
<p class="one">*********************</p>
<p class="two">嘿嘿嘿</p>
<p class="hePad">榨汁机拍了拍汁</p>
<p class="mePad">汁拍了拍榨汁机</p>
</div>
</body>
</html>