球体动画Android,使用CSS创建一个炫酷的球体动画效果
我最近看到了一个纯CSS实现的球体动画效果:
经过研究上面的效果实现起来大致可以分为五个步骤,下面就来一一介绍。
1.使用Jade和SCSS生成一个圆圈
创建一个圆圈的第一步是生成所有组成圆圈的粒子。有了Jade,我们不用一个一个的写出200个div。
以下的代码创建了一个容器.mommy和200个div:
.mommy
- for (var x = 0; x < 200; x++)
div
添加一点CSS确认一下200个div已经生成:
.mommy{
border:1px solid black;
}
div{
width: 4px;
height: 4px;
background:red;
}
正如下面你所看到的,我们生成了一个800px高的红色方块,它是由200个div组成的。
接下来,我们要将这200个div分别定位在不同的位置组成一个圆圈,并通过SCSS来实现。
在上面的CSS中还需要再添加一些设置,给所有的div设置绝对定位,并将它们向左和向上移动2px的距离,这样div的中心点与容器的0,0坐标点就重合了。然后,我们设置容器为固定的宽高大小。
.mommy{
border:1px solid black;
width: 400px;
height: 400px;
position: relative;
}
div{
width: 4px;
height: 4px;
background:red;
position: absolute;
top: -2px;
left: -2px;
}
通过SCSS,我们可以在for循环中为每一个div设置不同的位置,这样就不必手动的一个一个去设置。首先创建一个变量,它的值等于div的个数,这样在后面如果要用到div的数量值时,直接引用这个变量就可以了。如果有一天需要改变成400个div,只需要在CSS中改变变量的值就可以了。
$amount : 200;
@for $i from 1 through $amount {
//循环中的代码
}
现在我们就可以在循环中改变每个div的坐标了,这需要一点点的数学计算。
以下的函数就是生成圆圈的坐标点的计算公式:
x = cos((index/amount)*(PI*2))*radius + radius;
y = sin((index/amount)*(PI*2))*radius + radius;
用SCSS来表示上面的公式就是:
$x : cos(($i/$amount)*360deg)*200px + 200;
$y : sin(($i/$amount)*360deg)*200px + 200;
然后我们将通过公式计算得出的点坐标应用在每个div上:
div:nth-child(#{$i}){
transform: translate3d($x, $y,0px);
}
这是第一步生成的结果,虽然不是很漂亮,但是,嗯,你从零开始创造了一个圆圈!
2.将圆圈变成一个球体
现在我们有了一个用SCSS生成的圆圈,但是我们需要的是一个球体。圆圈是一个二维图形,而球体是一个三维立体图形。二维几何图形只有两个轴:X轴和Y轴,而对于三维,又多了一个坐标轴:Z轴。这意味着我们还要计算每个div在Z轴上的位置坐标。幸运的是,已经有成熟的公式帮助我们来定位球体上每个元素的位置,我不会详细的介绍公式的原理(属于数学范畴),我们只需要使用就可以了:
θ : (index / amount) * 120;
δ : (index / amount) * PI;
x : radius * cos(δ) * cos(θ);
y : radius * cos(δ) * sin(θ);
z : radius * sin(δ);
现在我们有了以上的函数,它可以完全满足我们的需求,我们把它插入到循环中。
@for $i from 1 through $amount {
$theta : ($i / $amount) * 120;
$delta : ($i / $amount) * pi();
$x : 200px * cos($delta) * cos($theta) + 200; //+200 to center our sphere in our 3D world
$y : 200px * cos($delta) * sin($theta) + 200; //+200 to center our sphere in our 3D world
$z : 200px * sin($delta);
div:nth-child(#{$i}){
transform: translate3d($x, $y,$z);
}
}
下面就是生成的球体效果,正如你所看到的,所有的div都有重新有了新的位置,但是我们看到的好像仍然是平面效果,不是3D立体的。
在CSS中有一个叫perspective的属性,它允许我们为任何元素设置一个特定的透视值。在我们的例子中,我们希望在容器.mommy设置3D效果。并且还需要设置一个transform-style: preserve-3d;这样所有的div就处于立体坐标系中了。
现在我们可以看到所有div的大小都变得不一样了。div距离“屏幕”的距离越远,它就会越小,这意味着它们已经处于立体坐标系中了!
3.旋转球体
所有的div已经就绪了,接下来我们就要看到最后的结果了。我们设置一个仅有一个关键帧的动画效果:
.mommy{
[...]
animation: rotation 10s linear infinite;
}
@keyframes rotation{
to{
transform:rotateY(360deg);
}
}
你可能已经注意到,有些div不是正面屏幕而是与屏幕成90°时,它们就会消失看不到。为了防止这种情况的发生,我们需要给每个div一个反方向的旋转,让它们的正面始终面对屏幕显示。
我们要在div上应用一个反方向的旋转,但是由于已经应用了一个转换,我们将利用伪元素,它将成为红色的小方块。这样,div本身只需要提供定位作用就可以了,并且设置一个transform-style属性,让div处于3D环境中。
div{
[...]
transform-style: preserve-3d;
&:before{
content:"";
display: block;
width: 4px;
height:4px;
background:red;
animation: rotation 10s infinite linear reverse;
}
}
塔达!CSS球体的效果就这样做好了!
4.更炫的球体
在以上代码的基础上,我们发散思维,可以做出更加炫酷的球体效果:
获取以上所有球体动画的代码可以:
球体动画Android,使用CSS创建一个炫酷的球体动画效果相关推荐
- 前端实现炫酷动效_web前端入门到实战:使用CSS创建一个炫酷的球体动画效果
一个纯CSS实现的球体动画效果: 经过研究上面的效果实现起来大致可以分为五个步骤,下面就来一一介绍. 1.使用Jade和SCSS生成一个圆圈 创建一个圆圈的第一步是生成所有组成圆圈的粒子.有了Jade ...
- 用html怎么做动态立体图形,使用CSS创建一个炫酷的球体动画效果
我最近看到了一个纯CSS实现的球体动画效果: 经过研究上面的效果实现起来大致可以分为五个步骤,下面就来一一介绍. 1.使用Jade和SCSS生成一个圆圈 创建一个圆圈的第一步是生成所有组成圆圈的粒子. ...
- android 气球动画,Android TV使用贝赛尔曲线制作炫酷的开场动画
目录 前言 很多App启动的时候会用到炫酷的开场动画.Android TV端也一样,每一个不同的模块,产品经理都可能设计了不同的开场动画.对于这些复杂的开场动画,最重要的是学会拆分,只要拆分得当,就会 ...
- html炫酷边框样式,利用SVG和CSS3来实现一个炫酷的边框动画
这篇文章主要介绍了利用SVG和CSS3来实现一个炫酷的边框动画,不使用JavaScript使得编写过程轻松了不少,需要的朋友可以参考下 今天我们来探索一下Carl Philipe Brenner的网站 ...
- 一个炫酷的头像悬停效果
本文翻译自 A Fancy Hover Effect For Your Avatar,略有删改,有兴趣可以看看原文. 你知道当一个人的头像从一个圆圈或洞里伸出来时的那种效果吗?本文将使用一种很简洁的方 ...
- CSS实现超级炫酷的流光按钮效果
今天从小破站看了一个大神的作品,感觉好流批,自己忍不住也做了一下. 是完全用css实现流光特效,鼠标放在上面会有光波流动 这是鼠标没放在上面的颜色,放在上面的颜色太炫酷了,图片根本无法表达 哈哈哈哈来 ...
- 球体动画Android,Android自定义View实现简单炫酷的球体进度球实例代码
前言 最近一直在研究自定义view,正好项目中有一个根据下载进度来实现球体进度的需求,所以自己写了个进度球,代码非常简单.先看下效果: 效果还是非常不错的. 准备知识 要实现上面的效果我们只要掌握两个 ...
- html + css 实现一个炫酷的照片墙
使用 css 动画实现了一个当鼠标悬浮在图片上时放大展示的照片墙,效果图如下: 以下直接附上源码,图片可自己随意设置,所有图片放在与源码 .html 文件同级的 img2 文件夹内: <!DOC ...
- PHP炫酷,PHP创建一个炫酷的图表
如果你是一个后端开发人员,并且PHP是你技术堆栈的一部分,那么你会发现本教程非常有用.在这篇文章中,我将讲解如何一步一步使用PHP,FusionCharts的核心JavaScript图表库,以及它的P ...
最新文章
- 苏宁云仓投入使用,此时物流爆发是否来得及?
- SAP 质检使用非物料基本单位
- P3272 [SCOI2011]地板(插头DP)
- html 弹出层插件,jQuery弹出层插件(原创)
- 2013年3月百度之星A题
- springboot集成redis使用redis作为session报错ClassNotFoundException类RememberMeServices
- React Hooks的使用(三)——useRef、useImperativeHandle、useLayoutEffect解析、自定义Hook
- 3D卷积GAN飞起!微软“可缩放”新框架只需2D数据即可生成逼真3D模型
- 倍周期分岔 matlab,由倍周期分岔走向混沌-Read.DOC
- 哈理工OJ 1391 Orz odd(规律【没证出来】)
- dell5580bios恢复出厂_戴尔笔记本bios如何恢复出厂设置
- 深度相机原理及坐标系转换
- java生成自增单号(字符+日期+数字)
- 星梦小组KTV点歌系统简介
- win怎么在计算机里按日期搜索文件,Windows下怎么按时间查找文件
- 蚂蚁区块链第22课 蚂蚁区块链溯源服务功能从开通到实现
- firefox 显示网页加载时间的插件
- uvm_barrier
- 送学计算机男生什么礼物好,【送男生礼物】送男生礼物_送男生|男朋友|老公什么礼物比较好...
- 罗杰波、马毅、华刚等谈视觉研究那些事:是时候重新定义视觉了
热门文章
- 国开电大-公司财务-形考任务1-5
- 找不到匹配的host key算法
- Dart —— 函数 函数参数 匿名函数
- 2022国际数维杯C题题解:利用大脑结构特征和认知行为特征诊断阿尔茨海默病
- Centos通过yum安装Jenkins
- 【xsy2440】【GDOI2016】疯狂动物城
- 三维动画制作软件测试指标,102092三维动画软件基础课程标准已审核.doc
- 小白鼠问题(海明码)
- R语言ggplot2可视化:使用patchwork包将两个ggplot2可视化结果组合起来、使用labs函数为第两个子图都添加标题信息(subtitle for each subplots)
- Hadoop HA集群部署 - A - 详解