[log]css圆周动画实现

最新推荐文章于 2023-07-05 18:35:34 发布
最新推荐文章于 2023-07-05 18:35:34 发布
阅读量464 收藏 1
点赞数 1
文章标签： css animation keyframes
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/java_sparrow/article/details/84030534
版权
log 同时被 2 个专栏收录
55 篇文章 0 订阅
订阅专栏
html
11 篇文章 0 订阅
订阅专栏

前言

创建动画就是把在时间轴上规定好每一帧的效果,然后进行播放就形成了动画,这就是我理解的动画

keyframes

@keyframes 就是每一帧的效果 从0 到100 就是整个时间轴

http://www.w3school.com.cn/cssref/pr_keyframes.asp

@keyframes animationname  { keyframes-selector {css-styles;}   }
  • animationname 动画名称
  • keyframes-selector 0 - 100
  • css-styles 样式

animation

将动画和div进行绑定

animation: name duration timing-function delay iteration-count direction;
  • name 动画名称
  • duration 动画时长
  • timing-function 动画速度
    在这里插入图片描述
  • delay 开始前的延迟
  • iteration-count 播放次数
    • infinite 无限次播放
  • direction 是否反向播放
    • alternate 反向轮流播放

圆环动画

在这里插入图片描述

<div id="lopp"></div>
<div class="ball ball1">1</div>

@keyframes animX{
        0% { left: 0px; }
        100% { left: 300px; }
    }
    @keyframes animY{
        0% {top: 0px;}
        100% {top: 300px;}
    }
    @keyframes scale {
        0% {
            /*transform: scale(0.7)*/
        }
        50% {
            /*transform: scale(1)*/
        }
        100% {
            /*transform: scale(0.7)*/
        }
    }


    .ball {
        width: 100px;
        height: 100px;
        background-color: #f66;
        border-radius: 50%;
        position: absolute;
        color:#fff;
        font-size:22px;
        display:flex;
        align-items:center;
        justify-content:center;
    }

    .ball1 {
        animation:
                animX 10s cubic-bezier(0.36, 0, 0.64, 1) -5s infinite alternate,
                animY 10s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,
                scale 20s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;

    }

css 圆周运动

围绕原心旋转

在这里插入图片描述

  • 用到的参数
    • alternate : 因为该动画顺时针重复播放
    • infinite:参考ball1 , 使用延时,避免从圆环的外边开始转动
    • cubic-bezier: 使用贝塞尔曲线,进行匀速的转动,(对于交互的研究欠缺就不说了)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        @keyframes animX {
            0% {
                margin-left: 0px;
            }
            100% {
                margin-left: 400px;
            }
        }

        @keyframes animY {
            0% {
                margin-top: 0px;
            }
            100% {
                margin-top: 400px;
            }
        }

        /*自传*/
        @keyframes test {
            to { transform: rotate(1turn); }
        }


        .ball {
            width: 100px;
            height: 100px;
            background-color: #d87c7c;
            border-radius: 50%;
            position: absolute;
            font-size: 12px;
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
        }


        .ball1 {
            background-color: #d7ab82;
            /*从  0，0 到 400，400 的  一条直线*/
            animation:
                /*    动画名称 耗时   速度                     延迟    无限播放 轮流反向播放*/
                    animX 10s cubic-bezier(0.36, 0, 0.64, 1)  infinite    ,
                    animY 10s cubic-bezier(0.36, 0, 0.64, 1)  infinite    ;
        }

        .ball2 {
            background-color: #6e7074;
            animation:
                    animX 10s cubic-bezier(0.36, 0, 0.64, 1)  1s infinite alternate,
                    animY 10s cubic-bezier(0.36, 0, 0.64, 1)  1s infinite alternate ;
        }

        .ball3 {
            background-color: #61a0a8;
            /* 顺时针  从x轴的0 出来，*/
            animation:
                    animX 10s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,
                    animY 10s cubic-bezier(0.36, 0, 0.64, 1) 5s infinite alternate;
        }


        .ball4 {
            /* 逆时针 */
        background-color: #efa18d;
        animation:
        animX 10s cubic-bezier(0.36, 0, 0.64, 1)  5s infinite alternate,
        animY 10s cubic-bezier(0.36, 0, 0.64, 1)  0s infinite alternate ;
        }

        .ball5 {
            /*   在4 的基础上   顺时针 不从0 出来 */
            background-color: #1d8ce0;
            animation:
            animX 10s cubic-bezier(0.36, 0, 0.64, 1)  -2s infinite alternate,
            /* -10 左下角*/
            animY 10s cubic-bezier(0.36, 0, 0.64, 1)  -7s infinite alternate ;
        }
        .ball6 {

            /*  在4 的基础上   顺时针 不从0 出来   */
            background-color: #2a72d6;
            animation:
            animX 10s cubic-bezier(0.36, 0, 0.64, 1)  0s infinite  alternate ,
            animY 10s cubic-bezier(0.36, 0, 0.64, 1)  -5s infinite   alternate;
        }
        .ball7 {

            /*  在3 的基础上   顺时针 不从0 出来 */
            background-color: #3dd678;
            animation:
            animX 10s cubic-bezier(0.36, 0, 0.64, 1)  -5s infinite  alternate ,
            animY 10s cubic-bezier(0.36, 0, 0.64, 1)  0s infinite   alternate;
        }
        .ball8 {

            /*  在3 的基础上   顺时针 不从0 出来 */
            background-color: #28d6a5;
            animation:
            animX 10s cubic-bezier(0.36, 0, 0.64, 1)  -9s infinite  alternate ,
            animY 10s cubic-bezier(0.36, 0, 0.64, 1)  -4s infinite   alternate;
        }


        /*.ball4 {*/
            /*background-color: #efa18d;*/
            /*!*顺时针*!*/
            /*animation:*/
                    /*animX 10s cubic-bezier(0.36, 0, 0.64, 1) -13.571s infinite alternate,*/
                    /*animY 10s cubic-bezier(0.36, 0, 0.64, 1) -8.571s infinite alternate ;*/
        /*}*/

        /*.ball5 {*/
            /*background-color: #787464;*/
            /*animation:*/
                    /*animX 10s cubic-bezier(0.36, 0, 0.64, 1) -16.428s infinite alternate,*/
                    /*animY 10s cubic-bezier(0.36, 0, 0.64, 1) -11.428s infinite alternate ;*/
        /*}*/


        #lopp {

            width: 500px;
            height: 500px;
            border-radius: 50%;
            background-color: #cc7e63;
        }

        body{
            height: 100vh;
            margin: 0;
            padding: 0;
            display: flex;
        }

        .page{
            width: 1300px;
            height: 700px;
            min-width: 1300px;
            min-height: 700px;
            background-color: #724e58;
            margin: auto auto;
            display: flex;
            align-items: center;
            justify-content: center;

        }
    </style>
