不忘初心,让你更有成就感的实用CSS3动效

·  阅读 1409
不忘初心,让你更有成就感的实用CSS3动效

不忘初心,让你更有成就感的实用CSS3动效

Sep-13-2021 11-13-33.gif

CSS3动效主要利用transition、transform和animation实现

简介:

1.transition 过渡 是一个连续的过程
2.transform 变换 是一个变化的动作
3.animation 动画 利用关键帧的动画
复制代码

transition

定义:transition 属性是一个简写属性,用于设置四个过渡属性:

  • transition-property 规定设置过渡效果的 CSS 属性的名称(就是指定哪个属性应用过渡,比如transition-property:background就是指定background属性应用过渡)。
  • transition-duration 规定完成过渡效果需要多少秒或毫秒(就是指定这个过渡的持续时间)。
  • transition-timing-function 规定速度效果的速度曲线(有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()
  • transition-delay 定义过渡效果何时开始(过渡延迟多长时间开始)。

注释:请始终设置 transition-duration 属性,否则时长为 0,就不会产生过渡效果,其他属性可不写。

语法:transition: property duration timing-function delay;

理解:过渡,用于平滑的改变CSS值

使用:

<!DOCTYPE html>
<html>
<head>
<style> 
    div {
        width:100px;
        height:100px;
        background:blue;
        transition:width 2s;
        -moz-transition:width 2s; /* Firefox 4 */
        -webkit-transition:width 2s; /* Safari and Chrome */
        -o-transition:width 2s; /* Opera */
    }

    div:hover {
        width:300px;
        background:red;
    }
</style>
</head>
<body>

    <div></div>

    <p>请把鼠标指针移动到蓝色的 div 元素上,就可以看到过渡效果。</p>

    <p><b>注释:</b>本例在 Internet Explorer 中无效。</p>

</body>
</html>

复制代码

transform

定义:transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

语法:transform: none|transform-functions;

理解:transition不控制变化的产生,与之相对,transform就是用来产生变化的,比如选择,缩放等等。但是transform的变化是没有过渡效果的,就是直接显示变化过的样子了,我们将transition和transform一起用,就能产生渐变的动画效果了。比如旋转、缩放、移动或倾斜等等。

使用:

2D转换

  • translate(x,y)  相对于当前位置移动  值100px  表示100像素  translateX()  translateY()
  • rotate(角度)  顺时针旋转(负值表示逆时针旋转)  值30deg 表示30度
  • scale(a,b)  尺寸缩放  值2  表示缩放2倍  scaleX()  scaleY()
  • skew( 角度,角度)  翻转,x方向,y方向  值30deg  表示30度  skewX()  skewY()

可以使用matrix(n,n,n,n,n,n)将这些变化整合在一起(实际上上面四个变换的本质都是通过 matrix 矩阵来实现的,如果要实现没有提供的效果,可以通过这个函数直接控制)

【注】:transform变换的参照点默认为中心点,可以通过transform-origin(a,b)改变参照点的位置,a,b的值可以是百分比,px,em等,或者left center right  top bottom center

3D转换

  • translate3d(x,y,z)  3D移动  translateX(x) translateY(y) translateZ(z)
  • scale3d(x,y,z)  3D缩放  scaleX(x) scaleY(y) scaleZ(z)
  • rotate3d(x,y,z,angle)  3D旋转  rotateX(angle) rotateY(angle) rotateZ(angle)
  • prespective(n)  透视视图
<!DOCTYPE html>
<html>
<head>
<style> 
    body {
    	height: 500px;
    	display: flex;
        align-items: center;
        justify-content: center;
    }
    div {
        width:100px;
        height:100px;
        line-height:16px;
        background:blue;
        text-align:center;
        transition:all 2s;
        -moz-transition:all 2s; /* Firefox 4 */
        -webkit-transition:all 2s; /* Safari and Chrome */
        -o-transition:all 2s; /* Opera */
    }

    div:hover {
        width:300px;
        background:red;
        line-height:180px;
        text-align:center;
        transform:rotate(360deg) scale(2,2);
        -ms-transform:rotate(360deg) scale(2,2); /* Internet Explorer */
        -moz-transform:rotate(360deg) scale(2,2); /* Firefox */
        -webkit-transform:rotate(360deg) scale(2,2); /* Safari 和 Chrome */
        -o-transform:rotate(360deg) scale(2,2); /* Opera */
    }
</style>
</head>
<body>
    <div>hello word</div>
</body>
</html>
复制代码

animation

transition和transform组合使用可以实现一些简单的动画效果,但比较复杂的动画我们一般使用animation 定义:animation 属性是一个简写属性,用于设置六个动画属性:

  • animation-name 规定需要绑定到选择器的 keyframe 名称
  • animation-duration 规定完成动画所花费的时间,以秒或毫秒计
  • animation-timing-function 规定动画的速度曲线
    •   linear  匀速
    •   ease  默认 慢-快-慢
    •   ease-in  以快结束
    •   ease-out  以慢结束
    •   ease-in-out  以慢开始和结束  和ease的区别:ease-in-out中间部分是近似匀速的
    •   cubic-bezier(n,n,n,n)  贝塞尔曲线  n取值0或者1
    •   step-start  在帧间变化的过程中,以下一帧的显示效果来填充间隔动画,即不连续动画(逐帧动画)
    •   step-end  以上一帧的显示效果来填充间隔动画
    •   steps()  可以传入两个参数,第一个是一个大于0的整数,他是将间隔动画等分成指定数目的小间隔动画,然后根据第二个参数(start/end)来决定显示效果。第二个参数设置后其实和step-start,step-end同义,在分成的小间隔动画中判断显示效果。
  • animation-delay 规定在动画开始之前的延迟
  • animation-iteration-count 规定动画应该播放的次数
  • animation-direction 规定是否应该轮流反向播放动画
    •   normal   正常播放 正向
    •   reverse  反向播放
    •   alternate  动画在奇数次正向播放,在偶数次反向播放
    •   alternate-reverse  动画在奇数次反向播放,在偶数次正向播放
    •   initial  默认值
    •   inherit  从父元素继承

注释:请始终规定 animation-duration 属性,否则时长为 0,就不会播放动画了。

语法:animation: name duration timing-function delay iteration-count direction;

CSS3新增:

  • animation-fill-mode  动画不播放时,应用到元素的样式

    •   none  默认,无
    •   forwards  动画停留在结束帧
    •   backwords  动画完成后停留在初始帧
    •   both  同时遵循forwards和backwords
    •   initial  默认值
    •   inherit  从父元素继承
  • animation-play-state  动画运行和暂停

    •   paused   暂停
    •   running  运行

语法:animation: name duration timing-function delay iteration-count direction fill-mode play-state;

使用:animation需要配合 @keyframes 使用,@keyframes (关键帧)用于创建动画

@keyframes name{
    from{//start css
    }
    to{//end css
    }
}
//or
@keyframes name{
    0%{//start css
    }
    50%{//center css
    }
    100%{//end css
    }
}
复制代码

例如:

<!DOCTYPE html>
<html>
<head>
<style> 
div {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: red;
    transform: rotate(0deg);
    animation: remove 5s linear 2s infinite alternate;
}

@keyframes remove {
    0%   {background-color:red; left:100px; top:100px;transform: rotate(0deg);}
    25%  {background-color:yellow; left:300px; top:100px;transform: rotate(180deg);}
    50%  {background-color:blue; left:300px; top:300px;transform: rotate(360deg);}
    75%  {background-color:green; left:100px; top:300px;transform: rotate(180deg);}
    100% {background-color:red; left:100px; top:100px;transform: rotate(360deg);}
}
</style>
</head>
<body>
    <div></div>
</body>
</html>

复制代码

丰富:

<!DOCTYPE html>
<html>
<head>
<style> 
 	body,
    html {
      width: 100%;
      height: 100%;
      background: #2b3a42;
      display: flex;
    }
    .demo-cube {
      position: relative;
      width: 100%;
      height: 200px;
    }
    .cube {
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -50px 0 0 -50px;
      transform-style: preserve-3d;
      transform-origin: 50px 50px;
      transform: rotateX(-33.5deg) rotateY(45deg);
      animation: slowspin 6s linear infinite 2s;
    }
    .cube div {
      position: absolute;
      display: block;
      width: 100px;
      height: 100px;
      background: rgba(141, 214, 249, 0.5);
      border: 1px solid #fff;
    }
    .cube .top {
      transform: rotateX(90deg) translateZ(50px);
    }
    .cube .bottom {
      transform: rotateX(-90deg) translateZ(50px);
    }
    .cube .left {
      transform: rotateY(-90deg) translateZ(50px);
    }
    .cube .right {
      transform: rotateY(90deg) translateZ(50px);
    }
    .cube .front {
      transform: translateZ(50px);
    }
    .cube .back {
      transform: translateZ(-50px);
    }
    @keyframes slowspin {
       0%   {left:100px; top:100px;transform: rotateX(-33.5deg) rotateY(45deg);}
      25%  {left:300px; top:100px;transform: rotateX(-33.5deg) rotateY(180deg);}
      50%  {left:300px; top:300px;transform: rotateX(-123.5deg) rotateY(135deg);}
      75%  {left:100px; top:300px;transform: rotateX(33.5deg) rotateY(315deg);}
      100% {left:100px; top:100px;transform: rotateX(-33.5deg) rotateY(45deg);}
    }
</style>
</head>
<body>
  <div class="demo-cube">
    <div class="cube">
      <div class="top"></div>
      <div class="bottom"></div>
      <div class="front"></div>
      <div class="back"></div>
      <div class="right"></div>
      <div class="left"></div>
    </div>
  </div>
</body>
</html>
复制代码
分类:
前端
标签:
分类:
前端
标签: