旋转太极 css+cavans文章

傷城~ 2022-06-01 06:16 205阅读 0赞

http://geek.csdn.net/news/detail/252284

<!doctype html>

<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <title>test</title>  
  <style>  
    /\*CSS源代码\*/  
body\{  
background:\#CFCFCF;  
\}  
.box-taiji\{  
  width:0px;  
  height:400px;  
  position:relative;  
  margin:50px auto;  
  border-left:200px solid \#000;  
  border-right:200px solid \#fff;  
  border-radius:50%;  
  animation:move 1s linear infinite;  
\}  
.box-taiji:before,  
.box-taiji:after\{  
  position:absolute;  
  content:"";  
  display:block;  
\}  
.box-taiji:before\{  
  width:200px;  
  height:200px;  
  top:0px;  
  left:-100px;  
  z-index:1;  
  background-color:\#fff;  
  border-radius:50%;  
  box-shadow:0 200px 0 \#000;  
\}  
.box-taiji:after\{  
  width:60px;  
  height:60px;  
  top:70px;  
  left:-30px;  
  z-index:2;  
  background-color:\#000;  
  border-radius:50%;  
  box-shadow:0 200px 0 \#fff;  
\}  
  
  
@keyframes move\{  
  0%\{  
    transform:rotate(0deg);  
  \}100%\{  
    transform:rotate(360deg);  
  \}  
\}  
  </style>  
  
  
</head>  
  
  
<body>  
     
    
<div class="box-taiji"></div>  
  
  
  
<script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>  
  
  
</body>  
</html>

发表评论取消回复

表情：

评论列表（有 0 条评论，205人围观）

还没有评论，来说两句吧...

相关阅读

相关一篇文章搞定字符串的旋转问题（数组旋转问题）！

目录前言一.如何实现字符串的旋转？ 1.用冒泡的思想实现 2.分别逆序左右再整体逆序来实现二.如何快速判断一个字符串是否为另外一个字符串旋转之

叁歲伎倆/ 2024年03月29日 14:24/ 0 赞/ 81 阅读

相关纯css实现太极阴阳鱼动画

![45161b8d94ab0ca0482d2e0d1c5a6aee.gif][] 今天看到一个有意思的效果，闲来无事做一个：把2d静态的太极图改成了3d，阴极和阳极分到

不念不忘少年蓝@/ 2023年10月06日 16:02/ 0 赞/ 42 阅读

相关 HTML5——canvas之动感太极

效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2

不念不忘少年蓝@/ 2023年07月20日 10:58/ 0 赞/ 18 阅读

相关 python画太极（不是八卦）

本代码画图仅供娱乐，所以代码无注释，还请谅解，总而言之就将就着copy玩吧。 import turtle as t t.screensize(1000,100

谁践踏了优雅/ 2023年03月01日 13:33/ 0 赞/ 20 阅读

相关 python turtle 太极八卦图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQw

以你之姓@/ 2023年02月16日 04:21/ 0 赞/ 58 阅读

相关利用HTML+CSS+CSS3实现太极旋转动态图

太极旋转 ![在这里插入图片描述][20201022170941729.gif_pic_center] html部分只需要一个大盒子和两个小盒子 <div

忘是亡心i/ 2022年12月17日 07:18/ 0 赞/ 200 阅读

相关大神带你看太极

![format_png][] ITSTAR 长时间以来,圆角都是开发者最期盼的效果,很多网页设计的老手都投入几十甚至上百个小时,就是为了通过图片来实现可以可以缩

╰+攻爆jí腚メ/ 2022年12月01日 15:45/ 0 赞/ 307 阅读

相关旋转太极 css+cavans文章

http://geek.csdn.net/news/detail/252284 <!doctype html> <html lang="en"> <he

傷城~/ 2022年06月01日 06:16/ 0 赞/ 205 阅读

相关太极分布式事务处理框架TJDTP使用指南

太极分布式事务处理框架TJDTP使用指南

电玩女神/ 2022年05月24日 23:19/ 0 赞/ 211 阅读

相关易经初识一阴阳太极八卦

易经初识一阴阳太极八卦序易经原本是深奥的，通常也是难以读懂的，但曾仕强教授用简单易懂的方式为你揭示的易经的奥秘，解开了宇宙人生的密码。自然万物、天地人和

我就是我/ 2021年11月01日 05:08/ 0 赞/ 318 阅读