实例篇，一个代码文件。
html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hover动画</title>
<link rel="stylesheet" href="./hover-anima.css">
</head>
<body>
<div class="main-container">
<h3>1.Hover动画</h3>
<h5>1-1大小变化</h5>
<div class="hover-box">
<span class="btn-big">大</span>
<span class="btn-small">小</span>
</div>
<h5>1-2形状变化</h5>
<div class="hover-box">
<span class="btn-skew-l">skew-l</span>
<span class="btn-skew-r">skew-r</span>
<span class="btn-skew-lt">skew-lt</span>
<span class="btn-skew-rt">skew-rt</span>
<span class="btn-skew-lb">skew-lb</span>
<span class="btn-skew-rb">skew-rb</span>
</div>
<h5>1-3旋转角度变化</h5>1-4
<div class="hover-box">
<span class="btn-rotate-big-l">rotate-big-l</span>
<span class="btn-rotate-big-r">rotate-big-r</span>
<span class="btn-rotate45">rotate45</span>
<span class="btn-rotate90">rotate90</span>
<span class="btn-rotate135">rotate135</span>
<span class="btn-rotate180">rotate180</span>
<span class="btn-rotate360">rotate360</span>
<span class="btn-rotate90-anim">btn-rotate90-anim</span>
</div>
<h5>1-4位移变化</h5>
<div class="hover-box">
<span class="move-up">up</span>
<span class="move-down">down</span>
<span class="move-left">left</span>
<span class="move-right">right</span>
</div>
<h5>1-4边框阴影变化</h5>
<div class="hover-box">
<span class="border-out">out</span>
<span class="border-in">in</span>
<span class="border-write">write</span>
<span class="border-radius">radius</span>
<span class="border-shadow">shadow</span>
</div>
<h3>2.颜色动画效果</h3>
<h5>2-1颜色快变化</h5>
<div class="color-box">
<span class="color-block-top">block-top</span>
<span class="color-block-bottom">block-bottom</span>
<span class="color-block-left">block-left</span>
<span class="color-block-right">block-right</span>
<span class="color-block-center1">block-center1</span>
<span class="color-block-center2">block-center2</span>
<span class="color-block-vertical1">block-vertical1</span>
<span class="color-block-vertical2">block-vertical2</span>
</div>
<h5>2-2上下划线变化</h5>
<div class="color-box">
<span class="line-top-left">top-left</span>
<span class="line-top-right">top-right</span>
<span class="line-top-out">top-out</span>
<span class="line-top-in">top-in</span>
<span class="line-bottom-left">bottom-left</span>
<span class="line-bottom-right">bottom-right</span>
<span class="line-bottom-out">bottom-out</span>
<span class="line-bottom-in">bottom-in</span>
</div>
<h5>2-3箭头动画</h5>
<div class="color-box">
<span class="arrow-t">arrow-top</span>
<span class="arrow-b">arrow-bottom</span>
<span class="arrow-l">arrow-left</span>
<span class="arrow-r">arrow-right</span>
<span class="arrow-body-t">arrow-body-t</span>
<span class="arrow-body-b">arrow-body-b</span>
<span class="arrow-body-l">arrow-body-l</span>
<span class="arrow-body-r">arrow-body-r</span>
</div>
<h3>3.复杂动画</h3>
<h5>3-1闪烁效果</h5>
<div class="anima-box">
<span class="flash">flash</span>
<span class="alarm">alarm</span>
</div>
</div>
</body>
</html>
css部分
h3{ margin-left: 20px;font-size: 1.2em; }
h5{ margin: 10px 0 10px 30px; }
.hover-box, .color-box, .anima-box{ border: 2px solid #333; }
.main-container span{
display: inline-block;
height: 40px;
min-width: 80px;
line-height: 40px;
text-align: center;
cursor: pointer;
background: #ccc;
color: #333;
margin: 10px;
}
.hover-box span{
transition: all .4s;
-moz-transition: all .4s; /* Firefox 4 */
-webkit-transition: all .4s; /* Safari 和 Chrome */
-o-transition: all .4s; /* Opera */
}
.btn-big:hover{
transform: scale(1.2);
}
.btn-small:hover{
transform: scale(0.8);
}
.btn-skew-lt, .btn-skew-rt{
transform-origin: 0 100%;
}
.btn-skew-lb, .btn-skew-rb{
transform-origin: 100% 0;
}
.btn-skew-l:hover{
transform: skew(15deg);
}
.btn-skew-r:hover{
transform: skew(-15deg);
}
.btn-skew-lt:hover{
transform: skew(15deg);
}
.btn-skew-rt:hover{
transform: skew(-15deg);
}
.btn-skew-lb:hover{
transform: skew(-15deg);
}
.btn-skew-rb:hover{
transform: skew(15deg);
}
.btn-rotate-big-l:hover{
transform: scale(1.2) rotate(-10deg);
}
.btn-rotate-big-r:hover{
transform: scale(1.2) rotate(10deg);
}
.btn-rotate45:hover{
transform: rotate(45deg);
}
.btn-rotate90:hover{
transform: rotate(90deg);
}
.btn-rotate135:hover{
transform: rotate(135deg);
}
.btn-rotate180:hover{
transform: rotate(180deg);
}
.btn-rotate360:hover{
transform: rotate(360deg);
}
.btn-rotate90-anim:hover{
animation: rotate 1s infinite;
-webkit-animation: rotate 1s infinite;
}
@keyframes rotate {
0% { transform: rotate(0deg) scale(1); }
50% { transform: rotate(90deg) scale(1.2); }
100% { transform: rotate(0deg) scale(1); }
}
.move-up:hover{
transform: translate(0, -10px);
}
.move-down:hover{
transform: translate(0, 10px);
}
.move-left:hover{
transform: translate(-10px, 0);
}
.move-right:hover{
transform: translate(10px, 0);
}
.border-out:hover{
box-shadow: 0 0 0 5px #4d4d4d;
}
.border-in:hover{
box-shadow: 0 0 0 5px #4d4d4d inset;
}
.border-write:hover{
box-shadow: inset 0 0 0 20px #fff;
}
.border-radius:hover{
border-radius: 20px;
}
.border-shadow:hover{
box-shadow: 0 20px 10px -10px rgba(0, 0, 0, 0.5);
transform: scale(1.1);
}
/*颜色变化*/
/*当前元素设置相对定位*/
.color-box span{
position: relative;
transition: all .3s;
z-index: 1;
}
/*颜色块设置绝对定位*/
.color-block-top:before, .color-block-bottom:before, .color-block-left:before, .color-block-right:before, .color-block-center1:before, .color-block-vertical1:before, .color-block-center2:before, .color-block-center2:after, .color-block-vertical2:before, .color-block-vertical2:after{
position: absolute;
transition: all .3s;
content: '';
display: block;
background: #09f;
z-index: -1;
width: 100%;
height: 100%;
}
/*颜色从上往下变化*/
.color-block-top:before{
bottom: 0;
left: 0;
transform-origin: 50% 0;
transform: scaleY(0);
}
/*颜色从下往上变化*/
.color-block-bottom:before{
bottom: 0;
left: 0;
transform-origin: 50% 100%;
transform: scaleY(0);
}
/*颜色从左往右变化*/
.color-block-left:before{
bottom: 0;
left: 0;
transform-origin: 0 50%;
transform: scaleX(0);
}
/*颜色从右往左变化*/
.color-block-right:before{
bottom: 0;
left: 0;
transform-origin: 100% 50%;
transform: scaleX(0);
}
/*水平中间向两边*/
.color-block-center1:before{
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
transform: scaleX(0);
}
/*垂直中间向两边*/
.color-block-vertical1:before{
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
transform: scaleY(0);
}
/*水平两边向中间*/
.color-block-center2:before{
top: 0;
left: 0;
transform-origin: 0 50%;
transform: scaleX(0);
}
.color-block-center2:after{
top: 0;
right: 0;
transform-origin: 100% 50%;
transform: scaleX(0);
}
/*垂直两边向中间*/
.color-block-vertical2:before{
top: 0;
left: 0;
transform-origin: 50% 0;
transform: scaleY(0);
}
.color-block-vertical2:after{
bottom: 0;
right: 0;
transform-origin: 50% 100%;
transform: scaleY(0);
}
/*垂直方向进来的:before变化*/
.color-block-top:hover:before, .color-block-bottom:hover:before, .color-block-vertical1:hover:before{
transform: scaleY(1);
}
/*水平方向进来的:before变化*/
.color-block-left:hover:before, .color-block-right:hover:before, .color-block-center1:hover:before{
transform: scaleX(1);
}
/*水平方向:before变化 50%*/
.color-block-center2:hover:before, .color-block-center2:hover:after{
transform: scaleX(.51);
}
/*垂直方向:before变化 50%*/
.color-block-vertical2:hover:before, .color-block-vertical2:hover:after{
transform: scaleY(.51);
}
/*当前元素文字颜色变化*/
.color-box span:hover{
color: #fff;
}
/*上下划线设置绝对定位*/
.line-top-left:before, .line-top-right:before, .line-bottom-left:before, .line-bottom-right:before, .line-top-out:before, .line-top-in:before, .line-top-in:after, .line-bottom-out:before, .line-bottom-in:after, .line-bottom-in:before{
position: absolute;
transition: all .3s;
content: '';
display: block;
height: 4px;
width: 100%;
background: #09f;
z-index: -1;
transform: scaleX(0);
}
/*上划线从左往右*/
.line-top-left:before{
top: 0;
left: 0;
transform-origin: 0 0;
}
/*上划线从右往左*/
.line-top-right:before{
top: 0;
right: 0;
transform-origin: 100% 0;
}
/*上划线从内向两边*/
.line-top-out:before{
top: 0;
margin: auto;
}
/*上划线从两边向内*/
.line-top-in:before{
top: 0;
left: 0;
transform-origin: 0 0;
}
.line-top-in:after{
top: 0;
right: 0;
transform-origin: 100% 0;
}
/*下划线从左往右*/
.line-bottom-left:before{
bottom: 0;
left: 0;
transform-origin: 0 100%;
}
/*下划线从右往左*/
.line-bottom-right:before{
bottom: 0;
right: 0;
transform-origin: 100% 100%;
}
/*下划线从内向两边*/
.line-bottom-out:before{
bottom: 0;
left: 0;
margin: auto;
}
/*下划线从两边向内*/
.line-bottom-in:before{
bottom: 0;
left: 0;
transform-origin: 0 100%;
}
.line-bottom-in:after{
bottom: 0;
left: 0;
transform-origin: 100% 100%;
}
/*水平方向:before的变化*/
.line-top-left:hover:before, .line-top-right:hover:before, .line-bottom-left:hover:before, .line-bottom-right:hover:before, .line-top-out:hover:before, .line-bottom-out:hover:before{
transform: scaleX(1);
}
.line-top-in:hover:before, .line-top-in:hover:after, .line-bottom-in:hover:before, .line-bottom-in:hover:after{
transform: scaleX(.51);
}
/*初始化箭头样式*/
.arrow-t:before, .arrow-b:before, .arrow-l:before, .arrow-r:before, .arrow-body-t:before, .arrow-body-b:before, .arrow-body-l:before, .arrow-body-r:before{
position: absolute;
transition: all .3s;
content: "";
display: block;
width: 0;
height: 0;
margin: auto;
border-style: solid;
z-index: -1;
}
.arrow-t:before, .arrow-body-b:before{
top: 0;
left: 0;
right: 0;
border-width: 0 10px 10px 10px;
border-color: transparent transparent #ccc transparent;
}
.arrow-b:before, .arrow-body-t:before{
bottom: 0;
left: 0;
right: 0;
border-width: 10px 10px 0 10px;
border-color: #ccc transparent transparent transparent;
}
.arrow-l:before, .arrow-body-r:before{
top: 0;
bottom: 0;
left: 0;
border-width: 10px 10px 10px 0;
border-color: transparent #ccc transparent transparent;
}
.arrow-r:before, .arrow-body-l:before{
top: 0;
bottom: 0;
right: 0;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent #ccc;
}
/*hover后的效果*/
.arrow-t:hover:before, .arrow-body-t:hover, .arrow-body-b:hover:before{
transform: translateY(-10px);
}
.arrow-b:hover:before, .arrow-body-b:hover, .arrow-body-t:hover:before{
transform: translateY(10px);
}
.arrow-l:hover:before, .arrow-body-l:hover, .arrow-body-r:hover:before{
transform: translateX(-10px);
}
.arrow-r:hover:before, .arrow-body-r:hover, .arrow-body-l:hover:before{
transform: translateX(10px);
}
/*闪烁动画*/
.flash:hover{
animation: flash .4s ease;
}
@keyframes flash {
0%, 50%, 100% {
opacity: 1;
}
25%, 75% {
opacity: 0;
}
}
.alarm:hover{
animation: alarm 1s ease;
}
@keyframes alarm {
0% {
transform: scale(1);
}
10%, 20% {
transform: scale(0.9) rotate(-3deg);
}
30%, 50%, 70%, 90% {
transform: scale(1.1) rotate(3deg);
}
40%, 60%, 80% {
transform: scale(1.1) rotate(-3deg);
}
100% {
transform: scale(1) rotate(0deg);
}
}
直接复制到自己的新建文件夹查看即可。
实例二：3D旋转导航条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3d导航</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
/*取消ul的默认样式*/
list-style: none;
margin: 90px auto;
width: 800px;
}
ul li {
width: 120px;
height: 50px;
float: left;
position: relative;
/*设置子元素显示方式为3d*/
transform-style:preserve-3d;
/*设置旋转的过渡效果*/
transition: transform 1s;
}
li a {
position: absolute;
/*设置了相对定位的元素，默认具有块元素的特点*/
/*取消a链接的默认下划线*/
text-decoration: none;
text-align: center;
line-height: 50px;
color: #fff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
top: 0;
left: 0;
width: 100%;
height: 100%;
}
li a:first-child {
transform: translateZ(25px);
background-color: #ff5544;
}
li a:last-child {
background-color: skyblue;
transform: rotateX(-90deg) translateZ( 25px );
}
li:hover {
transform: rotateX(90deg);
}
</style>
</head>
<body>
<ul>
<li>
<a href="#">宇石网络</a>
<a href="#">前端程序员</a>
</li>
<li>
<a href="#">宇石网络</a>
<a href="#">前端程序员</a>
</li><li>
<a href="#">宇石网络</a>
<a href="#">前端程序员</a>
</li><li>
<a href="#">宇石网络</a>
<a href="#">前端程序员</a>
</li><li>
<a href="#">宇石网络</a>
<a href="#">前端程序员</a>
</li>
</ul>
</body>
</html>
