>

css过渡动画,十种十分值得珍藏的csshover效果

- 编辑:www.bifa688.com -

css过渡动画,十种十分值得珍藏的csshover效果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>login</title>
<style type="text/css" media="screen">
/* 公用样式 */
body {
margin: 0;
height: 0;
background-color: #F1F1F1;
}

具体代码:
一、水平翻转
-moz-transform:scale(-1,1);
-webkit-transform:scale(-1,1);
-o-transform:scale(-1,1);
transform:scale(-1,1);
filter:FlipH;

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

贰、垂直翻转
-moz-transform:scale(1,-1);
-webkit-transform:scale(1,-1);
-o-transform:scale(1,-1);
transform:scale(1,-1);
filter:FlipV;

.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);
}
/* 效果一 */

3、顺时针旋转90度
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

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

transition:all 0.4s linear;
-moz-transition:all 0.4s linear;
-webkit-transition:all 0.4s linear;
-o-transition:all 0.4s linear;

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

倾斜
transform:skew(20deg);

.button2 {
-webkit-transition: all 0.5s;
transition: all 0.5s;
overflow: hidden;
position: relative;
}

{ -moz-transform:rotate(720deg); -webkit-transform:rotate(720deg); -o-transform:rotate(720deg); transform:rotate(720deg); transition:all 0.4s linear; -webkit-transition:all 0.4s linear; -moz-transition:all 0.4s linear; -o-transition:all 0.4s linear;}

.button2:hover {
background-color: rgba(255, 255, 255, 0.2);
}

黑影动画
<style>
.box { position: relative; left:10px; top:20px; display: inline-block; width: 100px; height: 100px; border-radius: 5px; background-color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.15); transition: all 0.3s ease-in-out; }
.box::after { content: ''; position: absolute; z-index: -1; width: 100%; height: 100%; opacity: 0; border-radius: 5px; box-shadow: 0 5px 15px rgba(0,0,0,0.6); transition: all 0.3s ease-in-out;}
.box:hover::after{ opacity:1;}
.box:hover{ left:20px; top:40px; transform: scale(1.2, 1.2); transition: all 0.3s ease-in-out;}
</style>
<div class="box"></div>

.button2>span {
-webkit-transition: all 0.3s;
transition: all 0.3s;
}

IE滤镜特性:

.button2:hover>span {
opacity: 0;
}

Alpha 透明效果
Blend Trans 渐隐渐现需结合javascript
Blur 动态模糊
Chrome 透明色效果
DropShadow 投影效果
FlipH 水平翻转
qlow 光晕效果
格雷 滤色效果
Invert 底片效果
FlipV 垂直效果
Light 电灯的光效果需结合javascript
Mask 遮罩效果
RevealTrans 图像切换效果产生百叶窗、溶解等动态效果需结合javascript
Shadow 阴影效果
Wave 波浪效果
X-ray X光片效果

.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;
}
/* 效果三 */

rotate

.button3 {
-webkit-transition: all 0.5s;
transition: all 0.5s;
overflow: hidden;
position: relative;
}

设置成分顺时针旋转的角度,用法是:

.button3:hover {
background-color: rgba(255, 255, 255, 0.2);
}

transform: rotate(x);

.button3>span {
-webkit-transition: all 0.3s;
transition: all 0.3s;
}

参数x必须是以deg结尾的角度数或0,可为负数表示反向。

.button3:hover>span {
opacity: 0;
}

scale

.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;
}
/* 效果四 */

transform: scale(a); 成分x和y方向均缩放a倍

.button4 {
position: relative;
overflow: hidden;
}

transform: scale(a, b); 成分x方向缩放a倍,y方向缩放b倍

.button4 span {
z-index: 2;
}

transform: scaleX(a); 成分x方向缩放a倍,y方向不改变

.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;
}

transform: scaleY(b); 成分y方向缩放b倍,x方向不变

.button4:hover::after {
opacity: 1;
-webkit-transform: skewX(-180deg) scale(0.5, 1);
transform: skewX(-180deg)scale(0.5, 1);
}
/* 效果五 */

translate

.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;
}

transform: translate(a, b); 成分x方向位移a,y方向位移b

.button5:hover::before {
opacity: 0;
-webkit-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
}

