1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>太极旋转图</title>
  6.         <style type="text/css">
  7.             body{
  8.                 margin: 0px;
  9.                 padding: 0px;
  10.             }
  11.             .wrap{
  12.                 width: 200px;
  13.                 height: 100px;
  14.                 margin: 50px auto;
  15.                 /*border: 2px solid red;*//*边框属性:粗细 样式 颜色*/
  16.                 border-width: 1px 1px 100px 1px;
  17.                 border-style: solid;
  18.                 border-radius: 50%;
  19.                 position: relative;
  20.                 /*通过属性去调用之前定义好的动画*/
  21.                 animation: rote 1s linear infinite;
  22.                 /*rote 就是这个动画的名称*/
  23.                 /*2s 表示做一次这个动画需要2s时间 决定旋转的快慢*/
  24.                 /*linear 表示匀速的旋转*/
  25.                 /*infinite 表示永久旋转*/
  26.             }
  27.             .wrap:before,
  28.             .wrap:after{
  29.                 content: '';/*激活伪元素的必要因素*/
  30.                 position: absolute;
  31.                 top: 50%;
  32.                 width: 20px;
  33.                 height: 20px;
  34.                 border-radius: 50%;
  35.             }
  36.             .wrap:before{
  37.                 background-color: #fff;
  38.                 border: 40px solid #000;
  39.             }
  40.             .wrap:after{
  41.                 /*当设置绝对定位时，如果没有参考物（相对定位），
  42.                  * 那么浏览器就是参考物，即.right这个div相对于浏览器的变化*/
  43.                 /*相对定位其实就是相对参考物:父相子绝*/
  44.                 right: 0px;
  45.                 background-color: #000;
  46.                 border: 40px solid #fff;
  47.                 }
  48.                 /*定义CSS动画*/
  49.                 @keyframes rote{
  50.                     from{
  51.                         transform: rotate(0deg);/*旋转*/
  52.                     }
  53.                     to{
  54.                         transform: rotate(360deg);/*旋转*/
  55.                     }
  56.                 }
  57.         </style>
  58.     </head>
  59.     <body>
  60.         <div class="wrap"></div>
  61.     </body>
  62. </html>

　　

效果如下：

太极图HTML+CSS（可旋转）代码记录的更多相关文章

  1. 根据判断PC浏览器类型和手机屏幕像素自动调用不同CSS的代码

    1.媒体查询方法在 css 里面这样写 -------------------- @media screen and (min-width: 320px) and (max-width: 480px) ...

  2. css初始化代码

    最近老有新项目开发,一直在找存留的CSS初始化代码,索性放到这里备份下, @charset "utf-8"; /* -------------------------------- ...

  3. 网站哀悼变灰代码集合 兼容所有浏览器的CSS变暗代码

    下面这些CSS代码可以把网站的网页变为黑白,只需将代码加到CSS文件或网页最顶端就可以实现素装.建议全国站长动起来.为遇难的同胞哀悼. 如何将网站变成灰色调呢,网站变灰色方法是什么?有哪些?为了方便大 ...

  4. CSS透明代码

    透明往往能产生不错的网页视觉效果,先奉上兼容主流浏览器的CSS透明代码: .transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5 ...

  5. 各大门户网站的css初始化代码

    腾讯QQ官网 css样式初始 body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select ...

  6. CSS颜色代码 颜色值 颜色名字大全(转载)

    CSS颜色代码 颜色值 颜色名字大全 转载处http://flyjj.com/css-colour-code.html 颜色值 CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) ...

  7. CSS颜色代码大全

    CSS颜色代码大全 转载:http://blog.163.com/wujinhongisme@126/blog/static/3613698020095115919389/ RGB ( Red,Gre ...

  8. 兼容主流浏览器的CSS透明代码

    透明往往能产生不错的网页视觉效果下面是兼容主流浏览器的CSS透明代码.transparent_class {  filter:alpha(opacity=50);  -moz-opacity:0.5; ...

  9. css初始化代码方案

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-06-24) 为了消除各浏览器对css默认的设置,保持网页在各浏览器中的外观保持一致,初始化css就显得非常必要了!很多时候 ...

  10. Zend Studio 上 安装使用Aptana插件(html,css,js代码提示功能) .

    最近装了zend studio 9.0 用了段时间发现写html,css,js代码没提示,要开dreamwaver(对js代码提示也不好).就网上搜索了下,发现了Aptana插件,装上用了下,感觉不错 ...

随机推荐

  1. 【漏洞复现】Struts2-045分析（CVE-2017-5638）

    如果需要大佬写好的脚本,可以直接去github上面搜 struts2 - 045 一个还比较出名的漏洞,因为涉及到利用Gopher协议反弹shell,所以写篇文章来简单学习下这个漏洞. Struts2 ...

  2. MySQL如何优雅的删除大表

    前言 删除表,大家下意识想到的命令可能是直接使用DROP TABLE "表名",这是初生牛犊的做法,因为当要删除的表达空间到几十G,甚至是几百G的表时候.这样一条命令下去,MySQ ...

  3. 3.mysql小表驱动大表的4种表连接算法

    小表驱动大表 1.概念 驱动表的概念是指多表关联查询时,第一个被处理的表,使用此表的记录去关联其他表.驱动表的确定很关键,会直接影响多表连接的关联顺序,也决定了后续关联时的查询性能. 2.原则 驱动表 ...

  4. java 常用时间操作类，计算到期提醒，N年后，N月后的日期

    package com.zjjerp.tool; import java.text.ParseException; import java.text.ParsePosition; import jav ...

  5. centosl7简洁版配置

    生产环境安装了精简版的centos7需要进行相关配置,添加相关组件才能更好的使用! 由于不同的安装方式欠缺的组件不尽相同,本例尽可能满足一般的生产环境的需要!!! 一.安装ifconfig服务 在没有 ...

  6. filebeat7.5.2 在 windows server 2008 R2 设置系统服务报错

    今天在windows server 2008 R2 设置filebeat为系统服务报错(在 windows 10 .windows server 2012.windows server 2019下安装 ...

  7. linux下hue的安装与部署

    一.Hue 简介 Hue是一个开源的Apache Hadoop UI系统,最早是由Cloudera Desktop演化而来,由Cloudera贡献给开源社区,它是基于Python Web框架Djang ...

  8. Spring Boot 2.x基础教程：多个文件的上传

    昨天,我们介绍了如何在Spring Boot中实现文件的上传.有读者问:那么如果有多个文件要同时上传呢?这就马上奉上,当碰到多个文件要同时上传的处理方法. 动手试试 本文的动手环节将基于Spring ...

  9. [日常填坑系列]CAP食用指南-版本引用问题

    一.前言 最近,由于好久没升级底层框架,一直用着netcore2.2版本,导致有些包没能更新到最新的版本,例如:CAP. 然而,在最近升级到CAP:3.1.2版本的时候,发现有点小坑,只能退回到CAP ...

  10. Go语言从入门到放弃(四)

    前言 有段时间没摸Go语言了,最近B站的Go语言泄露挺火的. 还差的很远呐 学无止境 本章主要介绍一些零碎的小知识点 变更记录 # 19.4.30  起笔 # 19.4.30  增加代码打包步骤 正文 ...