原神启动!!! css动画详解。

前情

最近原神启动非常火，突然有一天我想随时随地原神启动。就想能不能用网页做一个原神启动呢？ 有想法就要立即去做，于是很轻松这个效果就做好了。但是原神启动之后应该跳转到哪呢？ 思考了很久，觉得那就跳转到一个教程页面吧，让大家都可以自己动手原神启动一下岂不是很完美？

条件

这个教程非常基础，很适合初学者，但是还是需要一些基础知识。

• html class(类) 的用法。
• css 选择器 的用法和一些简单的属性。

基础知识

了解position的三个属性和常见的搭配

position 通常需要和 top,bottom ,left,right 这四个属性配合起来一起使用。

• top 代表当前元素上方的距离。
• bottom 代表当前元素下方的距离。
• left,right 以此类推，分别代表左边和右边。

fixed

将 position 设为 fixed 则会相对于当前网页的窗口进行定位。top则表示从网页窗口的最上面到当前元素的距离。 left则代表从网页窗口的最左边到当前元素的距离。bottom,right 以此类推，分别代表最下方和最右方。

试一试

img.ys{
    position: absolute;
    left:1px;
    top:1px;
}

左右 left right
上下 top bottom
定位 fixed relativeabsolute

relative

将 position 设为 relative 则会相对于当前位置进行定位。top则表示向下便宜的距离。 left则代表向右便宜的距离。bottom,right 以此类推，分别代表向上偏移和向左偏移。

img.ys{
    position:relative;
    top:12px;
}

absolute

将 position 设为 absolute 则会相对于祖宗设置为 relative 的元素进行定位,如果没有符合条件的祖宗元素则会相对于整个网页进行定位。top则表示从这个元素的最上面到当前元素的距离。 left则代表从这个的最左边到当前元素的距离。bottom,right 以此类推，分别代表最下方和最右方。

试一试

a

b

div.a{
    position: relative;
}
div.b{
    position: relative;
}
img.ys:{
    position:absolute;
    top:10px;
    left:10px;
}

添加删除a absolute添加删除b absolute

了解transform中的translate(x,y)

transform中的translate(x,y)和position使用relative时很相似，都是相对于自己当前位置进行偏移,x和left的用法很相似,y和top的用法很相似。

试一试

img.ys:{
    transform:translate(1px,1px);
}

x
y

完美的的居中

要实现元素启动动画,首先要了解如何使用css将图片居中显示。 下面将介绍几种将图片完美居中的几种方式。

左右居中

方式一，使用margin: auto;

给元素设置 margin: auto; 即可相对父元素左右居中。

效果演示

img.ys{
    display: block;
    margin: auto;
}

方式二，position:absolute; + left:50%;+ transform:translate(-50%,0);

1. 给需要相对于居中的祖宗元素设置position: relative;
2. 使用position:absolute;相较于父元素进行定位。
3. 使用left:50%向右平移相对于定位元素宽的50%

效果演示

img.ys{
    position: absolute;
    left: 50%;
}

4. 使用transform:translate(-50%,0);向左平移自己的50%。

效果演示

img.ys{
    position: absolute;
    left: 50%;
    transform:translate(-50%,0);
}

上下居中

方式 position:absolute; + top:50%;+ transform:translate(0,-50%);

和左右居中的方式二同理， 所以不用多解释了吧，直接上代码！

效果演示

img.ys{
    position: absolute;
    top: 50%;
    transform:translate(0,-50%);
}

结合起来上下左右居中

效果演示

img.ys{
    position: absolute;
    left: 50%;
    top: 50%;
    transform:translate(-50%,-50%);
}

原神启动还缺少点灵魂 “动画”

已经利用之前的知识将 “原神” 居中了。看起来已经有点那个味道了。接下来将添加动画，为它注入灵魂。 使用 animation 属性来为图片设置动画。使用 @keyframes 来定义动画。

效果演示

了解@keyframes

@keyframes 用于定义动画的关键帧,关键帧可以在不同的css属性之间过渡。

最简单的用法,定义一个ysstart动画,使不透明的从100%降到0%

@keyframes ysstart{
    from{
        opacity:100%
    }
    to{
        opacity:0%
    }
}

或者可以这样写。

@keyframes ysstart{
    0%{
        opacity:100%
    }
    100%{
        opacity:0%
    }
}

了解 animation

animation有许多属性，这里只介绍我们用到的。

• animation-name 指定由@keyframes描述的关键帧名称。
• animation-duration 设置动画一个周期的时长。
• animation-iteration-count 设置动画重复次数，可以指定 infinite 无限次重复动画
• animation-timing-function 设置动画速度，即通过建立加速度曲线，设置动画在关键帧之间是如何变化。

例如

img.ys{
    animation-name:ysstart; /* ysstart 是动画的名称 */
    animation-duration: 3s; /* 动画共持续3秒 */
    animation-iteration-count: 1; /* 动画只播放1次 */
    animation-timing-function: linear; /* 匀速播放 */
}

或者可以缩写

img.ys{
    animation:ysstart 3s 1 linear; 
}

img.ys{
    animation:linear 1 ysstart 3s; 
}

将两者集合,开始注入灵魂

将之前用@keyframes定义的关键帧和animation集合。这样就实现了不透明度从100%到0%的渐变效果。

效果演示

@keyframes ysstart{ /* 定义 ysstart 动画关键帧 */
    0%{
        opacity:100%; /* 不透明度100% */
    }
    100%{
        opacity:0%;
    }
}
img.ys{
    animation-name:ysstart; /* ysstart 是动画的名称 */
    animation-duration: 3s; /* 动画共持续3秒 */
    animation-iteration-count: 1; /* 动画一直重复播放 */
    animation-timing-function: linear; /* 匀速播放 */
}

接下来,简单修改一下,将持续时间增加到6秒,再添加一个淡出的过程。是不是就很有感觉了？

效果演示

@keyframes ysstart{ 
    0%{
        opacity:0%;
    }
    50%{
        opacity:100%;
    }
    100%{
        opacity:0%;
    }
}
img.ys-d2{
    animation-name:ysstart; 
    animation-duration: 6s; 
    animation-iteration-count: infinite; 
    animation-timing-function: linear; 
}

抵制不良游戏，拒绝盗版游戏。注意自我保护，谨防受骗上当。适度游戏益脑，沉迷游戏伤身。合理安排时间，享受健康生活。

此界面仅用于学习和交流