java 立体球_CSS之立体球体

球体

body{

background-image: linear-gradient(90deg,red ,#ccc 30%,#fff 100%)

}

.bk{

margin: 200px auto;

height: 500px;width: 500px;

/*border:1px solid black;*/

position: relative;

transform-style:preserve-3d;

transform:rotate(-20deg) rotateX(-20deg) rotateY(0);

animation: ball 100s infinite linear;

}

.bk div{

position: absolute;

height: 100%;width: 100%;

border-radius: 100%;

}

.x{

border:1px solid black;

}

.y{

border:1px solid blue;

}

.x:nth-child(1){

transform: rotateY(18deg);

}

.x:nth-child(2){

transform: rotateY(36deg);

}

.x:nth-child(3){

transform: rotateY(54deg);

}

.x:nth-child(4){

transform: rotateY(72deg);

}

.x:nth-child(5){

transform: rotateY(90deg);

}

.x:nth-child(6){

transform: rotateY(108deg);

}

.x:nth-child(7){

transform: rotateY(126deg);

}

.x:nth-child(8){

transform: rotateY(144deg);

}

.x:nth-child(9){

transform: rotateY(162deg);

}

.x:nth-child(10){

transform: rotateY(180deg);

}

.y:nth-child(11){

transform: rotateX(90deg) translateZ(0px) scale(1);

}

.y:nth-child(12){

transform: rotateX(90deg) translateZ(50px) scale(0.98);

}

.y:nth-child(13){

transform: rotateX(90deg) translateZ(100px) scale(0.92);

}

.y:nth-child(14){

transform: rotateX(90deg) translateZ(150px) scale(0.80);

}

.y:nth-child(15){

transform: rotateX(90deg) translateZ(-150px) scale(0.80);

}

.y:nth-child(16){

transform: rotateX(90deg) translateZ(-100px) scale(0.92);

}

.y:nth-child(17){

transform: rotateX(90deg) translateZ(-50px) scale(0.98);

}

@keyframes ball {

0% {transform:rotate(-20deg) rotateX(-20deg) rotateY(0)}

100% {transform:rotate(-20deg) rotateX(-20deg) rotateY(360deg)}

}

CSS3学习-用CSS制作立体导航栏

...

CSS3特效----制作立体导航栏菜单

使用CSS3实现下图的导航菜单效果

你所不知道的 CSS 阴影技巧与细节

关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow 的用法. 最近一个新的项目,CSS-Ins ...

随机推荐

html中role的作用

role 是增强语义性,当现有的HTML标签不能充分表达语义性的时候,就可以借助role来说明. 通常这种情况出现在一些自定义的组件上,这样可增强组件的可访问性.可用性和可交互性. role的作用是描 ...

Cookie与Session的区别

cookie机制 Cookies是服务器在本地机器上存储的小段文本并随每一个请求发送至同一个服务器.IETF RFC 2965 HTTP State Management Mechanism 是通用c ...

mysql zip install

1.Question Description: 1.1 version: mysql-5.7.11-64 1.2 form: zip file 1.3 >mysqld --install (su ...

基础：从概念理解Lucene的Index(索引)文档模型

转:http://blog.csdn.net/duck_genuine/article/details/6053430   目录(?)[+]   Lucene主要有两种文档模型:Document和Fi ...

通讯簿(apple)

ylbtech-dbs:ylbtech-cnblogs(博客园)-2,Admin(用户后台) DatabaseName:Contacts/通讯簿(iOS) 1.A,数据库关系图(Database Di ...

vim(ubuntu) 设置行号和缩进

在终端 输入以下命令来编辑vimrc配置文件: sudo vim /etc/vim/vimrc 或者 sudo gedit /etc/vim/vimrc 1.显示行号 在文件末端添加一新行,输入 se ...

Python+Selenium+Unittest+HTMLTestRunner生成测试报告+发送至邮箱，记一次完整的cnblog登录测试示例，

测试思路:单个测试集.单个测试汇成多个测试集.运行测试集.生成测试报告.发送至邮箱. 第一步:建立单个测试集,以cnblog登录为例. 测试用例: cnblog的登录测试,简单分下面几种情况:(1)用 ...

Nginx的负载均衡

什么是负载均衡 负载均衡主要通过专门的硬件设备或者通过软件算法实现.通过硬件设备实现的负载均衡效果好.效率高.性能稳定,但是成本比较高.通过软件实现的负载均衡主要依赖于均衡算法的选择和程序的健壮性.均 ...

TabCtrl使用

TabCtrl使用 0x1 新建子页面 插入三个对话框,ID分别为:IDD_PAGE_FILE.IDD_PAGE_NETWORK.IDD_PAGE_PROCESS 工具箱-[属性]-[Style]设置 ...

2018.01.04 bzoj5291: [Bjoi2018]链上二次求和(线段树)

传送门 线段树基础题. 题意:给出一个序列,要求支持区间加,查询序列中所有满足区间长度在[L,R][L,R][L,R]之间的区间的权值之和(区间的权值即区间内所有数的和). 想题555分钟,写题202 ...