transform: translateX(a); 成分x方向位移a,y方向不改变

.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;
}

transform: translateY(b); 成分y方向位移b,x方向不改变

.button5:hover::after {
opacity: 1;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
/* 效果六 */

skew

.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;
}

transform: skew(a, b); 成分x方向逆时针倾斜角度a,y方向顺时针倾斜角度b

.button6:hover::before {
opacity: 0;
-webkit-transform: scale(0.5, 0.5);
transform: scale(0.5, 0.5);
}

transform: skewX(a); 元素x方向逆时针倾斜角度a,y方向不改变

.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;
}

transform: skewY(b); 成分y方向顺时针倾斜角度b,想方向不改变

.button6:hover::after {
opacity: 1;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
/* 效果七 27*/

如上的参数均必须是以deg结尾的角度数或0,可为负数表示反向。

.button7 {
border: 1px solid rgba(255, 255, 255, 0.5);
-webkit-transition: all 0.5s;
transition: all 0.5s;
overflow: hidden;
position: relative;
}

matrix

.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;
}

origin

.button7:hover::before {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
/* 效果八 */

安装成分的悬挂点,用法包涵:

.button8 {
color: rgba(255, 255, 255, 1);
border: none;
position: relative;
}

transform-origin: a b; 成分的悬挂点为(a, b)

.button8:hover>span {
letter-spacing: 2px;
}

要素的悬挂点即为它旋转和倾斜时的为主点。取值中的a、b能够是长度值、以%结尾的比重或许left、top、right、bottom多少个值。

.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);
}

连着效果
transition-property: width;
transition-duration: 2s;
圆角:border-radius:2px;
阴影:box-shadow:1px 1px 2px #FFF;

.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);
}
/* 效果九 */

css渐变背景
background:-webkit-gradient(linear,left top,right bottom,color-stop(0,#972D20),color-stop(1,#A92400));
background:-moz-linear-gradient(left, #972D20, #A92400);
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#972D20',endColorStr='#A92400',gradientType='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;
}

图形动画
@keyframes aabb {
0% {
transform: rotate(0deg);
border:5px solid red;
}
50% {
transform: rotate(180deg);
background:black;
border:5px solid yellow;
}
100% {
transform: rotate(360deg);
background:white;
border:5px solid red;
}
}
@-webkit-keyframes aabb {
0% {
-webkit-transform: rotate(0deg);
border:5px solid red;
}
50% {
-webkit-transform: rotate(180deg);
background:black;
border:5px solid yellow;
}
100% {
-webkit-transform: rotate(360deg);
background:white;
border:5px solid red;
}
}
.loading {
border: 5px solid black;
border-radius: 40px;
width: 28px;
height: 188px;
animation: aabb 2s infinite linear;
-webkit-animation: aabb 2s infinite linear;
margin: 100px;
}

.button9:hover {
border-top-color: rgba(255, 255, 255, 0);
border-bottom-color: rgba(255, 255, 255, 0);
}

animation:load 0.6s steps(12, end) infinite; -webkit-animation:load 0.6s steps(12, end) infinite;

.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);
}
}
</style>

</head>

<body>

<div class="warp">
<div class="sim-button button1">
<span>login1</span>
</div>
</div>
<div class="warp">
<div class="sim-button button2" data-text="login2">
<span>login2</span>
</div>
</div>
<div class="warp">
<div class="sim-button button3" data-text="login3">
<span>login3</span>
</div>
</div>
<div class="warp">
<div class="sim-button button4">
<span>login4</span>
</div>
</div>
<div class="warp">
<div class="sim-button button5">
<span>login5</span>
</div>
</div>
<div class="warp">
<div class="sim-button button6">
<span>login6</span>
</div>
</div>
<div class="warp">
<div class="sim-button button7">
<span>login7</span>
</div>
</div>
<div class="warp">
<div class="sim-button button8">
<span>login8</span>
</div>
</div>
<div class="warp">
<div class="sim-button button9">
<span>login9</span>
</div>
</div>
<div class="warp">
<div class="sim-button button10">
<span>login10</span>
</div>
</div>
</body>

</html>

本文由必发88官网发布,转载请注明来源:css过渡动画,十种十分值得珍藏的csshover效果