使用CSS3制作简单的图形运动变换

最新推荐文章于 2022-05-04 21:11:17 发布

PkJY

最新推荐文章于 2022-05-04 21:11:17 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/a214161398a/article/details/49052259

版权

animation：n. 动画，keyframes: n. 关键帧。在CSS3中，要运用到animation动画的话，需要联合运用好keyframes和animation。注意：所有浏览器都需要加前缀才能支持。

Firefox 支持替代的 @-moz-keyframes 规则。

Opera 支持替代的 @-o-keyframes 规则。

Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则。

IE则是加-ms-。

@keyframes属性是用来规定动画，而animation则是用来设置并调用所规定好的动画。

@keyframes的语法如下：

@keyframes animationname {keyframes-selector {css-styles;}

其中各值的用法如下表格：

值	描述
animationname	必需。定义动画的名称。
keyframes-selector	必需。动画时长的百分比。合法的值： 0-100% from（与 0% 相同） to（与 100% 相同）
css-styles	必需。一个或多个合法的CSS样式属性

animation的语法如下：

animation: name duration timing-function delay iteration-count direction;

其中各值得用法如下表格：

值	描述
animation-name	规定需要绑定到选择器的keyframe名称。
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数。
animation-direction	规定是否应该轮流反向播放动画。
animation-play-state	规定动画是否正在运行或暂停。
animation-fill-mode	规定对象动画时间之外的状态。

了解清楚后便可以开始图形运动的代码了。

首先先写好HTML结构。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>xiaoqiu</title>
</head>
<body>
    <div class="wrap">
        <div class="qiubody">
        </div>
    </div>
</body>
</html>

接着，便开始写CSS样式。

    <style type="text/css">
    *{padding:0;margin:0;}
    .wrap{
        position:absolute;
        width:100%;
        height:100%;
    }
    .qiubody{
        width:100px;
        height:100px;
        border-radius:50px;
        position:relative;
        background-color: #ccc;
        -moz-animation:mymove 5s infinite;
        -ms-animation:mymove 5s infinite;
    }
    @-moz-keyframes mymove{
        0% {top:50%;left:40%;width:300px;}
        20%{top:60%;left:80%;height:200px;background-color: red;}
        80%{top:20%;left:30%;width:20px;height:20px;border-radius:10px;background-color: blue;}
        100%{top:50%;left:40%;width:300px;}
    }
    @-ms-keyframes mymove{
        0% {top:50%;left:40%;width:300px;}
        20%{top:60%;left:80%;height:200px;background-color: red;}
        80%{top:20%;left:30%;width:20px;height:20px;border-radius:10px;background-color: blue;}
        100%{top:50%;left:40%;width:300px;}
    }
    </style>

因为我电脑上安装的是IE和火狐，所以只针对这两个浏览器进行适配。要注意的是，要记得对qiubody进行相对定位，对其父级wrap进行绝对定位。经测试，如果没设置，火狐浏览器上正常显示，但IE浏览器上的动画全在浏览器的左上角动。大家可以自行实验。

PkJY

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用CSS3制作简单的图形运动变换

animation：n. 动画，keyframes: n. 关键帧。在CSS3中，要运用到animation动画的话，需要联合运用好keyframes和animation。注意：所有浏览器都需要加前缀才能支持。Firefox 支持替代的 @-moz-keyframes 规则。Opera 支持替代的 @-o-keyframes 规则。Safari 和 Chrome 支持替代的 @-w
复制链接

扫一扫