CSS3的一些动画展示

        在css3中，有一些特别方便有趣的方式来让自己定义的图形和图片‘活’起来。

前言

        1.  了解‘过渡’   2D转换

        2.  案例

1. 1 过渡(transition)

用法与参数：Transition：（参数一   参数二）

• 参数一：要过渡的属性
•  参数二：过渡的时间

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

•  补间动画：自动完成从始至终的状态的过渡，不用管中间的状态。
• 帧动画：扑克牌切换，通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片。

1.2 2D转换

• 2D转换可以实现原色的位移，旋转，变形，缩放，甚至支持矩阵方式，配合即将学习的动画知识，可以取代大量之前只能靠flash才可以实现的效果。
• 在css3中，可以通过transform（变形）来实现2d或者3d的转换，其中2d中有缩放移动，旋转。

1.2.1缩放

用法与参数：scale（x，y）

        可以对元素进行水平和垂直方式的缩放，x，y的取值可以为小数，不可为负数。

1.2.2移动

用法和参数：translate（x，y）       

         x为水平方向移动，y为垂直方向移动

        可以以改变元素的位置，x，y可以为负数。

1.2.3旋转

用法与参数：rotate（deg）

可以对元素惊醒旋转，正值为顺时针，负值为逆时针

1.2.4改变圆心

transform-origin：（方位）如：top  配合旋转 可改变图形圆心位置旋转方式。

2 案例

        2.1气泡案例

当鼠标移入在这个气泡上，会实现丝滑气泡动态效果的动画

2.1.1

首先在body里定义一个div，并命名类为box。在style中开始编写css样式 实现动态效果。如下

.box {
    width: 300px;
    height: 150px;
    margin: 100px auto;
    border-radius: 20px;
    background: url(./images/paopao.png) no-repeat,
                url(./images/paopao.png) no-repeat right bottom;
    background-color: skyblue;
    transition: all 2s;
}

2.1.2

设置 .box 元素的宽度为 300 像素高度为 150 像素。

       width: 300px;height: 150px;

2.1.3

设置 .box 元素的外边距，上下各 100 像素，左右自动（使其水平居中）。

        margin: 100px auto;

2.1.4

设置元素的边角为 20 像素的圆角，使其看起来更加柔和。

        border-radius: 20px;

2.1.5

设置了两个背景图像：

        background:

             url(./images/paopao.png) no-repeat,

             url(./images/paopao.png) no-repeat right bottom;：

      第二个背景图片位置设置在右下角（right bottom）。实现同一张图片，不同的动画效果

2.1.6

设置所有可过渡属性的变化时间为 2 秒，意味着在状态变化时（如鼠标悬停）会平滑过渡。

        transition: all 2s;

2.1.7

伪类选择器，用于定义当鼠标悬停在 .box 元素上时的样式。

        .box:hover

2.1.9

当鼠标悬停时，第一个背景图像的位置变化为左下角（left bottom）。

第二个背景图像的位置变化为右上角（right top）。

        background-position: left bottom, right top;

效果总结

当用户将鼠标悬停在类为 .box 元素的泡泡背景上时，背景图像的位置会发生变化，并且这种变化会在 2 秒内平滑过渡。背景图像在鼠标悬停时移动，给人一种动态的视觉体验。十分丝滑，且简单。

2.2火箭移动

        当鼠标移动到页面上（body），自左下向右上出来一个小火箭。

 body{
       
            height: 100%;
            background-color: #60cac7;
            
        }
        html{
            height: 100%;
        }
        .img{
            position: absolute;
            bottom: 0px;
            left: 0px;
            width: 50px;
            transform:  translate(-81px,100px) rotate(10deg);
            transition: all 2s;
        }
        body:hover img{
            transform:  translate(500px,-500px) rotate(45deg);
        }

2.2.1

