html div 球形,CSS3 简单的球形构造
CSS
语言:
CSSSCSS
确定
*, *:before, *:after {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
box-sizing: border-box; }
*:before, *:after {
content: ""; }
html, body {
height: 100%; }
body {
position: relative;
overflow: hidden;
background: #272727; }
.sphere {
-ms-transform: rotateY(-45deg);
-webkit-transform: rotateY(-45deg);
transform: rotateY(-45deg); }
.sphere, .sphere *, .sphere *:before, .sphere *:after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d; }
.ring {
width: 20em;
height: 20em;
border-radius: 50%;
background: #f7f7f7; }
.ring:nth-child(1) {
-ms-transform: translateZ(-10em) scale(0);
-webkit-transform: translateZ(-10em) scale(0);
transform: translateZ(-10em) scale(0);
-webkit-animation: ring 2s 0s linear infinite;
animation: ring 2s 0s linear infinite; }
.ring:nth-child(2) {
-ms-transform: translateZ(-9.80785em) scale(0.19509);
-webkit-transform: translateZ(-9.80785em) scale(0.19509);
transform: translateZ(-9.80785em) scale(0.19509);
-webkit-animation: ring 2s -0.125s linear infinite;
animation: ring 2s -0.125s linear infinite; }
.ring:nth-child(3) {
-ms-transform: translateZ(-9.2388em) scale(0.38268);
-webkit-transform: translateZ(-9.2388em) scale(0.38268);
transform: translateZ(-9.2388em) scale(0.38268);
-webkit-animation: ring 2s -0.25s linear infinite;
animation: ring 2s -0.25s linear infinite; }
.ring:nth-child(4) {
-ms-transform: translateZ(-8.3147em) scale(0.55557);
-webkit-transform: translateZ(-8.3147em) scale(0.55557);
transform: translateZ(-8.3147em) scale(0.55557);
-webkit-animation: ring 2s -0.375s linear infinite;
animation: ring 2s -0.375s linear infinite; }
.ring:nth-child(5) {
-ms-transform: translateZ(-7.07107em) scale(0.70711);
-webkit-transform: translateZ(-7.07107em) scale(0.70711);
transform: translateZ(-7.07107em) scale(0.70711);
-webkit-animation: ring 2s -0.5s linear infinite;
animation: ring 2s -0.5s linear infinite; }
.ring:nth-child(6) {
-ms-transform: translateZ(-5.5557em) scale(0.83147);
-webkit-transform: translateZ(-5.5557em) scale(0.83147);
transform: translateZ(-5.5557em) scale(0.83147);
-webkit-animation: ring 2s -0.625s linear infinite;
animation: ring 2s -0.625s linear infinite; }
.ring:nth-child(7) {
-ms-transform: translateZ(-3.82683em) scale(0.92388);
-webkit-transform: translateZ(-3.82683em) scale(0.92388);
transform: translateZ(-3.82683em) scale(0.92388);
-webkit-animation: ring 2s -0.75s linear infinite;
animation: ring 2s -0.75s linear infinite; }
.ring:nth-child(8) {
-ms-transform: translateZ(-1.9509em) scale(0.98079);
-webkit-transform: translateZ(-1.9509em) scale(0.98079);
transform: translateZ(-1.9509em) scale(0.98079);
-webkit-animation: ring 2s -0.875s linear infinite;
animation: ring 2s -0.875s linear infinite; }
.ring:nth-child(9) {
-ms-transform: translateZ(0em) scale(1);
-webkit-transform: translateZ(0em) scale(1);
transform: translateZ(0em) scale(1);
-webkit-animation: ring 2s -1s linear infinite;
animation: ring 2s -1s linear infinite; }
.ring:nth-child(10) {
-ms-transform: translateZ(1.9509em) scale(0.98079);
-webkit-transform: translateZ(1.9509em) scale(0.98079);
transform: translateZ(1.9509em) scale(0.98079);
-webkit-animation: ring 2s -1.125s linear infinite;
animation: ring 2s -1.125s linear infinite; }
.ring:nth-child(11) {
-ms-transform: translateZ(3.82683em) scale(0.92388);
-webkit-transform: translateZ(3.82683em) scale(0.92388);
transform: translateZ(3.82683em) scale(0.92388);
-webkit-animation: ring 2s -1.25s linear infinite;
animation: ring 2s -1.25s linear infinite; }
.ring:nth-child(12) {
-ms-transform: translateZ(5.5557em) scale(0.83147);
-webkit-transform: translateZ(5.5557em) scale(0.83147);
transform: translateZ(5.5557em) scale(0.83147);
-webkit-animation: ring 2s -1.375s linear infinite;
animation: ring 2s -1.375s linear infinite; }
.ring:nth-child(13) {
-ms-transform: translateZ(7.07107em) scale(0.70711);
-webkit-transform: translateZ(7.07107em) scale(0.70711);
transform: translateZ(7.07107em) scale(0.70711);
-webkit-animation: ring 2s -1.5s linear infinite;
animation: ring 2s -1.5s linear infinite; }
.ring:nth-child(14) {
-ms-transform: translateZ(8.3147em) scale(0.55557);
-webkit-transform: translateZ(8.3147em) scale(0.55557);
transform: translateZ(8.3147em) scale(0.55557);
-webkit-animation: ring 2s -1.625s linear infinite;
animation: ring 2s -1.625s linear infinite; }
.ring:nth-child(15) {
-ms-transform: translateZ(9.2388em) scale(0.38268);
-webkit-transform: translateZ(9.2388em) scale(0.38268);
transform: translateZ(9.2388em) scale(0.38268);
-webkit-animation: ring 2s -1.75s linear infinite;
animation: ring 2s -1.75s linear infinite; }
.ring:nth-child(16) {
-ms-transform: translateZ(9.80785em) scale(0.19509);
-webkit-transform: translateZ(9.80785em) scale(0.19509);
transform: translateZ(9.80785em) scale(0.19509);
-webkit-animation: ring 2s -1.875s linear infinite;
animation: ring 2s -1.875s linear infinite; }
@-webkit-keyframes ring {
100% {
background: #272727; } }
@keyframes ring {
100% {
background: #272727; } }
html div 球形,CSS3 简单的球形构造相关推荐
- h5+css3简单实现网页端五子棋游戏1.0版
H5+css3简单实现五子棋游戏 原理 主要使用H5的拖拽接口功能,通过拖拽移动棋子,目标位置通过接收拖拽棋子的拷贝元素,实现棋子摆放. 效果图如下 步骤 第一步:简单排版五子棋游戏页面,设定好棋盘排 ...
- CSS3简单特效--animation实现流光按钮
CSS3简单特效–animation实现流光按钮 在学习css3的过程中,发现很多看着炫酷的效果,利用css3的属性能很简单的实现,animation是css3动画效果中常见的属性.下面让我们了解一下 ...
- CSS3简单特效--transform实现翻书效果
CSS3简单特效–transform实现翻书效果 上一篇介绍了animation如何实现流光按钮效果,现给大家介绍一下如何利用css3的transform属性实现鼠标停留实现翻书的效果,下图是鼠标停在 ...
- html 中箭头的代码,HTML中利用div+CSS实现简单的箭头图标的代码
/*箭头向上*/ .to_top { width: 0; height: 0; border-bottom: 10px solid #ccc; border-left: 10px solid tran ...
- HDU1757(矩阵快速幂+简单的矩阵构造)
很简单的矩阵构造看似很麻烦,其实直接写就ok了. ⎡⎣⎢⎢⎢⎢f(n)f(n−1)....f(n−9)⎤⎦⎥⎥⎥⎥=⎡⎣⎢⎢⎢⎢⎢⎢⎢⎢a100....0b0100c0010d0000e0000f00 ...
- html直线箭头,HTML中利用div+CSS实现简单的箭头图标的代码
在网页设计中,我们经常得会用到一些箭头做为装饰来点缀我们的网页,虽然现在很多的网站的设计者们都喜欢以引用字体图标的形式来实现箭头的效果,但那样也会给网页的加载造成一些影响.今天飞鸟慕鱼小编就给大家说一 ...
- 李抗强:类自然数简单幻立方的构造
李抗强:类自然数简单幻立方的构造 ※※※※※※ 來稿時間:2016年11月18日. 貼博時間:2016年11月24日. ※※※※※※ ※※※END※※※ 来自 " ITPUB博客 " ...
- CSS3 简单3D旋转画册
CSS3 简单3D旋转画册 上次我们简单介绍了c3的一些基础知识,我们今天来做一个小练习: 这个简单的案例是3D的一个旋转画册,那么上面是我们的一个效果图,因为不能够传视屏所以就暂时只能够截图来看一下 ...
- 用css3简单实现进度条
2019独角兽企业重金招聘Python工程师标准>>> css3是一个神奇的东西,刚才一时手痒,写了一个很简单的进度条不用js: 直接嵌套一个div,然后设置里面的div用anima ...
最新文章
- AutoML前沿技术与实践经验分享 | 免费公开课
- R语言ggplot2可视化散点图、可视化两个数值变量之间的关系、使用geom_smooth函数基于loess方法拟合数据点之间的趋势关系曲线、自定义数据点的大小、色彩、添加主标题、副标题、题注信息
- batch_size 和 fetch_size作用
- enspac启动失败代码2_电脑蓝屏代码0x000024
- 视频怎么插入慢动作?
- [笔记].Nios II 软核性能基准
- libusb-win32学习笔记(一)
- java垃圾收集器、Serial收集器、ParNew收集器、Parallel Scavenge收集器、Serial Old 收集器、CMS收集器、G1收集器、如何查看GC日志
- am4xMjIx 解密,jn1221解密,AdminWeb 解密分析。
- 如何让你的 x86 openwrt虚拟机上网
- Python Lex Yacc手册
- SitePoint播客#23:Jeff Veen的网络字体
- FPGA仿锆石代码风格组合电路时序电路严格分开之(一)8通道16位AD采集
- 接收IWebBrowser2的自动化事件
- W10应用商店Microsoft Store的安装
- 各类型PPT免费模板,无需编辑直接套用即可!
- 计算机毕业设计SSM电影票购票系统【附源码数据库】
- matlab模拟薄膜振动,(数理方程)Matlab模拟琴弦振动发声并显示振动图像
- matlab angle函数
- 应用matlab仿真几类混沌电路,改进型二级Colpitts混沌电路的制作方法
热门文章
- 边缘计算安全技术综述
- 作者:周大铭,管理科学与工程博士,工业和信息化部赛迪研究院软件所助理研究员。...
- 作者:吴章生(1980-),男,中国科学院计算机网络信息中心工程师;张杨(1982- ),男,中国科学院计算机网络信息中心工程师...
- 【项目管理】虚拟团队
- 【Java】位运算判断2的N次幂
- 城市大轰炸(洛谷P1830题题解,Java语言描述)
- 【HTML5】HTML5基础语法汇总
- 清空了回收站怎么找回?你没用过的方法
- Alexa与小娜结盟,智能语音助手该呼朋引伴还是独自前行?
- xstream中几个注解的含义和用法(转)