<!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. JavaScript文件中; !function (win, undefined) {}(window);的意义

    +function (){}-function (){}!function (){}~function (){}(function (){})() 这种写法可以保证匿名函数立即运行且运行一次 传入的 ...

  2. Maven 修改jdk版本

    Maven 修改jdk版本方法1: <build> <plugins> <plugin> <groupId>org.apache.maven.plugi ...

  3. [Python3 练习] 008 欧几里德算法

    题目:写个"欧几里德算法"的小程序 (1) 描述 我知识浅薄,一开始被"欧几里德"的大名唬住了,去搜了一下才知道这就是高中时学过的"辗转相除法&quo ...

  4. 硬核！如何模拟 5w+ 的并发用户？

    来自:http://t.cn/ES7KBkW 本文将从负载测试的角度,描述了做一次流畅的5万用户并发测试需要做的事情. 你可以在本文的结尾部分看到讨论的记录. 快速的步骤概要 编写你的脚本 使用JMe ...

  5. Acwing‘803. 区间合并

    (https://www.acwing.com/problem/content/805/) 给定 nn 个区间 [li,ri][li,ri],要求合并所有有交集的区间. 注意如果在端点处相交,也算有交 ...

  6. 01-HTML控件

    1.HTML (常用标签 网页的基本结构)2.CSS (常用样式 网页的显示效果)3.JavaScript (用户交互效果 动态效果)4.jQuery (JavaScript库 简化原生js操作)5. ...

  7. 2-基于6U VPX的双TMS320C6678+Xilinx FPGA K7 XC7K420T的图像信号处理板

    基于6U VPX的双TMS320C6678+Xilinx FPGA K7 XC7K420T的图像信号处理板 综合图像处理硬件平台包括图像信号处理板2块,视频处理板1块,主控板1块,电源板1块,VPX背 ...

  8. localeCompare按首字母排序汉字

    sort() 方法用于对数组的元素进行排序. 如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字.比较函数应该具有两个参数 a 和 b,其 ...

  9. 读书笔记三、pandas之重新索引

  10. 2018ICPC银川 L Continuous Intervals 单调栈 线段树

    题意:给你一个序列,问你这个序列有多少个子区间,满足把区间里的数排序之后相邻两个数之间的差 <= 1 ? 思路:https://blog.csdn.net/u013534123/article/ ...