html怎么让方块自动旋转,如何使用纯CSS实现一个圆环旋转错觉的动画效果(附源码)...
本篇文章给大家带来的内容是关于如何使用纯CSS实现一个圆环旋转错觉的动画效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
效果预览
源代码下载
https://github.com/comehope/front-end-daily-challenges
代码解读
定义 dom,容器中包含 10 个
定义容器尺寸:.container {
width: 17em;
height: 17em;
font-size: 16px;
}
定义子元素的尺寸,和容器相同:.container {
position: relative;
}
.container div {
position: absolute;
width: inherit;
height: inherit;
}
在子元素的正中画一个黄色的小方块:.container div {
display: flex;
align-items: center;
justify-content: center;
}
.container span {
position: absolute;
width: 1em;
height: 1em;
background-color: yellow;
}
增加让小方块左右移动的动画效果,动画时长还会在后面用到,所以定义成变量:.container span {
--duration: 2s;
animation: move var(--duration) infinite;
}
@keyframes move {
0%, 100% {
left: calc(10% - 0.5em);
}
50% {
left: calc(90% - 0.5em);
}
}
用贝赛尔曲线调整动画的时间函数,使小方块看起来就像在左右两侧跳来跳去:.container span {
animation: move var(--duration) cubic-bezier(0.6, -0.3, 0.7, 0) infinite;
}
增加小方块变形的动画,使它看起来有下蹲起跳的拟人效果:.container span {
animation:
move var(--duration) cubic-bezier(0.6, -0.3, 0.7, 0) infinite,
morph var(--duration) ease-in-out infinite;
}
@keyframes morph {
0%, 50%, 100% {
transform: scale(0.75, 1);
}
25%, 75% {
transform: scale(1.5, 0.5);
}
}
至此,完成了 1 个方块的动画。接下来设置多个方块的动画效果。
为子元素定义 CSS 下标变量:.container div:nth-child(1) { --n: 1; }
.container div:nth-child(2) { --n: 2; }
.container div:nth-child(3) { --n: 3; }
.container div:nth-child(4) { --n: 4; }
.container div:nth-child(5) { --n: 5; }
.container div:nth-child(6) { --n: 6; }
.container div:nth-child(7) { --n: 7; }
.container div:nth-child(8) { --n: 8; }
.container div:nth-child(9) { --n: 9; }
旋转子元素,使小方块分布均匀地在容器的四周,围合成一个圆形:.container p {
transform: rotate(calc(var(--n) * 40deg));
}
设置动画延时,现在看起来就像是一群小方块贴着一个圆的内边线在旋转了(但实际上没有任何元素在做旋转运动,大脑感觉到的旋转是一种错觉):.container span {
animation-delay: calc(var(--duration) / 9 * var(--n) * -1);
}
最后,为小方块上色:.container span {
background-color: hsl(calc(var(--n) * 80deg), 100%, 70%);
}
大功告成!想要了解更多css知识,可以去Gxl网css教程栏目去学习一下。
相关推荐:
如何使用纯CSS实现太阳和地球和月亮的运转模型动画
如何使用纯CSS实现一个足球场的俯视图(附源码)
html怎么让方块自动旋转,如何使用纯CSS实现一个圆环旋转错觉的动画效果(附源码)...相关推荐
- css 跳跃动画,如何使用纯CSS实现方块跳跃的动画(附源码)
本篇文章给大家带来的内容是关于如何使用纯CSS实现方块跳跃的动画(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览 源代码下载 https://github.com/ ...
- CSS3动画大全(附源码)flex布局,grid布局3d旋转,图像模糊,文字发光
CSS3动画大全(附源码)3d旋转,图像模糊,文字发光! 文章目录 CSS3动画大全(附源码)3d旋转,图像模糊,文字发光! html代码 css grid布局 flex布局 文字发光 & 图 ...
- html图片自动滚动播放器,jQuery+css实现图片滚动效果(附源码)
bxCarousel参数说明: move:每次滚动移动图片的数量,默认为4. display_num:展示图片的数量,默认为4. speed:图片滚动速度,默认为500毫秒. margin:图片间的间 ...
- 【每日一练】31—CSS 实现一个彩色旋转方块loading动画效果
写在前面 今天练习的这个项目是一个加载动画,这个加载动画主要是为了在网络不好,页面加载缓慢时给用户的一个提示,一个好的加载动画,可以缓解用户的焦虑情绪,让等待变得有趣,现在很多产品也越来越注重这一块的 ...
- 100个必会的python脚本-100行Python代码实现自动抢火车票(附源码)
前言 又要过年了,今年你不妨自己写一段代码来抢回家的火车票,是不是很Cool.下面话不多说了,来一起看看详细的介绍吧. 先准备好: 12306网站用户名和密码 chrome浏览器及下载chromedr ...
- html魔方转动效果,简单说 用CSS做一个魔方旋转的效果
说明 魔方大家应该是不会陌生的,这次我们来一起用CSS实现一个魔方旋转的特效,先来看看效果图! 解释 我们要做这样的效果,重点在于怎么把6张图片,摆放成魔方的样子,而把它们摆放成魔方的样子,重点在于用 ...
- 简单说 用CSS做一个魔方旋转的效果
说明 魔方大家应该是不会陌生的,这次我们来一起用CSS实现一个魔方旋转的特效,先来看看效果图! 解释 我们要做这样的效果,重点在于怎么把6张图片,摆放成魔方的样子,而把它们摆放成魔方的样子,重点在于用 ...
- python模拟火车订票系统代码_Python3.6实现12306火车票自动抢票,附源码
原标题:Python3.6实现12306火车票自动抢票,附源码 Python(发音:英[?pa?θ?n],美[?pa?θɑ:n]),是一种面向对象.直译式电脑编程语言,也是一种功能强大的通用型语言,已 ...
- 用Python自动刷新抢12306火车票(附源码)
專 欄 ❈ 作者:marvin,互联网从业者,现居上海张江 ❈ 一年一度的春运又来了,今年我自己写了个抢票脚本.使用Python+Splinter自动刷新抢票,可以成功抢到.(依赖自己的网络环境太厉害 ...
最新文章
- pythonlist基本操作_Python list 常用操作
- Installing EF Power Tools into VS2015
- 生成树生成森林c语言中文网,生成树协议(STP)基本知识及实验(使用eNSP)
- book电子书数据库设计_如何为杀手book的封面设计写出完美的摘要
- 数据绑定 单个对象和集合绑定差异
- Redis进阶实践之一VMWare Pro虚拟机安装和Linux系统的安装
- c 语言 字符串 遍历,在C ++中使用字符串的一个遍历的第一个非重复字符
- SimpleFs文件系统初步二(测试用的块设备构建)
- [2018.08.02 T1] 第一题
- SAE J1939介绍
- 华硕UX433FN安装Win黑苹果双系统
- Python 基础知识 Day2
- 在网易做游戏美术设计师是种什么体验?
- Nginx通过OpenSSL创建自签名证书配置HTTPS及二级目录
- 数学之美-读书笔记6-10章
- 单片机触发器或非门工作原理以及用途
- C语言:歌德巴赫猜想:2000以内的正偶数(不包括2)都能够分解为两个质数之和
- Java —— 冒泡排序
- 淘宝客运营推广技巧方法有哪些?
- 夺命聘礼【三】- 原创中篇小说
热门文章
- HDU1907 ZJU3113
- sessionState 配置方案
- Parameter 'userName' not found. Available parameters are [1, 0, param1, param2]
- C++编程基础一 06-布尔类型
- 关于Unity中NGUI的Pivot和锚点
- 【JAVA设计模式】外观模式(Facade Pattern)
- [LeetCode] 21. Merge Two Sorted Lists ☆
- 【vue-router①】router-link跳转页面传递参数 - 进击的前端之路(偶尔爬坑java小路) - SegmentFault 思否
- Activemq源码、编译、导入idea、源码调试总结
- [pytorch、学习] - 5.3 多输入通道和多输出通道