css3动画

最新推荐文章于 2025-02-27 08:03:00 发布

原创最新推荐文章于 2025-02-27 08:03:00 发布 · 118 阅读

0 ·

CC 4.0 BY-SA版权

css样式专栏收录该内容

3 篇文章

订阅专栏

css3动画

transition的含义是过渡。
过渡是CSS3中具有颠覆性的一个特征，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。

补间动画：自动完成从起始状态到终止状态的的过渡。不用管中间的状态。
帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片。

transition 包括以下属性：

transition-property: all; 如果希望所有的属性都发生过渡，就使用all。
transition-duration: 1s; 过渡的持续时间。
transition-timing-function: linear; 运动曲线。
属性值可以是：
```
  linear 线性
  ease 减速
  ease-in 加速
  ease-out 减速
```
ease-in-out 先加速后减速
transition-delay: 1s; 过渡延迟。多长时间后再执行这个过渡动画。

综合起来写：
transition: 让哪些属性进行过度过渡的持续时间运动曲线延迟时间;

transition: all 3s linear 0s;

扑克牌的demo：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            /*background-color: #eee;*/
        }

        .box {

            width: 300px;
            height: 440px;
            margin: 100px auto;
            position: relative;
        }

        img {
            width: 100%;
            transition: all 1.5s;
            position: absolute;     /* 既然扑克牌是叠在一起的，那就都用绝对定位 */
            left: 0;
            top: 0;

            transform-origin: center bottom; /*旋转时，以盒子底部的中心为坐标原点*/
            box-shadow: 0 0 3px 0 #666;
        }

        .box:hover img:nth-child(6) {
            transform: rotate(-10deg);
        }

        .box:hover img:nth-child(5) {
            transform: rotate(-20deg);
        }

        .box:hover img:nth-child(4) {
            transform: rotate(-30deg);
        }

        .box:hover img:nth-child(3) {
            transform: rotate(-40deg);
        }

        .box:hover img:nth-child(2) {
            transform: rotate(-50deg);
        }

        .box:hover img:nth-child(1) {
            transform: rotate(-60deg);
        }

        .box:hover img:nth-child(8) {
            transform: rotate(10deg);
        }

        .box:hover img:nth-child(9) {
            transform: rotate(20deg);
        }

        .box:hover img:nth-child(10) {
            transform: rotate(30deg);
        }

        .box:hover img:nth-child(11) {
            transform: rotate(40deg);
        }

        .box:hover img:nth-child(12) {
            transform: rotate(50deg);
        }

        .box:hover img:nth-child(13) {
            transform: rotate(60deg);
        }

    </style>
</head>
<body>
<div class="box">
    <img src="images/pk1.png"/>
    <img src="images/pk2.png"/>
    <img src="images/pk1.png"/>
    <img src="images/pk2.png"/>
    <img src="images/pk1.png"/>
    <img src="images/pk2.png"/>
    <img src="images/pk1.png"/>
    <img src="images/pk2.png"/>
    <img src="images/pk1.png"/>
    <img src="images/pk2.png"/>
    <img src="images/pk1.png"/>
    <img src="images/pk2.png"/>
    <img src="images/pk1.png"/>
</div>
</body>
</html>