css3中常用的动态效果总结
<!-- scale 效果 (x,y轴都要变大(1以上。如果需要缩小，可以给小数),同理还有只增加x 只增加y )-->
<div class="scale">scale</div>
.scale{
background: green;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-ms-transition:0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
.scale:hover{
/*transform:scale(1.1);*/
/*transform:scaleX(1.1);*/
transform:scaleY(0.8);
}
<!-- pulse 动画 @keyframes animation -->
<div class="pulse">pulse</div>
/*---------------------*/
.pulse{
background: blue;
}
@keyframes pulse{
20%{
transform:scale(1.1);
background: green;
}
40%{
transform:scale(1.5);
background: red;
}
80%{
transform:scale(0.9);
background: yellow;
}
}
.pulse:hover{
animation:pulse linear 2s infinite ;
}
<!-- pulse grow -->
<div class="pulse-grow"></div>
/*--------------------*/
.pulse-grow{
background: yellow;
}
@keyframes pulse-grow {
to {
transform: scale(1.1);
}
}
.pulse-grow:hover{
background: red;
animation:pulse-grow linear .2s infinite;
}
<!-- pulse shrink -->
<div class="pulse-shrink"></div>
/*-----------------------*/
.pulse-shrink{
background: skyblue;
}
@keyframes pulse-shrink{
to{
transform:scale(0.9);
}
}
.pulse-shrink:hover{
animation:pulse-shrink linear .2s infinite;
}
<!-- push 像推开的感觉 50%时候是缩小0.8左右，100%时候全部大小-->
<div class="push">push</div>
/*---------------------------*/
.push{
background: orange;
}
@keyframes push{
50%{
transform:scale(0.8);
}
100%{
transform:scale(1);
}
}
.push:hover{
animation:push linear .3s infinite;
}
<!-- push-up 增大的感觉 -->
<div class="push-up">push-up</div>
/*-----------------------------*/
.push-up{
background: purple;
}
@keyframes push-up{
50%{
transform:scale(1.2);
}
100%{
transform:scale(1);
}
}
.push-up:hover{
animation:push-up linear .3s 1;
}
<!-- 旋转 -->
<div class="rotate"></div>
/*--------------------*/
.rotate{
background: black;
}
.rotate:hover{
transform:rotate(5deg);
}
<!-- 又增大又旋转 -->
<div class="grow-up"></div>
/*--------------------------*/
.grow-up{
background: pink;
}
.grow-up:hover{
transform: rotate(5deg) scale(1.1);
}
<!-- 鼠标移上去 有向上浮的效果 -->
<div class="line">
<div class="float-up">float-up</div>
</div>
/*--------------------*/
.float-up{
background: yellow;
}
.line:hover{
border-bottom:2px solid red;
box-sizing:border-box;
}
.line:hover .float-up{
transform:translateY(-5px);
}
<!-- 同理，鼠标移上去，有向下浮动的效果 -->
<div class="float-down"></div>
/*----------------------------*/
.float-down{
background: gold;
}
.float-down:hover{
transform:translateY(5px);
}
<!-- 鼠标移上去 div上下动的状态 -->
<div class="up-dowm"></div>
/*-----------------------------*/
.up-dowm{
background: red;
}
@keyframes up-dowm{
50%{
transform:translateY(-3px);
}
100%{
transform:translateY(-6px);
}
}
.up-dowm:hover{
animation:up-dowm linear .5s infinite;
}
<!-- 倾斜 -->
<div class="skew">skew</div>
/*------------------------*/
.skew{
background: orange;
}
.skew:hover{
transform: skew(-10deg);
}
<!-- 只是上面倾斜-->
<div class="skew-up"></div>
/*----------------------------*/
.skew-up{
background: black;
transform-origin: 0 100%;
}
.skew-up:hover{
transform: skew(-10deg);
}
<!-- 盒子上下摆动 -->
<div class="wobble-vertical"></div>
/*----------------------------*/
.wobble-vertical{
background: green;
}
@keyframes wobble-vertical{
20%{
transform: translateY(8px);
}
40%{
transform: translateY(-6px);
}
60%{
transform: translateY(4px);
}
80%{
transform: translateY(-2px);
}
100%{
transform: translateY(0px);
}
}
.wobble-vertical:hover{
animation: wobble-vertical linear .4s 1;
}
<!--盒子横着摆动 -->
<div class="wobble-horizontal"></div>
/*-------------------*/
.wobble-horizontal{
background: blue;
}
@keyframes wobble-horizontal{
20%{
transform: translateX(8px);
}
40%{
transform: translateX(4px);
}
60%{
transform: translateX(-2px);
}
80%{
transform: translateX(-8px);
}
100%{
transform: translateX(0px);
}
}
.wobble-horizontal:hover{
animation:wobble-horizontal linear .4s 1;
}
<!-- 盒子斜着只有上下横着摆动 -->
<div class="wobble-top"></div>
/*---------------------------------*/
.wobble-top{
background: skyblue;
transform-origin: 0 100%;
}
@keyframes wobble-top{
20%{
transform: skew(-12deg);
}
40%{
transform: skew(-8deg);
}
60%{
transform: skew(0);
}
80%{
transform: skew(6deg);
}
100%{
transform: skew(8deg);
}
}
.wobble-top:hover{
animation: wobble-top linear .4s 1;
}
<!-- 盒子斜着只有下面横着摆动 -->
<div class="wobble-bottom"></div>
/*-----------------------------*/
.wobble-bottom{
background: blue;
transform-origin: 100% 0;
}
@keyframes wobble-bottom{
20%{
transform: skew(-12deg);
}
40%{
transform: skew(-8deg);
}
60%{
transform: skew(0);
}
80%{
transform: skew(6deg);
}
100%{
transform: skew(8deg);
}
}
.wobble-bottom:hover{
animation: wobble-bottom linear .4s 2;
}
<!-- 鼠标移上去 有边框出现是动态的慢慢出现 transition: box-shadow .3s;-->
<div class="border-fade"></div>
/*------------------*/
.border-fade{
background: #999;
transition: box-shadow .3s;
}
.border-fade:hover{
box-shadow: inset 0 0 0 4px red,0 0 0 2px #000;
}
<!--背景颜色逐渐消失 transition: background .4s; -->
<div class="hollow"></div>
/*----------------------------*/
.hollow{
background: pink;
transition: background .4s;
box-shadow: inset 0 0 0 4px red,0 0 0 2px #000;
}
.hollow:hover{
background: none;
}
<!-- 透明动画 内框一样的东西 transition: opacity .4s; -->
<div class="touming"></div>
/*---------------------------------*/
.touming{
background: yellow;
position: relative;
}
.touming:before{
content: "";
border:4px solid #fff;
position: absolute;
top:4px;
right:4px;
bottom:4px;
left:4px;
opacity: 0;
transition: opacity .4s;
}
.touming:hover:before{
opacity: 1;
}
<!-- 向外边有一个边框缓慢出现 -->
<div class="outline"></div>
/*---------------------------------*/
.outline{
background: red;
position: relative;
}
.outline:before{
content: "";
border:4px solid black;
position: absolute;
top:0;
left:0;
right: 0;
bottom:0;
transition-property: top right bottom left;
/*transition: top right bottom left 2s;*/
transition-duration: .3s;
/*2个不能一起写。*/
}
.outline:hover:before{
top:-8px;
left:-8px;
right:-8px;
bottom:-8px;
}
<!-- 向里面有一个框缓慢出现 -->
<div class="inline"></div>
/*------------------------------*/
.inline{
background: skyblue;
position: relative;
}
.inline:before{
content: '';
border:4px solid #ccc;
position: absolute;
top:-16px;
left:-16px;
right:-16px;
bottom:-16px;
opacity: 0;
transition-property: top right bottom left;
transition-duration: .3s;
}
.inline:hover:before{
opacity: 1;
top:-8px;
left:-8px;
bottom:-8px;
right:-8px;
}
<!-- 边框缓慢变成圆角 -->
<div class="toRadius"></div>
/*---------------------------*/
.toRadius{
background: purple;
transition:border-radius .3s;
}
.toRadius:hover{
border-radius: 50%;
}
<!-- 边框阴影 -->
<div class="shadow"></div>
/*---------------------------------*/
.shadow{
background: orange;
transition: box-shadow .4s;
}
.shadow:hover{
box-shadow: 0 0 8px red;
}
<!-- 外边框阴影 outside -->
<div class="outShadow"></div>
/*-------------------------------*/
.outShadow{
background: blue;
transition:box-shadow .4s;
}
.outShadow:hover{
box-shadow: 2px 2px 8px purple;
}
<!-- 边框内阴影 inside -->
<div class="inShadow"></div>
/*----------------------------------*/
.inShadow{
background: yellow;
transition: box-shadow .4s;
}
.inShadow:hover{
box-shadow: inset 2px 2px 8px purple;
}
<!-- 鼠标移上去，下方出现阴影，盒子整体上上去 -->
<div class="float-shadow"></div>
/*-----------------------------------*/
.float-shadow{
background: red;
position: relative;
transition: transform .4s;
}
.float-shadow:before{
content: '';
width: 90%;
height:10px;
background: radial-gradient(ellipse at center, red 50%,black 80%);
position: absolute;
top:100%;
left:5%;
opacity: 0;
z-index: -1;
transition: opacity .4s;
}
.float-shadow:hover{
transform: translateY(-10px);
}
.float-shadow:hover:before{
opacity: 1;
}
<!-- 鼠标移上去，上下都出现阴影 -->
<div class="shadow-radial"></div>
/*----------------------------------------------*/
.shadow-radial{
background: grey;
position: relative;
}
.shadow-radial:after,
.shadow-radial:before{
content: '';
width: 90%;
height: 10px;
background: radial-gradient(ellipse at center,green 20% ,blue 80%);
position: absolute;
left:5%;
opacity: 0;
transition:opacity .4s;
box-sizing: border-box;
}
.shadow-radial:after{
bottom: 100%;
}
.shadow-radial:before{
top:100%;
}
.shadow-radial:hover:after,
.shadow-radial:hover:before{
opacity: 1;
}
<!-- 鼠标移上去，下面出现一个小三角形 -->
<div class="Bubble-bottom"></div>
/*-------------------------------------*/
.Bubble-bottom{
background: green;
position: relative;
}
.Bubble-bottom:before{
content:'';
border-width:10px 10px 0 10px;
border-style:solid;
border-color:#ccc transparent transparent transparent;
position: absolute;
left:calc(50% - 10px);
bottom:0;
z-index: -1;
transition: bottom .4s;
}
.Bubble-bottom:hover:before{
bottom:-10px;
}
