<!DOCTYPE html>
<html>
<head>
<title>球体</title>
<meta charset="utf-8">
<style type="text/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)}
}
</style>
</head>
<body>
<fieldset></fieldset>
<div class="bk">
<div class="x"></div>
<div class="x"></div>
<div class="x"></div>
<div class="x"></div>
<div class="x"></div>
<div class="x"></div>
<div class="x"></div>
<div class="x"></div>
<div class="x"></div>
<div class="x"></div>

<div class="y"></div>
<div class="y"></div>
<div class="y"></div>
<div class="y"></div>
<div class="y"></div>
<div class="y"></div>
<div class="y"></div>
<div class="y"></div>
<div class="y"></div>
<div class="y"></div>
<div class="y"></div>
</div>
</body>
</html>

CSS之立体球体的更多相关文章

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

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 【CSS】纯css实现立体摆放图片效果

    1.  元素的 width/height/padding/margin 的百分比基准 设置 一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么? 举 ...

  3. CSS学习笔记二：css 画立体图形

    继上一次学了如何去运用css画平面图形,这一次学如何去画正方体,从2D向着3D学习,虽然有点满,但总是一个过程,一点一点积累,然后记录起来. Transfrom3D 在这一次中运用到了一下几种属性: ...

  4. 你想不到的！CSS 实现的各种球体效果【附在线演示】

    CSS 可以实现很多你想不到的效果,今天我们来尝试使用 CSS 实现各种球体效果.有两种方法可以实现,第一种是使用大量的元素创建实际的 3D 球体,这种方法有潜在的性能问题:另外一种是使用 CSS3 ...

  5. CSS 实现的各种球体效果

    CSS 实现的各种球体效果[附在线演示] CSS 可以实现很多你想不到的效果,今天我们来尝试使用 CSS 实现各种球体效果.有两种方法可以实现,第一种是使用大量的元素创建实际的 3D 球体,这种方法有 ...

  6. 使用css3和伪元素制作的一个立体导航条

    使用css3和伪元素制作的一个立体导航条供大家参考,代码如下: <!doctype html> <html lang="en"> <head> ...

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

    使用CSS3实现下图的导航菜单效果 <!doctype html> <html lang="en"> <head> <meta chars ...

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

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

  9. 你所不知道的 CSS 阴影技巧与细节 滚动视差？CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整理 委托入门案例

    你所不知道的 CSS 阴影技巧与细节   关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow  ...

随机推荐

  1. Asp.Net_Mvc_获取当前Url、Controller、Action

    一.URL的获取很简单,ASP.NET通用: [1]获取 完整url (协议名+域名+虚拟目录名+文件名+参数) string url=Request.Url.ToString(); [2]获取 虚拟 ...

  2. 从github获取代码

    以duilib为例: 1 建立一个文件夹,右键 git bash here. 2 git init 3 git clone https://github.com/duilib/duilib.git

  3. 实现PHPCMS手机门户的伪静态

    1.打开/phpcms/modules/wap/functions/global.func.php找到里面的这两个函数,如下图所示的注释掉的那行代码,在下面加入一行代码. function list_ ...

  4. VMWARE里启动kylin16.0时出现'SMBus Host Controller not enabled'(还未进入系统）

    在Vmware里安装完Ubuntu16.10,启动时出现'SMBus Host Controller not enabled'错误提示,进不到图形界面.网上搜了一下,解决办法是在图形界面里进终端窗口, ...

  5. Jekyll x Liquid 控制文章列表只显示特定类别的Post

    使用Liquid按照Category或者Tag过滤Post List 文章首发于szhshp的第三边境研究所(szhshp.org), 转载请注明 前段时间画了一些漫画,考虑把漫画相关的Post放到另 ...

  6. Laravel RuntimeException inEncrypter.php line 43: The only supported ciphers are AES-128-CBC and AES-256-CBC with the correct key lengths

    php artisan key:generate 运行上面代码即可解决

  7. jq中数组应用的错误

    js中数组可以这样使用: <ul id="ul"> <li value="1">s</li> <li>f< ...

  8. Leetcode--Swap Nodes in Pairs

    最傻的方法: ListNode *swapPairs(ListNode *head) { if (head == NULL) return NULL; ListNode *temp = ); List ...

  9. CProgressCtrl进度条

    CProgressCtrl进度条 使用方法总结 标签: CProgressCtrlmfc 2016-03-03 09:19 762人阅读 评论(0) 收藏 举报  分类: MFC(11)  版权声明: ...

  10. Linux 常用命令集合

    1. 常用命令 ls  显示当前目录下的文件和文件夹: -ltr 按时间顺序显示文件和文件夹的详细信息,不带参数的时候 只显示文件夹和文件. vi  打开文件的内容 tar -cvf file.tar ...