CSS 动画效果

xiaoxiao2021-02-28  21

总体来说两类:

1. transition: 从一个样式到另外一个样式的过渡过程

width:过渡需要的时间

linear: 匀速过度  transition: 2s linear; 匀速过渡,而且时长2s

ease: 慢速开始,然后加快,然后慢速结束

ease-in: 慢速开始

ease-out: 慢速结束

ease-in-out: 慢速开始和结束

例子:

.div1{width: 100px; transition: 1s linear;} .div1:hover{width:500px;}

过渡的属性可以是宽高,字体颜色,背景色等

2. transform:从一个位置到另外一个位置,通常结合transition来使用

①旋转

      rotate(30deg) 正值是顺时针

      rotateX(30deg)

      rotateY(30deg)

② 移动

     translate(x,y) 正值是向右,向下

     translate3d(x,y,z)

     translateX

     translateY

     translateZ

③ 缩放

    scale(x,y) x,y 是倍数,可以是负值

     scaleX

     scaleY

例子:鼠标移入时元素从最下面没有慢慢滑入的效果

.div1{     width:100px;height:200px;background:pink;     position:relative;     overflow: hidden;     transition:1s; } .div1 p{     margin:0;     height:50px;position:absolute;     bottom:-50px;left:0;right:0;     background:red;     transition:1s; } .div1:hover{     transform: translateY(10px);     box-shadow:0 10px 20px gray; /* 右,下,模糊半径,阴影颜色*/ } .div1:hover p{ /* 鼠标移到div1上对内部的p书写样式*/     transform: translateY(-50px); } <div class="div1">     <p>好好学习,天天向上</p> </div>

转载请注明原文地址: https://www.6miu.com/read-1950142.html

最新回复(0)