<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            background:#000;
        }
        .box{
            width:300px;
            height:300px;
            margin:200px auto;
            -webkit-perspective:1500px;
            position:relative;
        }
        .div{
            width:150px;
            height:250px;
            position:absolute;
            transform-style:preserve-3d;
            animation:name 2s linear infinite;
            transform:rotateY(0deg);
        }
        @-webkit-keyframes name {
            from{
                transform:rotateY(0deg);
            }
            to{
                transform:rotateY(360deg);
            }
        }
        .div>div{
            width:140px;
            height:240px;
            position:absolute;
            border-width:10px 10px 0 0;
            border-radius:50% 50% 0% 50%;
            border-color:red;
            border-style:solid;
        }
        .div>div:nth-of-type(1){
            transform:rotateY(0deg) rotateZ(45deg) translateX(50px);
        }
        .div>div:nth-of-type(2){
            transform:rotateY(450deg) rotateZ(45deg) translateX(50px);
        }
        .div>div:nth-of-type(3){
            transform:rotateY(90deg) rotateZ(45deg) translateX(50px);
        }
        .div>div:nth-of-type(4){
            transform:rotateY(135deg) rotateZ(45deg) translateX(50px);
        }
        .div>div:nth-of-type(5){
            transform:rotateY(180deg) rotateZ(45deg) translateX(50px);
        }
        .div>div:nth-of-type(6){
            transform:rotateY(225deg) rotateZ(45deg) translateX(50px);
        }
        .div>div:nth-of-type(7){
            transform:rotateY(270deg) rotateZ(45deg) translateX(50px);
        }
        .div>div:nth-of-type(8){
            transform:rotateY(315deg) rotateZ(45deg) translateX(50px);
        }
        .div>div:nth-of-type(9){
            transform:rotateY(360deg) rotateZ(45deg) translateX(50px);
        }
    </style>
</head>
<body>
<div class="box">
    <div class="div">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>
</body>
</html>

心形陀螺案例css3的更多相关文章

  1. CSS3制作心形头像

    1.功能需求: 最近有一个基于微信开发的Mobile Web项目,是一个活动页面.功能需求:用户使用微信扫描二维码,然后授权使用微信登录,然后读取用户的昵称和头像,然后显示在一个饼图上面.头像需要有一 ...

  2. css3心形 perspective transform

    CSS3挺有趣的,能实现不少动画,以下为娱乐内容 <!DOCTYPE html> <html> <head> <meta charset="UTF- ...

  3. css3实现三角形，聊天背景气泡，心形等形状

    1.聊天背景气泡: css代码如下: #talkbubble {width: 120px;margin:auto; background: red; position: relative; -moz- ...

  4. [deviceone开发]-心形点赞动画示例

    一.简介 这个示例展示do_Animator组件的简单使用,通过点击"点赞"按钮,不断弹出心形图片,向上动画漂移到顶部消失.间隔时间和上下左右移动的步长都是一定范围的随机值.二.效 ...

  5. CSS 魔法系列：纯 CSS 绘制图形（心形、六边形等）

    <CSS 魔法系列>继续给大家带来 CSS 在网页中以及图形绘制中的使用.这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等. 我们的网页因为 CSS 而呈现千 ...

  6. [deviceone开发]-直播APP心形点赞动画示例

    一.简介 这个示例展示do_Animator组件的简单使用,通过点击"点赞"按钮,不断弹出心形图片,向上动画漂移到顶部消失.间隔时间和上下左右移动的步长都是一定范围的随机值. 二. ...

  7. CSS奇思妙想图形（心形、气泡三角形、切角、梯形、饼图等）

    今天看到一篇不错文章,在原来CSS3图形创建基础上扩展了很多. 这里记录总结下 心形 原理:利用 圆形 和 正方形实现 HTML: <div class="heartShaped&qu ...

  8. 打印心形---print 的基础使用

    #!/bin/usr/env python#coding=utf-8'''用学习到的print语句,完成如下图形的打印工作打印心形'''print " *** *** "print ...

  9. 对图片进行各种样式裁对图片进行各种样式裁剪：圆形、星形、心形、花瓣形等剪：圆形、星形、心形、花瓣形等--第三方开源--CustomShapeImageView

    CustomShapeImageView在github上的项目主页是:https://github.com/MostafaGazar/CustomShapeImageView 如果仅仅是需要获取圆形. ...

随机推荐

  1. 如何给vue 日期控件赋值

    项目中需要用到日期时间插件,尝试用bootstrap.element的时间插件都各有各的报错,对于一个菜鸟来说真的是很痛苦啊.终于,最后用了layDate实现了需要的功能 最终效果: 使用步骤: 1. ...

  2. java 集合基础(适用单线程)

    1.集合树状: Collection ├List │├LinkedList │├ArrayList │└Vector │ └Stack └Set │├HashSet │├TreeSet │├Linke ...

  3. 获取文件夹中前N个文件

    @echo off set input="list.txt" set srcDir="%1" set /a fileCount=10 set /a curInd ...

  4. IDEA Maven project: 'xxx/pom.xml' already exists in VFS

    Failed to create a Maven project: 'xxx/pom.xml' already exists in VFS idea创建项目后,发现项目有问题,删除后重新创建,提示错误 ...

  5. MySQL binlog之数据恢复

    一.恢复方案1.数据量不是特别大,可以将mysqldump命令备份的数据使用mysql客户端命令或者source命令完成数据的恢复:2.使用Xtrabackup完成数据库的物理备份恢复,期间需要重启数 ...

  6. Spark-Core RDD的创建

    一.RDD创建的3种方式: 1.从集合中创建RDD 2.从外部存储创建RDD 3.从其他RDD转换得到新的RDD 二.从集合中创建RDD 1.使用parallelize函数创建 scala> v ...

  7. PL/SQL Developer工具

    安装好Oracle以后我们发现在控制台来操作数据库很繁琐,而且也不方便阅读.所以,我们就要用到PL/SQL Developer工具,以达到能更好的操作数据库的目的. PL/SQL Developer简 ...

  8. CodeForces 877E DFS序+线段树

    CodeForces 877E DFS序+线段树 题意 就是树上有n个点,然后每个点都有一盏灯,给出初始的状态,1表示亮,0表示不亮,然后有两种操作,第一种是get x,表示你需要输出x的子树和x本身 ...

  9. tf.cast()用法

    把布尔类型转化成0和1类型,true是1,false是0反之,亦成立.

  10. 用python 写一个nagios插件 监控http内容(转载)

     nagios自带的http-check插件主要是检测地址url是否可以访问,在web+中间件的架构中容易出现url能访问,但是后台中间件拓机的情况,因为最近在自学python,所以写了个脚本检测ur ...