登录  /  注册
首页 > web前端 > css教程 > 正文

css3动画中圆形运动轨迹的实现

一个新手
发布: 2017-10-20 09:32:13
原创
3752人浏览过

css3中通过@keyframes定义动画,animation设置动画属性,从而实现动画效果;

在animation属性当中,可以规定动画的名称、整个动画的运行时间、运动的速度曲线以及其延迟时间、播放次数等。

animation

animation作为一个复合属性,包括了以下动画属性。

  • animation-name -------------------------------------规定动画名称

  • animation-duration ---------------------------------规定动画完成一次的时间

  • animation-timing-function  ----------------------规定动画的运动速度曲线

  • animation-delay  ------------------------------------规定动画的延迟时间

  • animation-iteration-count  -----------------------规定动画的播放次数

  • animation-direction   ------------------------------规定动画下一周期是否逆向开始

  • animation-fill-mode  -------------------------------规定动画时间之外的状态

  • animation-play-state  ------------------------------规定动画的运行和暂停

animation-timing-function

规定动画的速度曲线。默认是 "ease"。常用的运动速度曲线还有以下几种:

  • linear:线性过渡。

  • ease-in:由慢到快。

  • ease-out:由快到慢。

  • ease-in-out:由慢到快再到慢。

也可以直接使用贝塞尔曲线规定运行的速度曲线,贝塞尔曲线的4个数值需在[0, 1]区间内。

animation-direction

规定动画是否在下一周期逆向播放。默认是 "normal"

  • reverse:反方向运动

  • alternate:先正常方向再反方向运动,持续交替

  • alternate-reverse:先反方向再正常方向运动,持续交替

animation-fill-mode

规定对象动画时间之外的状态。常用值如下:

  • none:默认值

  • forwards:设置对象状态为动画结束时的状态

  • backwards:设置对象状态为动画开始时的状态

圆形运动轨迹

实现代码如下:

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>沿圆形轨迹运动</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        #trajectory {
            width: 300px;
            height: 300px;
            border: 4px solid #949494;
            border-radius: 50%;
            position: relative;
            left: calc(50% - 153px);
            top:calc(50% - 153px);
        }
        @keyframes moveX{
            0% {left: -22px;}
            100% {left: 282px;}
        }
        @keyframes moveY{
            0% {top: -22px;}
            100% {top: 282px;}
        }
        #move {
            width: 40px;
            height: 40px;
            font-size: 12px;
            background-color: #32c33a;
            border-radius: 50%;
            position: absolute;
            left:-22px;
            top:-22px;
            animation: moveX 4s cubic-bezier(0.36,0,0.64,1) -2s infinite alternate, moveY 4s cubic-bezier(0.36,0,0.64,1) 0s infinite alternate;
        }
    </style></head><body>
    <p id="trajectory">
        <p id="move">Immortal brother</p>
    </p></body></html>
登录后复制

 以上代码的注意点如下:

  • 对body高度100%的设置原因在于html5环境下body的默认高度为0

  • calc在使用过程中,值与值之间的“-”和“+”两端的空格必不可少

  • 动画当中的left和top值为物体运动的起始位置和结束位置,要注意border值

  • 动画一次执行的运动轨迹仅为一半

  • 速度曲线:cubic-bezier(0.36,0,0.64,1);

  • 两个方向的延迟时间的设置 X:-2s;Y : 0s

  • 先正方向再反方向持续交替运行 :alternate

以上就是css3动画中圆形运动轨迹的实现的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号