边线动画小案例

最新推荐文章于 2023-08-18 08:05:24 发布
最新推荐文章于 2023-08-18 08:05:24 发布
阅读量208 收藏
点赞数
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fanfan_h/article/details/89976604
版权

1：爱的魔力转圈圈

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body,html{
            padding:0;
            margin:0;
            width:100%;
            height:100%;
            background: black;
        }
        .fan{
            position: relative;
            width:500px;
            height:500px;
            margin:100px auto;
        }
        .f{
            position: relative;
            width:90%;
            height:90%;
            margin:5%;
            border:1px dashed white;
            border-radius: 50%;
            box-sizing: border-box;
        }
        .f:before{
            content: "";
            position: absolute;
            left:-2px;
            top:-1px;
            width:100%;
            height:100%;
            border:2px solid;
            border-radius: 50%;
            border-color: transparent transparent transparent rgba(178, 52, 235, 0.88);

        }
        .f:after{
            content: "";
            position: absolute;
            left:-2px;
            top:-1px;
            width:100%;
            height:100%;
            border:2px solid;
            border-radius: 50%;
            border-color: transparent #fff421 transparent transparent ;
        }
        @keyframes f_info {
            from{
                transform: rotatez(0deg);
            }
            to{
                transform: rotatez(360deg);
            }
        }
        .f1{
            animation:f_info 5s linear infinite ;
        }
        .f2{
            animation:f_info 5s linear infinite ;
        }
        .f3{
            animation:f_info 5s linear infinite ;
        }
        .f4{
            animation:f_info 5s linear infinite ;
        }
        .f5{
            animation:f_info 5s linear infinite ;
        }
        .f6{
            animation:f_info 5s linear infinite ;
        }
        .f7{
            animation:f_info 5s linear infinite ;
        }
        .f8{
            animation:f_info 5s linear infinite ;
        }
        .f9{
            animation:f_info 5s linear infinite ;
        }
        .f10{
            animation:f_info 5s linear infinite ;
        }
        .f11{
            animation:f_info 5s linear infinite ;
        }
        .f12{
            animation:f_info 5s linear infinite ;
        }
    </style>
</head>
<body>
    <div class="fan">
        <div class="f f1">
            <div class="f f2">
                <div class="f f3">
                    <div class="f f4">
                        <div class="f f5">
                            <div class="f f6">
                                <div class="f f7">
                                    <div class="f f8">
                                        <div class="f f9">
                                            <div class="f f10">
                                                <div class="f f11">
                                                    <div class="f f12">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

在这里插入图片描述
2：弹簧动画

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body,html{
            padding:0;
            margin:0;
            width:100%;
            height:100%;
            background: #000000;
        }
        .fan{
            position: relative;
            width:500px;
            height:500px;
            margin:100px auto;
            transform: rotatex(80deg);
        }
        .f{
            width:90%;
            height:90%;
            margin:5%;
            border:2px dashed white;
            box-sizing: border-box;
            border-radius: 50%;
        }
           @keyframes fa_mi {
               0%{
                   transform:translatey(0px)
               }
               25%{
                   transform:translatey(200px)
               }
               75%{
                   transform:translatey(-200px)
               }
               100%{
                   transform:translatey(0px)
               }
           }
        .f1{
            animation: fa_mi 1s linear infinite;
            border-color: #ac00f9;
        }
        .f2{
            animation: fa_mi 1s linear infinite;
            border-color: #3d00dd;
        }
        .f3{
            animation: fa_mi 1s linear infinite;
            border-color: #ef01f9;
        }
        .f4{
            animation: fa_mi 1s linear infinite;
            border-color: #f90046;
        }
        .f5{
            animation: fa_mi 1s linear infinite;
            border-color: #de0800;
        }
        .f6{
            animation: fa_mi 1s linear infinite;
            border-color: #f19702;
        }
        .f7{
            animation: fa_mi 1s linear infinite;
            border-color: #fdf30c;
        }
        .f8{
            animation: fa_mi 1s linear infinite;
            border-color: #cdf104;
        }
        .f9{
            animation: fa_mi 1s linear infinite;
            border-color: #3dea0e;
        }
        .f10{
            animation: fa_mi 1s linear infinite;
            border-color: #07e400;
        }
        .f11{
             animation: fa_mi 1s linear infinite;
             border-color: #00f40c;
         }
        .f12{
            animation: fa_mi 1s linear infinite;
            border-color: #1cdd97;
        }
        .f13{
            animation: fa_mi 1s linear infinite;
            border-color: #07c4f3;
        }
        .f14{
            animation: fa_mi 1s linear infinite;
            border-color: #166ef9;
        }
        .f15{
              animation: fa_mi 1s linear infinite;
              border-color: #0003f9;
          }
        .f16{
              animation: fa_mi 1s linear infinite;
              border-color: #5300df;
          }



    </style>
