用css3的过渡动画效果简单做星空转换的效果

有时候，css3的过渡动画效果比js的计时器控制要好用，因为你不用去设计计时器，利用css3的过渡可以让元素很流畅的播放，接下来，我简单介绍一下一些css3的过渡属性并且用他们做一些星空转换的demo。

第一，知识讲解》》》

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

css3的部分属性及描述
transition 》》》简写属性，用于在一个属性中设置四个过渡属性。
transition-property 》》》规定应用过渡的 CSS 属性的名称。
transition-duration 》》》定义过渡效果花费的时间。默认是 0。
transition-timing-function 》》》规定过渡效果的时间曲线。默认是 “ease”。
transition-delay 》》》规定过渡效果何时开始。默认是 0。

第二，制作星空转换图

步骤一：准备素材》

1,我准备了2张图片做为星空装换的素材

步骤二：制作计划》

设想的情况是当用户的鼠标移上图片区域，地球就会缩小，缩小的同时，就会发生星空的装换，变成茫茫星海

步骤三：开始实践》

html部分》

  <div class="container">
        <img src="./earth.png" alt="">
    </div>

css部分》

 <style>
        body {
            background-image: url('airSpace.jpg');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            padding: 0;
            margin: 0;
        }

        img {
            width: 100%;
            height: 100%;
            margin: 0 auto;
            left: 50%;
			  /* 开始设置转换的属性名字 */
            transition-property: opacity border-radius transform;
			  /* 开始设置转换的属性过渡时间 */
            transition-duration: 7s;
			  /* 开始设置转换的属性过渡曲线 */
            transition-timing-function: ease;
        }

        .container {
            width: 100%;
            height: 800px;
			 /* 设置png地球图片附近是黑色的背景 */
            background-color: black;
			  /* 开始设置转换的属性名字 */
            transition-property: opacity;
			  /* 开始设置转换的属性过渡时间 */
            transition-duration: 8s;
			  /* 开始设置转换的属性过渡曲线 */
            transition-timing-function: ease;
        }

  /* 鼠标移入图片后触发效果*/
        img:hover {
            border-radius: 50%;
            opacity: 0;
            transform: scale(0.1);
        }
  /* 鼠标移入整个页面后触发效果*/
        .container:hover{
            opacity: 0;
        }
    </style>