CSS实现催眠动画效

主要使用 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

CSS实现催眠动画效相关推荐

css过渡和动画的区别
css过渡和动画的区别 css过渡和动画(animation)都能让元素动起来,区别在于: 1.css过渡需要有一个事件触发(像 :hover等),才会起作用,而animation不需要. 2.动画( ...
css 加载动画如何生效,CSS 加载动画
CSS加载动画实现加载动画效果,需要的两个关键步骤: 1.做出环形外观 border:16px solid #f3f3f3; border-radius:50%; border-top:16px s ...
html 动画div右侧消失,使用animate.css时，动画一开始不隐藏,如何解决呢？
animate.css 的入场动画,一开始(初始态)怎么隐藏呢?(否则会闪一下.) 动画结束后要保持显示. 补充.. 使用了官网推荐的jquery 扩展代码,运动完后自动删除 class. 这是一个坑 ...
如何使用纯 CSS 创建翻牌动画
下面的示例向您展示了如何使用纯 CSS 创建翻牌动画. 作者:坚果公众号:"大前端之旅" 华为云享专家,InfoQ签约作者,阿里云专家博主,51CTO博客首席体验官,开源项目GV ...
html怎么让图标动起来,让ICON生动起来纯CSS实现带动画的天气图标
让ICON生动起来纯CSS实现带动画的天气图标 1月 20, 2016 评论 (1) Sponsor CSS3动画属性并不是很多,但重点其实是你怎样去运用它,从简单的hover状态或复杂的小动画,都 ...
为网格布局图片打造的超炫 CSS 加载动画
今天,我想与大家分享一些专门为网格布局的图像制作的很酷的 CSS 加载动画效果.您可以把这些效果用在你的作品集,博客或任何你想要的网页中.设置很简单.我们使用了下面这些工具库来实现这个效果: Norm ...
[css] 手动写动画最小时间间隔是多少，为什么？
[css] 手动写动画最小时间间隔是多少,为什么? 一般浏览器的刷新频率为每秒60次,所以最小事件间隔为 1/60*1000 约 16.7ms 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很 ...
[css] 过渡和动画的区别是什么？
[css] 过渡和动画的区别是什么? 相同:都会让你的页面元素动起来区别: 过渡 transition1.需要事件触发,比如hover,focus,checked , js改, @media que ...
[css] 使用纯CSS代码实现动画的暂停与播放
[css] 使用纯CSS代码实现动画的暂停与播放一个属性:animation-play-state 取值:paused(暂停)|running(播放) hover取代点击 .stop:hover~. ...

CSS实现催眠动画效

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

CSS实现催眠动画效相关推荐

最新文章

热门文章