CSS实现催眠动画效

最新推荐文章于 2021-04-21 16:38:27 发布

技术成长ing

最新推荐文章于 2021-04-21 16:38:27 发布

阅读量1.8k

点赞数

分类专栏： html+css+js 文章标签： Less编译成css CSS实现催眠动画 CSS实现炫酷动画 Less实现循环

本文链接：https://blog.csdn.net/jackson23333/article/details/93078650

版权

html+css+js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

主要使用 CSS 实现的动画效果，其中 CSS 需要使用 Less 编译完成。效果如下图：

Html 代码：

<!DOCTYPE html>
<html>
    <head>
        <title>Hypnotic Ring</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="./Hyp.css">
    </head>
    <body>
        <div class="frame"></div>
        <script src="./Hyp.js"></script>
    </body>
</html>

Less 代码：

 .frame{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    margin-top: -200px;
    margin-left: -200px;
    border-radius: 2px;
    box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    /*background-color: #27ae60;*/
    background-color: skyblue;
    color: #fff;
}
.circle{
    position: absolute;
    width: 200px;
    height: 200px;
    top: 100px;
    left: 100px;
    border-radius: 50%;
    border: 2px dotted #fff;
    transform-origin: 50% 50%;
    /*transform: scale(2) translate(0, 0);*/
}

/* less 用递归实现循环 */
.circleFunction(@index) when (@index <= 50) {
    .circle-@{index}{
        animation: circle 10s ease-in-out @index/5s infinite backwards;
        // z-index: @index;
    }
    // 递归调用
.circleFunction(@index+1);
}
// 从参数 1 开始调用
.circleFunction(1);

/* 动画 */
@keyframes circle{
    0%{
        transform: scale(0) translate(-100px, -200px);
        opacity: 0.4;
    }
    100%{
        transform: scale(3.5) translate(0, 0);
        opacity: 1;
    }
}

在使用 less 前需要完成两个步骤：

1、全局安装 less：npm install -g less（注：没有 npm 工具包的需要先去官网下载自带 npm 的 node 。网址：https://nodejs.org/en/）

2、编译 less： lessc 要编译的文件名.less 编译后的文件名.css

如：lessc Hyp.less Hyp.css，编译成 css 文件后，导入就行了。

Js 代码：

var frame = document.querySelector('.frame');
for(var i = 0; i < 50; i++){
    var div = document.createElement('div');
    div.className = 'circle';
    div.classList.add('circle-' + (i + 1));
    frame.appendChild(div);
}

该动画效果来自一个专门练习 CSS 的网址：https://100dayscss.com/?dayIndex=62

关于 Less的介绍，和更多 css 动画可以去博主的 github ：https://github.com/cao-lianhui/CSS100day