</head>

<body>

<div class="page">
    <div id="lopp">
        <!--<div class="ball ball1">1</div>-->
        <!--<div class="ball ball2">2</div>-->
        <div class="ball ball3">3</div>
        <div class="ball ball4">4</div>
        <div class="ball ball5">5</div>
        <div class="ball ball6">6</div>
        <div class="ball ball7">7</div>
        <div class="ball ball8">8</div>
    </div>
</div>



<script type="text/javascript">

</script>
</body>
</html>
  • 工具

直观的看到贝塞尔曲线运动的效果
http://cubic-bezier.com/#.36,0,.64,1
使用google 浏览器 也可以看到

在这里插入图片描述

感谢 @北京-前端-狂热者 大佬给的提示和帮助

go_sparrow
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序开发：动画案例之圆点沿着圆圈运动
第九程序官方博客
04-06 1万+
滴滴作为第一批的微信小程序开发者，大量地用到了动画，积累了一些经验，由于市面上的小程序动画案例很少，我们就分享一部分滴滴做过的案例：
css实现圆环路径,笔记：CSS、canvas 和 SVG 分别实现元素沿环形路径运动动画
weixin_34118910的博客
08-04 1144
CSS 部分最早接触到使用 CSS 使元素以环形路径运动的办法来自于 Lea Verou 的书《CSS 揭秘》中第八章中的《沿环形路径平移的动画》。虽然随着 CSS 的发展部分语法有些出入，不过作者早在 2012 年就在自己的博客上发表了《Moving an element along a circle》记录相关思路演示以下是一个根据其思路制作的例子，做了一些简单演变，方便演示。理解上面这种办法的...
Android 实现自己的LOG信息
09-01
本文主要讲解Android LOG,这里对如何创建自己的Android LOG信息做了详细的介绍，并附简单代码示例，有需要的小伙伴可以参考下
c_cPP_log.rar_log c实现
09-23
用c++语言编程实现常见项目中日志模块的显示与保存
Android 修改开机LOG和启动动画
最新发布
02-20
Android 修改开机LOG和启动动画
4种纯CSS3小球物理运动动特效
12-13
这是一组效果非常炫酷的纯CSS3小球物理运动动特效。这组效果动画共有4种效果：小球弹跳效果，小球绕大球旋转效果，小球碰撞效果和小球自旋动画效果。
使用前端三件套制作简易圆周运动（JS，HTML，CSS）
qq_75222206的博客
07-05 519
首先在制作圆周运动动画时，我们需要了解一种前端语言。
动画沿椭圆路线进行旋转
哆来A梦没有口袋的博客
08-04 1095
利用css的animation实现沿着椭圆线旋转
使用css+html+js实现爱心跳动、走马灯、圆周运动
m0_66894919的博客
07-05 805
在body中定义两个按钮，设置点击事件函数，这里不能使用start或stop作为函数名称，因为是关键字。onclickstart1</onclickstop1</随后获取id为divF和z4的两个元素对象，当按钮被点击时可以修改对应对象的class值，start1函数分别将对象的class添加了m和z4c两个值，stop1函数将其去掉。添加和去掉class值是为了控制元素是否应用动画，这里通过js修改class值来控制动画是因为js无法直接控制css样式。
css动画，圆周运动
mus-z的博客
08-22 1036
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> @keyframes r{
html5 css3做圆周运动,使用CSS3矩阵变换（transform:matrix）实现的圆周运动
weixin_39940688的博客
06-17 275
CSS语言：CSSSCSS确定html,body {padding: 0;margin: 0;position: absolute;width: 100%;height: 100%;overflow: hidden;top: 0;left: 0;}html {background: -webkit-linear-gradient(top, #92d1c4 0%, #c9dcbc 100%);bac...
html5 css3做圆周运动,​css3实现圆周运动效果
weixin_39569389的博客
06-17 260
css3新增了transform和animation等新的样式，也可以用来做圆周运动。transform里面有一个变形函数是rotate，这时就需要使用逆向思维。元素本身并不发生运动，而是轨道自身在旋转，会实现视觉上的圆周运动效果html>body{margin-top:100px;}@keyframesrotate1{100%{transform:rotate(360deg);}}@...
LOG算法的matlab实现
07-31
本文介绍的是采用LOG算法的matlab实现的源代码。
html5 css3做圆周运动,css3实现元素圆周运动
weixin_34632251的博客
06-17 288
2015-04-09 14:22:50在网页的编写中，好多特效都是通过js来实现，但是还有很多通过css3实现的特效，并且这种方法实现的特效不需要引入外部文件，只需要短短几行代码即可实现，下面这段代码就是由css3来实现的元素进行圆周运动的代码：body{/*背景色*/background:#000;}*{margin:0;padding:0;}.stage{width:400px;height:...
html5 css3做圆周运动,圆周运动的css3特效案例
weixin_39842955的博客
06-17 171
圆周运动的css3特效.box{width:300px;height:300px;margin:200px auto;position:relative;-webkit-perspective:1500px;}.div{width:300px;height:300px;position:absolute;transform-style:preserve-3d;animation:name 8s l...
css的rotate3d实现炫酷的圆环转动动画
热门推荐
苏苏就是小苏苏的博客
08-28 1万+
css的rotate3d实现炫酷的圆环转动动画
css实现炫酷的圆环相交转动动画
苏苏就是小苏苏的博客
08-24 1763
css实现炫酷的圆环相交转动动画
纯CSS实现圆周运动小球
weixin_33725126的博客
09-12 1921
转载自南信网 链接：http://www.nanshanqu.com/web/172.html我们时常在页面中见到一些动画效果，这些动画效果，很多可以仅通过CSS来实现。在这里我们用到了CSS3的animation属性。animation 属性是一个简写属性，用于设置六个动画属性：animation-name 规定需要绑定到选择器的 keyframe 名称。animation...
css3 3D圆周运动
MrFano的博客
06-05 1504
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; div{ position: absolute; top: 200px; left:
console.log动画
08-30
console.log本身是JavaScript中的一个函数，用于在控制台打印输出信息。它不适用于创建动画效果，因为它只是将文本输出到控制台，并不能直接改变显示的内容。如果你想要创建动画效果，你需要使用其他技术和方法。 在网页中创建动画效果通常会使用CSS或JavaScript。使用CSS，你可以通过添加或移除类来改变元素的样式，从而实现动画效果。例如，你可以使用CSS的@keyframes规则来定义一个动画序列，然后将该动画应用到元素上。 另一种方法是使用JavaScript来控制元素的样式属性，实现动态改变。你可以使用JavaScript中的定时器函数（如setInterval或requestAnimationFrame）来反复更新元素的样式，从而创造出动画效果。 总结起来，如果你想要创建动画效果，console.log并不是一个合适的选择。你可以使用CSS或JavaScript来实现动画效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值