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;
}
borderbox@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{

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。