html 和 body 的高度为百分百。这两行代码确保网页的高度占满整个浏览器窗口。方便我们鼠标移入时动画能触发。

        body { height: 100%;

                 background-color: #60cac7; }

        html { height: 100%; }

2.2.2

.img 类的样式设置
      .img{
            position: absolute;
            bottom: 0px;
            left: 0px;
            width: 50px;
            transform:  translate(-81px,100px) rotate(10deg);
            transition: all 2s;
        }

2.2.3

将该元素的定位方式设置为绝对定位。

    position: absolute;
             bottom: 0px;
             left: 0px;

2.2.4

使用 transform属性对元素进行变换：

               transform:  translate(-81px,100px) rotate(10deg);

2.2.5

将元素在水平方向上向左移动 81 像素，在垂直方向上向下移动 100 像素。将元素顺时针旋转 10 度。

                transform： translate(-81px,100px) rotate(10deg)；

2.2.6

设置所有可过渡的属性在变化时的持续时间为 2 秒。这意味着当元素的样式发生变化时，变化会平滑地过渡。

                transition： all 2s；

2.2.7

body:hover img 的样式设置

当鼠标悬停在 body 元素上时，选择所有 img 元素

                body:hover img{
                        }

当鼠标悬停时，元素的变换会更新为：

translate(500px,-500px)；将元素在水平方向上向右移动 500 像素，在垂直方向上向上移动 500 像素。将元素顺时针旋转 45 度。

                transform:  translate(500px,-500px) rotate(45deg)；

效果总结

        这段代码的总体效果是，我们将鼠标悬停在页面的任意位置时，位于左下角的小火煎会平滑地移动到右上角并旋转30°，同时背景颜色保持不变。

2.3盾牌，位置还原

        当鼠标移入这个页面的时候，页面上显示的盾牌碎片将合体，成为一个完整的盾牌

              

body{
            background-color: #74c66d;
            height: 100%;
        }
        html{
            height:100% ;
        }
        div{
            width: 430px;
            height: 500px;
            margin: 400px auto; 
        
        }
        img:nth-child(1){
            transform: translate(-45px,-45px);
            transition: all 2s;
        }
        img:nth-child(2){
            transform:translate(0px,-45px);
            transition: all 2s;
        }
        img:nth-child(3){
            transform:translate(45px,-45px);
            transition: all 2s;
        }
        img:nth-child(4){
            transform:translate(-45px,0px);
            transition: all 2s;
        }
        img:nth-child(5){
            transform:scale(1.5,1.5);
            transition: all 2s;
        }
        img:nth-child(6){
            transform:translate(45px,0px);
            transition: all 2s;
        }
        img:nth-child(7){
            transform:translate(-45px,45px);
            transition: all 2s;
        }
        img:nth-child(8){
            transform:translate(0px,45px);
            transition: all 2s;
        }
        img:nth-child(9){
            transform:translate(45px,45px);
            transition: all 2s;
        }

       body:hover img {
            transform: translate(0%,0%)
        }

        在body中我们插入盾牌碎片，集齐九个盾牌碎片即可召唤出世界上最强的刺不穿的盾。打败巨龙，营救公主。所以我们我们这么写代码。

2.3.1

html 和 body 的高度为百分百。这两行代码确保网页的高度占满整个浏览器窗口。方便我们鼠标移入时动画能触发。

        body { height: 100%;

                 background-color: #60cac7; }

        html { height: 100%; }

2.3.2

选择 div 中的第一个 img 元素。nth-child(1) 是一个伪类选择器，用于选择父元素中的第一个子元素。对第一个 img 元素应用变换；

                img:nth-child(1) {

将该图像在水平方向上向左移动 45 像素，在垂直方向上向上移动 45 像素。

                transform：translate(-45px, -45px)；

设置所有可过渡的属性在变化时的持续时间为 2 秒。

                transition: all 2s；}

2.3.3

其余body中div的九个盾牌碎片img同理，只需要就改下伪类元素里的数字，再修改碎片的初始移动位置，再通过鼠标移入的hover来让盾牌碎片重新合体为一个完整的盾牌。就可以打败巨龙。

        body:hover img {

                    transform: translate(0%,0%)

        }

       To be continue......