123

body {
background-color: #aaa;
}

    .div {
        width: 400px;
        height: 400px;
        border-radius: 50%;
        border: 1px solid #ddd;
        background-image:
            radial-gradient(50% 50% at 50% 25%, #000 10%, transparent 0),
            radial-gradient(50% 50% at 50% 75%, #fff 10%, transparent 0),
            radial-gradient(50% 50% at 50% 25%, #fff 50%, transparent 0), radial-gradient(50% 50% at 50% 75%, #000 50%, transparent 0),
            linear-gradient(to left, #fff 50%, #000 50%);
        animation: rotate 3s linear infinite;
    }

    @keyframes rotate {
        from {  transform: rotate(0deg) }
        to { transform: rotate(360deg)}
    }
</style>

css3-旋转的太极图的更多相关文章

  1. 纯css3实现旋转的太极图

    效果图: 代码如下: <!DOCTYPE html> <html> <head lang="zh"> <meta charset=&quo ...

  2. CSS3实现旋转的太极图(二):只用1个DIV

    效果预览:   PS: 1.昨天用3个DIV实现了太极图(点击查看),,今天试着用1个Div来做. 2.公司刚忙过双10周年庆,最近空闲下来,闲着也是闲着,总得写点东西吧. 3.高手莫喷,小弟仅仅是没 ...

  3. Html5 绘制旋转的太极图

    采用Html5+JavaScript在Canvas中绘制旋转的太极图,如下图所示: 具体思路和绘制逻辑,在上图中已有说明,代码如下: <script type="text/javasc ...

  4. css3旋转倾斜3d小动画

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  5. css3旋转小三角

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

  6. 可控制转速CSS3旋转风车特效

    以前制作网页动画一般使用javascript,现在已经有越来越多动动画使用纯CSS实现,并且动画的控制也可以使用CSS3实现,因为CSS 3来了,CSS 3的动画功能确实强大.以下是一个纯CSS3制作 ...

  7. CSS3 旋转 太阳系

    参考https://www.tadywalsh.com/web/cascading-solar-system/ 首先 旋转有两种方式  一种是使用 transform-origin  另一种是tran ...

  8. css3旋转

    首先创建一个容器如div,然后设置其相关的3d属性,主要是三个1.perspective 透视,值越小3D感越强,值越大视觉正常.2.perspective-origin,透视点一般居于容器的中心.3 ...

  9. CSS3 旋转代码备忘

    .Aclose { -webkit-transition-property: all; -webkit-transition-duration: .3s; -moz-transition-proper ...

  10. HTML 5:绘制旋转的太极图

    HTML: <!DOCTYPE> <html> <head> <meta charset="utf-8" /> <title& ...

随机推荐

  1. java 遍历map的四种方法

    16:21:42 Map.entrySet() 这个方法返回的是一个Set<Map.Entry<K,V>>,Map.Entry 是Map中的一个接口,他的用途是表示一个映射项( ...

  2. Css3动画效果,彩色文字效果,超简单的loveHeart

    <!DOCTYPE html><html><head><meta charset="utf-8" /><title>Cs ...

  3. rtags——node.js+redis实现的标签管理模块

    引言在我们游览网页时,随处可见标签的身影: 进入个人微博主页,可以看到自己/他人的标签,微博系统会推送与你有相同标签的人 游览博文,大多数博文有标签标记,以说明文章主旨,方便搜索和查阅 网上购物,我们 ...

  4. CodeForces 29D Ant on the Tree

    洛谷题目页面传送门 & CodeForces题目页面传送门 题意见洛谷里的翻译. 这题有\(\bm3\)种解法,但只有一种是正解(这不是废话嘛). 方法\(\bm1\):最近公共祖先LCA(正 ...

  5. Jmeter 01 Jmeter下载安装及入门

    jmeter简介 Apache JMeter是Apache组织开发的基于Java的压力测试工具.用于对软件做压力测试,它最初被设计用于Web应用测试,但后来扩展到其他测试领域.--百度百科 下载 下载 ...

  6. zookeeper和dubbo安装与搭建

    Zookeeper+Dubbo安装与搭建 (原创:黑小子-余) 本文有借鉴:https://www.cnblogs.com/UncleYong/p/10737119.html (一)zookeeper ...

  7. net start mysql

    net start mysql 解决的方法: 如何以管理员身份打开黑窗口 左下角开始菜单,找到小娜,cmd 回车, 命令提示符右击,以管理员身份打开 依次输入下面两行代码 mysqld -instal ...

  8. Maven Wrapper(mvnw)

    Maven Wrapper Maven Wrapper是一个Maven插件,用于封装提供Maven项目构建时所需要的一切.这么说可能比较抽象,来举个具体的例子吧. 一个Maven项目由多人协作维护,某 ...

  9. 学习Lowdb小型本地JSON数据库

    Lowdb是轻量化的基于Node的JSON文件数据库.对于构建不依赖服务器的小型项目,使用LowDB存储和管理数据是非常不错的选择. 一:lowdb 使用及安装 在项目中的根目录安装 lowdb 命令 ...

  10. shiro实现session共享(本文转自店蛋蛋)

    session共享:在多应用系统中,如果使用了负载均衡,用户的请求会被分发到不同的应用中,A应用中的session数据在B应用中是获取不到的,就会带来共享的问题. 假设:用户第一次访问,连接的A服务器 ...