运用CSS画动态太极图

今天用学会了用css画动态太极图，现在和小伙伴们分享一下，供大家参考学习。

一.先画一个太极图

1.代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>
/*类选择器，父元素*/.fu{width:500px;height: 500px;border:1px solid black;background-color: blanchedalmond;position: relative;/*相对定位*/}.fu>div{position: absolute;/*绝对定位*/}
/*类选择器，子元素*/.z1{width: 250px;height:500px;background-color:white;border-radius: 250px 0px 0px 250px;}.z2{width: 250px;height:500px;background-color:black;border-radius: 0px 250px 250px 0px;left:250px;}.z3{width: 250px;height:250px;background-color:black;border-radius: 50%;left:125px;}.z4{width: 250px;height:250px;background-color:white;border-radius: 50%;left:125px;top: 250px;}.z5{width: 60px;height:60px;background-color:white;border-radius: 50%;left:200px;top: 100px;}.z6{width: 60px;height:60px;background-color:black;border-radius: 50%;left:250px;top: 350px;}</style>
</head>
<body><div class="fu"><div class="z1"></div><div class="z2"></div><div class="z3"></div><div class="z4"></div> <div class="z5"></div><div class="z6"></div></div>
</body>
</html>

2.效果图：

二.将太极图转动起来

1.动画声明需要使用@keyframes name,后面的name是人为定义的动画名称

2.动画属性有很多种
   动画的名称(必须要有)
   animation-name: move;
   动画的运动曲线(linear是匀速stept()是分步)
   animation-timing-function: linear;
   动画的运动时间
   animation-duration: 3s;
   动画的运动次数(infinite是无限循环)
    animation-iteration-count: infinite;
    动画的开始时间
    animation-delay: 1s;
    动画是否逆序播放
    animation-direction: alternate;
    动画播放期间触碰暂停

    animation-play-state: paused;
    动画播放完毕是否回到初始位置
    animation-fill-mode: forwards;(不回到初始位置)
    backwards(回到初始位置)

3.代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{background-color: wheat;}.fu{width:500px;height: 500px;position: relative;animation: circles 4s linear  infinite;}.fu>div{position: absolute;}.z1{width: 250px;height:500px;background-color:white;border-radius: 250px 0px 0px 250px;}.z2{width: 250px;height:500px;background-color:black;border-radius: 0px 250px 250px 0px;left:250px;}.z3{width: 250px;height:250px;background-color:black;border-radius: 50%;left:125px;}.z4{width: 250px;height:250px;background-color:white;border-radius: 50%;left:125px;top: 250px;}.z5{width: 60px;height:60px;background-color:white;border-radius: 50%;left:200px;top: 100px;}.z6{width: 60px;height:60px;background-color:black;border-radius: 50%;left:250px;top: 350px;}@keyframes circles {form{transform:rotate(0deg);}to{transform:rotate(360deg);}}</style>
</head>
<body><div class="fu"><div class="z1"></div><div class="z2"></div><div class="z3"></div><div class="z4"></div> <div class="z5"></div><div class="z6"></div></div>
</body>
</html>

运用CSS画动态太极图相关推荐

用html和css画太极图,利用css画一个太极图(阴阳八卦)实例
这篇文章介绍利用css画一个太极图(阴阳八卦)实例 #yin-yang { width: 96px; height: 48px; background: #eee; border-color: red ...
太极图php代码,利用css画一个太极图(阴阳八卦)实例
这篇文章介绍利用css画一个太极图(阴阳八卦)实例 #yin-yang { width: 96px; height: 48px; background: #eee; border-color: red ...
html中怎么做彩虹,web前端入门到实战：纯CSS画动态彩虹
效果效果图如下实现思路使用box-shadow画赤橙黄绿蓝靛紫7个弧形,拼接在一起 after伪元素写投影样式彩虹和投影都有动画 dom结构用两个嵌套的div容器,父容器来控制图标显示的位置 ...
动态太极图html代码,用一个div加一段css代码画一个太极图
[摘要] 在王海达博客看到了这段代码,仅使用一个div和css就画出了一个标准的太极阴阳鱼图. 在王海达博客看到了这段代码,仅使用一个div和css就画出了一个标准的太极阴阳鱼图.看了下代码,发现其利 ...
css画圆, 如何用纯css实现一个动态画圆环效果
最终的效果是:用纯css实现动态画圆的动画效果 html结构如下: <div class="wrap"> <div class="circle" ...
使用css画太极,CSS画太极阴阳图
引言 CSS可以画很多图形,今天我们来画一个特殊的图形--中国古代哲学的"太极图". 如果没有用CSS画过简单图形,建议先学习如何用border属性画三角形. 构思步骤 1.在 ...
如何用 css 画一个心形
如何用 css 画一个心形 (How to draw hearts using CSS) 用两个长方形切圆角倾斜位移并合并为一个心形第一步画一个长方形 (Draw a rectangle) 这个长 ...
css实现提示信息,单纯使用CSS实现动态提示信息
单纯使用CSS实现动态提示信息效果,代码如下: CSS代码部分a.info { position:relative; z-index:0; background-color:#ccc; color:# ...
vbs画动态爱心代码_前端必看之如何用CSS3画一个八卦和爱心
昨天雷雨交加,燥热有所缓解.今晨空气清新,再加上马上三天小长假,心情很不错,祝各位小长假玩的开心.那么,今天就用CSS3做些"不正紧"的事:画八卦和爱心. CSS3我们一般都是用来 ...

运用CSS画动态太极图

运用CSS画动态太极图相关推荐

最新文章

热门文章