CSS3实现可翻转的hover效果CSS3实现伪类hover离开时平滑过渡效果示例CSS3鼠标hover图片遮罩层文字动画特效5种纯CSS3鼠标hover按钮动画特效源码CSS3制作hover下划线动画16种基于css3 Bootstrap图片hover悬停遮罩效果jQuery+CSS3实现的遮罩图片hover翻转效果源码css3实现图片遮罩效果鼠标hover以后出现文字CSS3实现的鼠标经过按钮后图标翻转特效源码纯CSS3 3D魔方翻转动画特效源码纯css3实现的鼠标滑过图片左右3d翻转效果源码

 /*基础样式*/ html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0 auto; text-align: center; background-color: #FFFFCC; } ul { list-style: none; float: left; margin: 0; padding: 0; } a { cursor: pointer; } div { display: inline-block; margin: 40px; } ul li { width: 200px; height: 40px; line-height: 40px; text-align: center; margin: 10px; background-color: #747474; border-radius: 4px; color: white; } dis-block{ display: block; } /*#nav1鼠标hover效果 前后翻转*/ #nav1 ul li { transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transition: 0.5s; -webkit-transition: 0.5s; -ms-transition: 0.5s; -moz-transition: 0.5s; } #nav1 ul li:hover { transform: translateZ(30px) rotateX(360deg) scale(1.1); -webkit-transform: translateZ(30px) rotateX(360deg) scale(1.1); -ms-transform: translateZ(30px) rotateX(360deg) scale(1.1); -moz-transform: translateZ(30px) rotateX(360deg) scale(1.1); } /*#nav2鼠标hover效果 上浮*/ #nav2 ul li { transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transition: 0.5s; -webkit-transition: 0.5s; -ms-transition: 0.5s; -moz-transition: 0.5s; } #nav2 ul li:hover { transform: translateZ(30px) scale(1.1); -webkit-transform: translateZ(30px) scale(1.1); -ms-transform: translateZ(30px) scale(1.1); -moz-transform: translateZ(30px) scale(1.1); } /*#nav4鼠标hover效果 下浮*/ #nav4 ul li { transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transition: 0.5s; -webkit-transition: 0.5s; -ms-transition: 0.5s; -moz-transition: 0.5s; } #nav4 ul li:hover { transform: translateZ(30px) scale(0.9); -webkit-transform: translateZ(30px) scale(0.9); -ms-transform: translateZ(30px) scale(0.9); -moz-transform: translateZ(30px) scale(0.9); } /*#nav3鼠标hover效果 左右翻转*/ #nav3 ul li { transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transition: 0.5s; -webkit-transition: 0.5s; -ms-transition: 0.5s; -moz-transition: 0.5s; } #nav3 ul li:hover { transform: translateZ(30px) rotateY(360deg) scale(1.1); -webkit-transform: translateZ(30px) rotateY(360deg) scale(1.1); -ms-transform: translateZ(30px) rotateY(360deg) scale(1.1); -moz-transform: translateZ(30px) rotateY(360deg) scale(1.1); } /*button1 hover效果*/ btn1 { background-color: #1AAB8A; color: white; font-size: 18px; height: 60px; width: 150px; border: 0; transition: 800ms ease all; outline: none; position: relative; } btn1:hover { background: #fff; color: #1AAB8A; } btn1:before, .btn1:after { content: ''; position: absolute; height: 2px; width: 0; background: #1AAB8A; transition: 400ms ease all; } btn1:before { right: 0; top: 0; } btn1:after { left: 0; bottom: 0; } btn1:hover:before, .btn1:hover:after { width: 100%; transition: 800ms ease all; } 

前后翻转
home
js
jquery
div+css
css3
上浮
home
js
jquery
div+css
css3
下浮
home
js
jquery
div+css
css3
左右翻转
home
js
jquery
div+css
css3
按钮hover效果
hover!