<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover.css案例</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-V06iGeOYiHqaJG18vU/udsyVfgcm8Pgax9HmoZh65R0FrT9X2GZZ8w2ZQcZkzZGV" crossorigin="anonymous">
<link rel="stylesheet" href="./css/hover.css">
<style>
body {
background-color: #ececea;
margin: 20px 40px;
}
.item {
width: 180px;
height: 120px;
background-color: rgb(8, 100, 100);
color: #eee;
text-align: center;
line-height: 120px;
font-weight: bold;
margin: 20px;
}
.item1 {
width: 180px;
height: 120px;
background-color: rgb(193, 43, 48);
color: #eee;
text-align: center;
line-height: 120px;
font-weight: bold;
margin: 20px;
}
.item2 {
width: 180px;
height: 120px;
background-color: rgb(157, 205, 99);
color: #333;
text-align: center;
line-height: 120px;
font-weight: bold;
margin: 20px;
}
.item3 {
width: 180px;
height: 120px;
background-color: #ccc;
color: #7430b0;
text-align: center;
line-height: 120px;
font-weight: bold;
margin: 20px;
}
</style>
</head>
<body>
<div id="hovercss" class="container">
<div class="block2d">
<h2>2D效果</h2>
<div class="item hvr-grow " data-bs-toggle="tooltip" data-bs-placement="top" title="从中心点放大">Grow</div>
<div class="item hvr-shrink " data-bs-toggle="tooltip" data-bs-placement="top" title="从中心点缩小">Shrink</div>
<div class="item hvr-pulse " data-bs-toggle="tooltip" data-bs-placement="top" title="循环从中心点放大缩小">Pulse</div>
<div class="item hvr-pulse-grow" data-bs-toggle="tooltip" data-bs-placement="top"
title="循环从中心点只放大，速度更快，但是幅度较小">
Pulsegrow
</div>
<div class="item hvr-pulse-shrink" data-bs-toggle="tooltip" data-bs-placement="top"
title="循环从中心点只缩小，速度快，幅度小">
Pulseshrink
</div>
<div class="item hvr-push" data-bs-toggle="tooltip" data-bs-placement="top" title="缩小然后复原">push</div>
<div class="item hvr-pop" data-bs-toggle="tooltip" data-bs-placement="top" title="放大然后复原">pop</div>
<div class="item hvr-bounce-in" data-bs-toggle="tooltip" data-bs-placement="top" title="逐渐放大(两次)，然后保持最大状态">
bouncein
</div>
<div class="item hvr-bounce-out" data-bs-toggle="tooltip" data-bs-placement="top" title="逐渐缩小(两次),然后保持最小状态">
bounceout
</div>
<div class="item hvr-rotate" data-bs-toggle="tooltip" data-bs-placement="top" title="顺时针旋转一定角度，然后暂定在那个位置">
rotate
</div>
<div class="item hvr-grow-rotate" data-bs-toggle="tooltip" data-bs-placement="top"
title="顺时针旋转一定角度，并且放大，然后暂定在那个位置">
growrotate
</div>
<div class="item hvr-float" data-bs-toggle="tooltip" data-bs-placement="top" title="向上移动一段距离">float</div>
<div class="item hvr-sink" data-bs-toggle="tooltip" data-bs-placement="top" title="向下移动一段距离">sink</div>
<div class="item hvr-bob" data-bs-toggle="tooltip" data-bs-placement="top" title="向上移动一段距离，然后开始循环上下浮动">bob
</div>
<div class="item hvr-hang" data-bs-toggle="tooltip" data-bs-placement="top" title="向下移动一段距离，然后开始循环上下浮动">hang
</div>
<div class="item hvr-skew" data-bs-toggle="tooltip" data-bs-placement="top"
title="由矩形逐渐变为平行四边形(相当于拽着右上和左下拉伸)">
skew</div>
<div class="item hvr-skew-forward" data-bs-toggle="tooltip" data-bs-placement="top" title="底边不动，上边向右拉">
skewforward</div>
<div class="item hvr-skew-backward" data-bs-toggle="tooltip" data-bs-placement="top" title="底边不动，上边向左拉">
skewbackward</div>
<div class="item hvr-wobble-vertical" data-bs-toggle="tooltip" data-bs-placement="top" title="上下晃动几下后停止">
wobblevertical</div>
<div class="item hvr-wobble-horizontal" data-bs-toggle="tooltip" data-bs-placement="top" title="左右晃动几下后停止">
wobblehorizontal</div>
<div class="item hvr-wobble-to-bottom-right" data-bs-toggle="tooltip" data-bs-placement="top"
title="左上，右下晃动几下后停止">
wobbletobottomright</div>
<div class="item hvr-wobble-to-top-right" data-bs-toggle="tooltip" data-bs-placement="top"
title="右上左下晃动几下后停止">
wobbletotopright</div>
<div class="item hvr-wobble-top" data-bs-toggle="tooltip" data-bs-placement="top" title="底边不动，上边左右晃动几下后停止">
wobbletop
</div>
<div class="item hvr-wobble-bottom" data-bs-toggle="tooltip" data-bs-placement="top" title="上边不动，下边晃动几下后停止">
wobblebottom
</div>
<div class="item hvr-wobble-skew" data-bs-toggle="tooltip" data-bs-placement="top" title="中间不动，上下左右晃动几下后停止">
wobbleskew</div>
<div class="item hvr-buzz" data-bs-toggle="tooltip" data-bs-placement="top" title="小幅度来回摇啊摇，就跟商场的瘦腿机一样">buzz
</div>
<div class="item hvr-forward" data-bs-toggle="tooltip" data-bs-placement="top" title="向右平移一段距离">forward
</div>
<div class="item hvr-buzz-out" data-bs-toggle="tooltip" data-bs-placement="top" title="小幅度来回摇几下停止">buzzout
</div>
<div class="item hvr-backward" data-bs-toggle="tooltip" data-bs-placement="top" title="向左平移一段距离">backward
</div>
</div>
<div class="background">
<h2>背景(跟做ppt切换下一页的动画一样)</h2>
<div class="item1 hvr-fade" data-bs-toggle="tooltip" data-bs-placement="top" title="背景逐渐变为其他颜色">fade
</div>
<div class="item1 hvr-back-pulse" data-bs-toggle="tooltip" data-bs-placement="top"
title="背景逐渐变为其他颜色，并且一闪一闪">
backpulse
</div>
<div class="item1 hvr-sweep-to-bottom" data-bs-toggle="tooltip" data-bs-placement="top"
title="背景从上往下逐渐变为其他颜色">
sweeptobottom
</div>
<div class="item1 hvr-sweep-to-right" data-bs-toggle="tooltip" data-bs-placement="top"
title="背景从左往右逐渐变为其他颜色">
sweeptoright
</div>
