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