css3常用动画示例

css3作为css的最新标准，支持了很多的新特性和动画样式，下面，我将从示例来介绍css3动画的独到之处。

基础知识准备

transition：动画的名称类型动画的执行时间动画的延迟动画的执行方式；//简单的动画

animation: 已定义动画的名字执行时间动画的延迟动画的执行方式循环方式; //自定义动画

动画的执行方式	属性值的变化速度
linear	以同样的速度播放
ease-in	开始速度慢，然后随曲线值加快
ease-out	开始速度块，然后随曲线值放慢
ease	开始速度慢，然后随曲线值加快，然后在随曲线值放慢
ease-in-out	开始速度慢，然后随曲线值加快，然后在随曲线值放慢

transform：rotadeX(60deg) rotadeY(60deg) rotade(60deg) ； //以屏幕宽高为x，y轴，垂直于xy的轴为z轴，分别旋转60deg。

transform：translateX（200px）；与上类似。

transform-orign: 确定旋转/移动的中心点

操作示例与代码展示

一个简单的反转字体动画代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>反转字体</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div>
        <div class="font">
            <div class="ceng">Hello World</div>
            <div class="font_content">Hello World</div>
        </div>

    </div>

</body>

</html>

body,html{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
*{
    margin: 0%;
    padding: 0%;
}
.font{
    position: relative;
    width: 500px;
    height: 80px;
    margin: 50px auto;
    font-size: 50px;
    color: rgb(82, 78, 78);
    font-weight: bold;
}
.font_content{
    position: absolute;
    left: 0;
    top: 0;
    transition: all .5s ease-in;
}
.ceng{
    position: absolute;
    left: 0;
    top: 0;
    color: rgb(143, 238, 245);
    z-index: 1;
    transition: all .4s ease-in;
}
.font:hover .ceng{
    transform: rotateX(360deg);
    left: 10px;
    top: -1px;

}
.font:active .font_content{
    color: royalblue;
    font-size: 20px;
}
::selection{
    color: aqua;
    background-color: rgb(142, 235, 149);
}.text{
    position: absolute;
    right: 50%;
    top: 20%;
}

关于css3动画一些个人启发和学习的体会。

关于学习css3动画，我觉得最好的方法就是模仿在创造，然后用自己的想法，自己的方法去实现它的特效和功能。因为这个东西的变化太多，路径太多，一个动画往往有好几种方法去解决去实现，我们不能被看到的学到的方法限制住自己开发创造的脚步，多尝试，多练习就能更深刻的理解css3。

基础知识准备

操作示例与代码展示

关于css3动画一些个人启发和学习的体会。

猜你喜欢