10个不错的css hover效果

发布于2017年2月16日 20:08:04 ，最后一次修改于2017年2月18日 16:54:30

公共部分代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>hover效果</title>
<style type="text/css" media="screen">
body {margin: 0;height: 0;background-color: #F1F1F1;}

.warp {width: 250px;height: 150px;background-color: #5e7c87;float: left;margin: 15px 15px;box-shadow: 10px 10px 5px #888888;}

.sim-button {line-height: 50px;height: 50px;text-align: center;margin-right: auto;margin-left: auto;margin-top: 50px;width: 60%;cursor: pointer;color: rgba(255, 255, 255, 1);border: 1px solid rgba(255, 255, 255, 0.5);}</style></head>

<body>
<div class="warp"><div class="sim-button button1"><span>one</span></div></div>
<div class="warp"><div class="sim-button button2" data-text="two"><span>two</span></div></div>
<div class="warp"><div class="sim-button button3" data-text="three"><span>three</span></div></div>

<div class="warp"><div class="sim-button button4"><span>four</span></div></div>
<div class="warp"><div class="sim-button button5"><span>five</span></div></div>
<div class="warp"><div class="sim-button button6"><span>six</span></div></div>
<div class="warp"><div class="sim-button button7"><span>seven</span></div></div>
<div class="warp"><div class="sim-button button8"><span>eight</span></div></div>
<div class="warp"><div class="sim-button button9"><span>nine</span></div></div>
<div class="warp"><div class="sim-button button10"><span>ten</span></div></div>
</body>
</html>

效果一：

.button1 {-webkit-transition: all 0.5s;transition: all 0.5s;}

.button1:hover {background-color: rgba(255, 255, 255, 0.2);border-radius: 20px;}

效果二：

.button2 {-webkit-transition: all 0.5s;transition: all 0.5s;overflow: hidden;position: relative;}
.button2:hover {background-color: rgba(255, 255, 255, 0.2);}
.button2>span {-webkit-transition: all 0.3s;transition: all 0.3s;}
.button2:hover>span {opacity: 0;}
.button2::after {content: attr(data-text);width: 100%;height: 100%;position: absolute;left: -50px;top: 0;opacity: 0;-webkit-transition: all 0.5s;transition: all 0.5s;}
.button2:hover::after {left: 0;opacity: 1;}

效果三：

.button3 {-webkit-transition: all 0.5s;transition: all 0.5s;overflow: hidden;position: relative;}
.button3:hover {background-color: rgba(255, 255, 255, 0.2);}
.button3>span {-webkit-transition: all 0.3s;transition: all 0.3s;}
.button3:hover>span {opacity: 0;}
.button3::after {content: attr(data-text);width: 100%;height: 100%;position: absolute;left: 0;top: 0;opacity: 0;-webkit-transform: translate(-9%, -50%) rotate(-9deg);transform: translate(-9%, -50%) rotate(-9deg);-webkit-transition: all 0.3s;transition: all 0.3s;}
.button3:hover::after {-webkit-transform: translate(0, 0) rotate(0deg);transform: translate(0, 0)rotate(0deg);opacity: 1;}

效果四：

.button4 {position: relative;overflow: hidden;}
.button4 span {z-index: 2;}
.button4::after {content: "";width: 100%;height: 100%;z-index: 1;opacity: 0;position: absolute;left: 0;top: 0;background-color: rgba(255, 255, 255, 0.5);-webkit-transition: all 0.5s;transition: all 0.5s;}
.button4:hover::after {opacity: 1;-webkit-transform: skewX(-180deg) scale(0.5, 1);transform: skewX(-180deg)scale(0.5, 1);}

效果五：

.button5 {border: none;position: relative;}
.button5::before {content: '';position: absolute;left: 0;top: 0;width: 100%;height: 100%;border: 1px solid rgba(255, 255, 255, 0.5);-webkit-transition: all 0.5s;transition: all 0.5s;}
.button5:hover::before {opacity: 0;-webkit-transform: scale(1.2, 1.2);transform: scale(1.2, 1.2);}
.button5::after {content: '';width: 100%;height: 100%;position: absolute;left: 0;top: 0;opacity: 0;background-color: rgba(255, 255, 255, 0.5);-webkit-transform: scale(0.5, 0.5);transform: scale(0.5, 0.5);-webkit-transition: all 0.5s;transition: all 0.5s;}
.button5:hover::after {opacity: 1;-webkit-transform: scale(1, 1);transform: scale(1, 1);}

效果六：

.button6 {border: none;position: relative;}
.button6::before {content: '';position: absolute;left: 0;top: 0;width: 100%;height: 100%;background-color: rgba(255, 255, 255, 0.5);-webkit-transition: all 0.5s;transition: all 0.5s;}
.button6:hover::before {opacity: 0;-webkit-transform: scale(0.5, 0.5);transform: scale(0.5, 0.5);}
.button6::after {content: '';width: 100%;height: 100%;position: absolute;left: 0;top: 0;opacity: 0;border: 1px solid rgba(255, 255, 255, 0.5);-webkit-transform: scale(1.2, 1.2);transform: scale(1.2, 1.2);-webkit-transition: all 0.5s;transition: all 0.5s;}
.button6:hover::after {opacity: 1;-webkit-transform: scale(1, 1);transform: scale(1, 1);}

效果七：

.button7 {border: 1px solid rgba(255, 255, 255, 0.5);-webkit-transition: all 0.5s;transition: all 0.5s;overflow: hidden;position: relative;}
.button7:hover {border: 1px solid rgba(255, 255, 255, 0);}
.button7::before {content: '';position: absolute;left: 0;bottom: 0;width: 100%;
height: 1px;background-color: rgba(255, 255, 255, 0.5);-webkit-transform: translate(-100%, -600%) rotate(9deg);transform: translate(-100%, -600%) rotate(9deg);-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);-webkit-transition: all 0.5s;transition: all 0.5s;}
.button7:hover::before {-webkit-transform: translate(0, 0);transform: translate(0, 0);}

效果八：

.button8 {color: rgba(255, 255, 255, 1);border: none;position: relative;}
.button8:hover>span {letter-spacing: 2px;}
.button8::before {content: '';position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 1;opacity: 0;-webkit-transition: all 0.3s;transition: all 0.3s;border-top-width: 1px;border-bottom-width: 1px;border-top-style: solid;border-bottom-style: solid;border-top-color: rgba(255, 255, 255, 0.5);border-bottom-color: rgba(255, 255, 255, 0.5);-webkit-transform: scale(0.1, 1);transform: scale(0.1, 1);}
.button8:hover::before {opacity: 1;-webkit-transform: scale(1, 1);transform: scale(1, 1);}
.button8::after {content: '';position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 1;background-color: rgba(255, 255, 255, 0.25);-webkit-transition: all 0.3s;transition: all 0.3s;}
.button8:hover::after {opacity: 0;-webkit-transform: scale(0.1, 1);transform: scale(0.1, 1);}

效果九：

.button9 {color: rgba(255, 255, 255, 1);border: none;position: relative;border-top-width: 1px;border-bottom-width: 1px;border-top-style: solid;border-bottom-style: solid;border-top-color: rgba(255, 255, 255, 0.5);border-bottom-color: rgba(255, 255, 255, 0.5);-webkit-transition: all 0.3s;transition: all 0.3s;}
.button9:hover span {letter-spacing: 2px;}
.button9:hover {border-top-color: rgba(255, 255, 255, 0);border-bottom-color: rgba(255, 255, 255, 0);}
.button9::before {content: '';position: absolute;top: 0;right: 0;width: 1px;height: 100%;z-index: 1;-webkit-transition: all 0.3s;transition: all 0.3s;background-color: rgba(255, 255, 255, 0.5);}
.button9:hover::before {-webkit-transform: translate(-76px, 0) rotate(270deg);transform: translate(-76px, 0)rotate(270deg);}
.button9::after {content: '';position: absolute;top: 0;left: 0;width: 1px;height: 100%;z-index: 1;-webkit-transition: all 0.3s;transition: all 0.3s;background-color: rgba(255, 255, 255, 0.5);}
.button9:hover::after {-webkit-transform: translate(76px, 0) rotate(180deg);transform: translate(76px, 0) rotate(180deg);}

效果十：

.button10 {-webkit-transition: all 0.3s;transition: all 0.3s;}
.button10:hover {-webkit-animation-name: move;animation-name: move;-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both;background-color: rgba(255, 255, 255, 0.2);}
@-webkit-keyframes move {
from,11.1%,to {-webkit-transform: none;transform: none;}22.2% {-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);transform: skewX(-12.5deg)skewY(-12.5deg);}33.3% {-webkit-transform: skewX(6.25deg) skewY(6.25deg);transform: skewX(6.25deg)skewY(6.25deg);}44.4% {-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);transform: skewX(-3.125deg)skewY(-3.125deg);}55.5% {-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);transform: skewX(1.5625deg)skewY(1.5625deg);}66.6% {-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);transform: skewX(-0.78125deg) skewY(-0.78125deg);}77.7% {-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);transform: skewX(0.390625deg) skewY(0.390625deg);}88.8% {-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);transform: skewX(-0.1953125deg) skewY(-0.1953125deg);}}
@keyframes move {from,11.1%,to {-webkit-transform: none;transform: none;}22.2% {-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);transform: skewX(-12.5deg)skewY(-12.5deg);}33.3% {-webkit-transform: skewX(6.25deg) skewY(6.25deg);transform: skewX(6.25deg)skewY(6.25deg);}44.4% {-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);transform: skewX(-3.125deg)skewY(-3.125deg);}55.5% {-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);transform: skewX(1.5625deg)skewY(1.5625deg);}66.6% {-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);transform: skewX(-0.78125deg) skewY(-0.78125deg);}77.7% {-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);transform: skewX(0.390625deg) skewY(0.390625deg);}88.8% {-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);transform: skewX(-0.1953125deg) skewY(-0.1953125deg);}}

以上效果，需要的赶紧收藏吧^_^!

白山羊