CSS动画

时间 2019-11-30

标签 css 动画栏目 CSS 繁體版

原文原文链接

　　哈哈, 又到了分享知识的时间了, 也算是对本身所学知识的一个总结吧, 在这里写下的都是本身通过一点点的努力所积累下来的, 写的很差的地方还望你们多多包涵了, 加油!css

　　这些天我学习了下css虽然学的并非不少, 可是感受仍是挺有意思的, 一些东西以前都没有见过, 不过话又说回来了, 这门语言对于我来讲也是一种新知识啦, 还有很长的时间要努力呢, 我会继续努力, 一直坚持下去的, 嘿嘿!html

　　一.CSS动画之过渡web

　　经过使用CSS3, 咱们能够给咱们特定的元素增长几种特定的效果, 可让咱们的做品更加的酷炫, 首先那他是有一种样式转变为另外一种样式的, 他其中包含了几种属性, 分别是下面几种:transition设置四个过渡属性, transition-property多读名称, transition-duration过渡效果花费的时间, transition-timing-function过渡效果的时间曲线, transition-delay过渡效果开始的时间(也就是说延迟开始的时间), 下面给你们附上代码和效果展现, 敬请期待哦, 哈哈!浏览器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过渡动画</title>
    <link rel="stylesheet" type="text/css" href="2d3d转换.css">
</head>
<body>
    <div>过渡动画演示</div>
</body>
</html>

下面是css中的代码:学习

*{
    margin: 0px;
}
div{
    width: 200px;
    height: 200px;
    background-color: red;
    color: white;
    margin: 50px;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
    -moz-transition: width 2s, height 2s, transition 2s;
    -ms-transition: width 2s, height 2s, transition 2s;
    -o-transition: width 2s, height 2s, transition 2s;
    transition: width 2s, height 2s, transform 2s;
}
div:hover{
    width: 200px;
    height: 200px;
    background-color: black;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
}

　　*是通配符, 设置总体的, 能够囊括全部, 动画

-webkit-transition: width 2s,height 2s, -webkit-transform 2s;是谷歌和Safari浏览器的
-moz-transition: width 2s, height 2s, transition 2s; 这个是ie支持的
-ms-transition: width 2s, height 2s, transition 2s;这个是火狐支持
-o-transition: width 2s, height 2s, transition 2s;这个是opear支持的
width 2s表明的是宽度变化持续两秒, 后面的一次类推. 这就是一个简单的过渡动画
同时还有一个属性我没有设置, 那就是transition-delay这个很简单能够直接设置, 不熟悉的友友们能够好好看看哈, 嘿嘿.
　　效果图以下:


　　 以上就是个简单的css过渡动画了.
二.css动画
        经过css也能够建立动画, 可是须要遵循@keyframes规则:
　　规定动画的时长和动画的名称.下面就为你们带来神奇的动画代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过渡动画</title>
    <link rel="stylesheet" type="text/css" href="2d3d转换.css">
</head>
<body>
    <div>动画的建立</div>
</body>
</html>

　　css中的文件代码以下:spa

div{
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    animation: anim 5s;
    -webkit-animation:anim 5s;
}
@keyframes anim {
    0%{
        background-color: red;left: 0px;top: 0px;
    }
    25%{
        background-color: blue;left: 200px;top: 0px;
    }
    50%{
        background-color: purple;left: 200px;top: 200px;
    }
    75%{
        background-color: pink;left: 0px;top: 200px;
    }
    100%{
        background-color: red;left: 0px;top: 0px;
    }
}
@-webkit-keyframes anim  {
    0%{
        background-color: red;left: 0px;top: 0px;
    }
    25%{
        background-color: blue;left: 200px;top: 0px;
    }
    50%{
        background-color: purple;left: 200px;top: 200px;
    }
    75%{
        background-color: pink;left: 0;top: 200px;
    }
    100%{
        background-color: red;left: 0px;top: 0px;
    }
}

　　@-webkit-keyframes anim 这个值得是浏览器支持, 因此若是要全部的都支持的话, 还要引入不少相似的东西. 效果图以下:3d

　　固然啦也能够设置无线循环的动画, 在这里就不提了, 留给你们一点小小的疑问吧, 对不知道的友友来讲, 也是一种探索啦, 嘿嘿好啦今天就写到这里啦, 拜拜各位, 明天见! 一块儿努力哈, 加油加油!code