html实现太极图效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>阴阳</title><style>.yinyang {width: 200px;height: 99px;border:1px solid #000;border-bottom-width: 100px;border-radius: 100px;position: relative;cursor: pointer;transition: 100s;}.yinyang:hover {/*旋转*/transform: rotate(200000deg);}.yinyang:before {content: "";position: absolute;width: 20px;height: 20px;border:40px solid #000;left: 0;top: 50px;border-radius: 50px;background: #fff;}.yinyang:after {content: "";position: absolute;width: 20px;height: 20px;border:40px solid #fff;right: 0;top: 50px;border-radius: 50px;background: #000;}</style>
</head>
<body><div class="yinyang"></div></body>
</html>

html实现太极图效果相关推荐

css3太极图效果+自动旋转
主要使用border-radius属性实现圆,半圆,定位坐标覆盖部分模块. 半圆: width: 50%; height: 100%; border-radius:100% 0 0 100% /50% ...
html5做旋转太极图,HTML5 Canvas旋转动画的2个代码例子（一个旋转的太极图效果）...
效果图: 方法一: your browser does not support the canvas tag var deg = 0; var r = 30; var rl = 100; functi ...
canvas绘制太极图
css样式代码 .animation{width: 800px;height: 800px;border: 1px solid #000; } #canvas{animation: rotate 6s ...
自动化测试学python_自动化生物学现已成为负担得起的现实
自动化测试学python When the sun dips below the Pacific ocean, the white domes of Mount Wilson Observatory ...
关于Mongodb的全面总结
MongoDB的内部构造<MongoDB The Definitive Guide> MongoDB的官方文档基本是how to do的介绍,而关于how it worked却少之又少,本 ...
【Canvas】js用Canvas绘制阴阳太极图动画效果
学习JavaScript是否兴趣缺缺,那就需要来一个兴趣学习,问一下有没有兴趣用Canvas画图呢,可以画很多有趣的事物,自由发挥想象,收获多多哦,这里有一个例子,如何用canvas画阴阳太极图动图效 ...
2、多效果、太极图、党徽和五角星、时钟、animation、文本溢出显示省略号、Flex布局、Flex容器、链接状态、选择器、清除浮动、table表格合并、点击事件、半包围效
2.多效果.太极图.党徽和五角星.时钟.animation.文本溢出显示省略号.Flex布局.Flex容器.链接状态.选择器.清除浮动.table表格合并.点击事件.半包围效.getBoundingC ...
JAVA程序员笔记（第二阶段：前端）第4篇——定位、太极图、经典轮播图一、简单transfrom变换效果
定位: 绝对定位Absolution: 元素会脱离文档流,定位是相对于离它最近的且不是static定位的父元素而言,若该元素没有设置宽度,则宽度由元素里面的内容决定,且宽度不会影响父元素,定位为abs ...
C语言利用Cairo图形库绘制太极图
许多人对直接用C语言绘图仍然停留在Turbo C的graphics.h年代,或许也有教育老化的原因,毕竟曾经的经典早已成往事,与其想尽各种办法寻找与其兼容的图形库,不如顺势拥抱灿烂的明天.Cario( ...
python turtle画椭圆-python turtle 绘制太极图的实例
效果如下所示: # -*- coding: utf-8 -*- import turtle # 绘制太极图函数 def draw_TJT(R): turtle.screensize(800, 600, ...

html实现太极图效果

html实现太极图效果相关推荐

最新文章

热门文章