旋转太极 css+cavans文章

傷城~ 2022-06-01 06:16 147阅读 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 条评论，147人围观）

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

相关阅读

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

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

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

相关旋转

import cv2 import numpy as np img = cv2.imread('test.jpg',1) rows,cols =

小灰灰/ 2023年01月09日 15:35/ 0 赞/ 121 阅读

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

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

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

相关大神带你看太极

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

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

相关 java 字符串旋转_字符串旋转

判断一个字符串旋转是否为另一个字符串，可以转换成等价问题，前面字符串拼接两份，再看是否包含第二个字符串，从而省去了旋转这些操作，而转换成字符串匹配问题，如果是笔试为了赶时间，可

港控/mmm°/ 2022年11月06日 11:48/ 0 赞/ 239 阅读

相关【DIV+CSS】代码作业练习DIV+CSS太极阴阳图

1. DIV + CSS 练习：太极阴阳图。基本思路：由三个div块元素组成； \taiji太极阴阳图底面 \yin太极阴阳图阴面小圆 \yang太

落日映苍穹つ/ 2022年08月08日 17:50/ 0 赞/ 94 阅读

相关旋转太极 css+cavans文章

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

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

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

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

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

相关旋转

开发工具与关键技术：Adobe Dreamweaver CC 2017 CSS 作者：廖亚星撰写时间：2019年2月10日下面我们利用CSS做一个简单的鼠标移入

阳光穿透心脏的1/2处/ 2022年03月18日 13:19/ 0 赞/ 223 阅读

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

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

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