</head>
<body>

<div class="fan">
    <div class="f f1">
        <div class="f f2">
            <div class="f f3">
                <div class="f f4">
                    <div class="f f5">
                        <div class="f f6">
                            <div class="f f7">
                                <div class="f f8">
                                    <div class="f f9">
                                        <div class="f f10">
                                            <div class="f f11">
                                                <div class="f f12">
                                                    <div class="f f13">
                                                        <div class="f f14">
                                                            <div class="f f15">
                                                                <div class="f f16">

                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

在这里插入图片描述
同级弹簧

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>同级弹簧</title>
    <style>
        body,html{
            padding:0;
            margin:0;
            width:100%;
            height:100%;
            background: #000000;
        }
        .m{
            position: relative;
            width:500px;
            height:500px;

            margin:100px auto;
            transform: rotatex(80deg);
        }
        .mi{
            position: absolute;
            border:2px dashed ;
            border-radius: 50%;
            box-sizing: border-box;
        }
        @keyframes mi_ni {
           0%{
               transform: translatey(0);
           }
            25%{
                transform: translatey(200px);
            }
            75%{
                transform: translatey(-200px);
            }
            100%{
                transform: translatey(0);
            }
        }
        .m1{
            width:90%;
            height:90%;
            margin:5%;
            animation: mi_ni 1s 1700ms linear infinite;
            border-color: #ff0232;
        }
        .m2{
            width:85%;
            height:85%;
            margin:7.5%;
            animation: mi_ni 1s 1600ms linear infinite;
            border-color: #f81710;

        }
        .m3{
            width:80%;
            height:80%;
            margin:10%;
            animation: mi_ni  1s 1500ms linear infinite;
            border-color: #ff690c;

        }
        .m4{
            width:75%;
            height:75%;
            margin:12.5%;
            animation: mi_ni  1s 1400ms linear infinite;
            border-color: #fffb01;

        }
        .m5{
            width:70%;
            height:70%;
            margin:15%;
            animation: mi_ni  1s 1300ms linear infinite;
            border-color: #a6ea00;
        }
        .m6{
            width:65%;
            height:65%;
            margin:17.5%;
            animation: mi_ni 1s 1200ms linear infinite;
            border-color: #26ff00;
        }
        .m7{
              width:60%;
              height:60%;
              margin:20%;
            animation: mi_ni  1s 1100ms linear infinite;
            border-color: #00ff0d;
        }
        .m8 {
            width: 55%;
            height: 55%;
            margin: 22.5%;
            animation: mi_ni  1s 1000ms linear infinite;
            border-color: #00f279;
        }
        .m9{
            width:50%;
            height:50%;
            margin:25%;
            animation: mi_ni  1s 900ms linear infinite;
            border-color: #00f7c1;

        }
        .m10{
            width:45%;
            height:45%;
            margin:27.5%;
            animation: mi_ni  1s 800ms linear infinite;
            border-color: #00efff;

        }
        .m11{
              width:40%;
              height:40%;
              margin:30%;
            animation: mi_ni  1s 700ms linear infinite;
            border-color: #006dff;

        }
        .m12{
                width:35%;
                height:35%;
                margin:32.5%;
            animation: mi_ni 1s 600ms linear infinite;
            border-color: #9200ff;

        }
        .m13{
            width:30%;
            height:30%;
            margin:35%;
            animation: mi_ni  1s 500ms linear infinite;
            border-color: #3200ff;

        }
        .m14{
            width:25%;
            height:25%;
            margin:37.5%;
            animation: mi_ni  1s 400ms linear infinite;
            border-color: #7a2fa8;

        }
        .m15{
            width:20%;
            height:20%;
            margin:40%;
            animation: mi_ni  1s 300ms linear infinite;
            border-color: #b35ab9;

        }
        .m16{
            width:15%;
            height:15%;
            margin:42.5%;
            animation: mi_ni  1s 200ms linear infinite;
            border-color: #dd008e;
        }
        .m17{
            width:10%;
            height:10%;
            margin:45%;
            animation: mi_ni 1s 100ms linear infinite;
            border-color: #ae389f;
        }
        .m18{
            width:5%;
            height:5%;
            margin:47.5%;
            animation: mi_ni 1s 0ms linear infinite;
            border-color: #dc20c5;
        }

    </style>
</head>
<body>
<div class="m">
    <div class="mi m1"></div>
    <div class="mi m2"></div>
    <div class="mi m3"></div>
    <div class="mi m4"></div>
    <div class="mi m5"></div>
    <div class="mi m6"></div>
    <div class="mi m7"></div>
    <div class="mi m8"></div>
    <div class="mi m9"></div>
    <div class="mi m10"></div>
    <div class="mi m11"></div>
    <div class="mi m12"></div>
    <div class="mi m13"></div>
    <div class="mi m14"></div>
    <div class="mi m15"></div>
    <div class="mi m16"></div>
    <div class="mi m17"></div>
    <div class="mi m18"></div>
</div>
</body>
</html>

在这里插入图片描述效果好像不太完美，但是把学习的知识都用上啦，要好好努力，认真构思，学会创作更有灵魂的东西

莓莓儿～
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
animation动画小实例讲解
正在山路上的博客
09-25 301
使用css的animation将静态图实现动画效果
html流程svg动画,12款基于SVG的HTML5应用和动画
weixin_29296241的博客
06-05 491
本文作者html5tricks，转载请注明出处SVG是HTML的扩展标记语言，利用SVG可以做非常多的矢量动画，结合1、HTML5 SVG 3D蝴蝶飞舞动画 逼真超酷这次我们要分享的这款HTML5动画简直就是逆天，利用SVG制作的3D蝴蝶飞舞动画，蝴蝶飞舞动画非常逼真，蝴蝶飞舞的路线是利用SVG构造的。另外，动画使用了一张立体感很强的天空背景图，让蝴蝶飞舞时更加显得立体逼真。2、一组HTML5 S...
Animation动画实例
01-29
Animation 动画实例，很有价值，值得参考。
Android 中Animation简单例子
mmdev
09-28 118
关于动画的实现，Android提供了Animation，在Android SDK介绍了2种Animation模式： 1. Tween Animation：通过对场景里的对象不断做图像变换(平移、缩放、旋转)产生动画效果，即是一种渐变动画； 2. Frame Animation：顺序播放事先做好的图像，是一种画面转换动画。 动画类型 下面先来看看Android提供的动画...
animation案例
lbs311709000127的博客
01-29 296
效果： 这是一个动画 代码： <!DOCTYPE html> <html> <head> <meta charset="{CHARSET}"/> <title></title> <style type="text/css"> div:nth-child(1){ width: ...
Animation的小例子
qq_35282636的博客
06-21 336
1.在res文件夹中新建一个动画文件：例如  splash_anim.xml               android:fromAlpha="0"         android:toAlpha="1"         android:duration="2000"         /> 2.启动动画： private void initAnim() { Ani
源码及素材 Three.js前端三维图形开发案例集锦
07-05
随书的所有案例源码及素材 本书以“问题描述+解决方案”的模式，使用二百多个实例介绍了Scene、Renderer、Camera、Geometry、Mesh、Light、Material...检测图形边缘，添加轮廓边线，加载各种外部模型并播放模型动画等。
百度地图开发入门（5）：飞线动画示例
--Joern的物联领域--
06-14 1561
讲解另一种常见应用-飞线动画，主要用于展示数据流向https://lbsyun.baidu.com/solutions/mapvdata这里曲线的绘制可以借助百度的曲线生成器：https://lbsyun.baidu.com/solutions/mapvdata 这里其实mapv（mapvgl的前身）有很多很好的飞线图案例可以参考，不过官方已经不维护了，但是我们还是可以去学习一下，例如这里：http://mapv.baidu.com/examples/#baidu-map-forceEdgeBundli
平行投影法动画视频教程.zip
09-11
平行投影法，也被称为正投影法，是一种在二维平面上表现三维物体的几何形状和空间关系的绘图技术。...观看并实践教程中的案例，将有助于理解和掌握平行投影法在动画制作中的实际运用，从而创作出更具专业水准的作品。
第10课《会变色的文字—遮罩层动画》
09-24
- **建立遮罩层**：绘制无边线的矩形，在特定帧处插入关键帧，使用任意变形工具扩大矩形覆盖文字，最终将此图层设置为遮罩层。 - **学生活动**：跟随老师的演示操作，逐步完成任务。 - **设计意图**：通过实践...
HTML5 3D弹簧线圈动画特效
08-23
这是一款基于HTML5的3D动画特效，它是一个线圈弹簧，并且可以像波浪一样运动，就像真实的弹簧一样，每一圈的弹簧都会跟随上一圈的运动而运动，非常逼真。之前我们也分享过一款CSS3弹簧线圈动画，效果也很不错。
CSS变形与动画（三）：animation帧动画 详解（用法 + 四个例子）
最新发布
Cosmoshhhyyy的博客
08-18 420
本文介绍css中的animation帧动画，同时包含四个例子，更好的理解其用法。
CSS动画animation的简单应用
J_Sky：编程爱好者,又菜又爱玩.
05-04 290
这个css动画包含了animation的常用属性，仔细观察可以了解到各个属性的含义，修改其属性值，观察盒子模型的动画的变化有助于了解这些属性的含义。要在CSS中创建动画，我们可以使用animation属性。该属性允许我们指定动画的关键帧、持续时间、时间函数、延迟和迭代次数。
使用 animation实现几个小案列
qq_44820039的博客
04-27 307
学习了animation发现它真的好玩，以前写动画必须要JS才能完成，JS复杂性高，需要对DOM频繁操作会导致页面重绘重新排版，造成阻塞。虽然这里说了JS的缺点但是它也有它的优点，今天不作细讲（请看下回分解）。 今天主要用animation来实现几个小动画。 一、安卓手机充电效果 这个图都不陌生吧，今天将用代码来实现它！ 首先写这个需要那些元素： 最外层div ：g-container 装充电...
RecyclerView零点突破(动画+边线篇）
weixin_33923148的博客
12-05 163
0、前言: 动画和边线估计有点冷门，很多人都将就凑合,今天我就来深入讲解一下吧 边线的方案是网上流传的一种，个人感觉也是最好的，并稍稍改进了一点 本篇使用的测试布局见上篇：RecyclerView零点突破(基本使用篇） 留图镇楼 镇楼1 镇楼2 本系列分为3篇： RecyclerView零点突破(基本使用篇） RecyclerView零点突破(动画+边线篇） Recy...
Animation动画技巧与细节
油墨香^-^的博客
09-22 1843
requestAnimationFrame - 通过一个回调函数来改变图像位置，由系统来决定这个回调函数的执行时机，比定时修改的性能更好，不存在失帧现象。属性可以使圆的短划线和缺口产生偏移，添加 @keyframes 动画后能够实现从无到有的效果，stoke-dashoffset 参考资料[6]发生阶跃(即图中的空心圆 → 实心圆),动画结束时第 N 帧已经被跳过(即图中的空心圆 → 实心圆)，停留在了 N+1 帧。都能满足我们的需求，并且相对于 js 实现，可以大大提升我们的开发效率，降低开发成本。
CSS3中的动画属性详解
zhuangvi的博客
04-04 1053
开篇一张图，内容全靠编！！！ 是的，这次我们讲的就是做个简单的css3小动画 那么css3动画是怎么完成的呢？ css3里面动画我们可以分成2D动画和3D动画。首先，我们需要了解一下css3动画都有些什么属性。 2D动画的属性： 变形属性transform： 位移—translate()、缩放—scale()、旋转—rotate()、倾斜—skew()。 transform:translate(...
animation动画全解
技术无止境，人生仍探索。
07-23 7684
animation八大属性共用 代码 HTML <!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=
HTML入门DAY15
t3163786的博客
02-24 490
背景渐变 1.线性渐变 background：linear-gradient(颜色1，颜色2)普通渐变 background：linear-gradient(颜色1 %，颜色2 %)设置渐变比例 background：linear-gradient(to 方向， 颜色1，颜色2)设置渐变方向 background：linear-gradient(to 方向一 方向，二颜色1，颜色2)设置对角渐变 background：linear-gradient( *dog ，颜色1，颜色2)设置渐变角度 如果渐变比
figma怎么设置边线
07-25
在 Figma 中设置边线的方法如下： 1. 选择要添加边线的图层或对象。 2. 在右侧的 "设计" 面板中，找到 "边线" 选项。 3. 点击 "边线" 旁边的 "+" 按钮，以添加一个新的边线。 4. 在弹出的设置窗口中，你可以调整...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值