css3实现旋转的八卦图动画

border的功能真的不容小觑，可以实现一些意想不到的特殊符号。今天就用border实现正方形继而实现旋转的八卦图

先上个效果图

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content="ydj"><meta name="Keywords" content=""><meta name="Description" content=""><title>旋转的八卦图</title><style type="text/css">*{margin:0;padding:0;}ul,ol{list-style:none;}a{text-decoration:none;}img{boder:0;}body{overflow:hidden;background-color: #ccc;}.content{position: relative;width:400px;height:200px;margin:100px auto;border-bottom:200px solid #000;border-radius:50%;background-color: #fff;animation:run 4s linear infinite;}.content:before,.content:after{position:absolute;content:"";width:30px;height:30px;border-width:85px;border-style:solid;border-radius:50%;}.content:after{bottom:-100px;border-color:white;background-color: black;}.content:before{bottom:-100px;right:0;background-color: white;}@keyframes run{from{transform:rotate(360deg);}to{transform:rotate(0deg);}};</style></head><body><div class="content"></div></body>
</html>

css3实现旋转的八卦图动画相关推荐

用CSS伪类制作一个不断旋转的八卦图？
前言介绍一下如何制作一个不断旋转的八卦图.快速预览代码及效果,点击:八卦图代码如下: HTML部分 <!DOCTYPE html> <html> <head>& ...
html 向下展开,css3箭头旋转+向下展开动画
箭头旋转+向下展开动画 .closeBox { display: inline-block; width: 50px; height: 50px; transition: transform 0.5s ...
CSS3 旋转的八卦图
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>cs ...
css3八卦,CSS3 旋转的八卦图
css3八卦 #container{height: 203px; 200px;border-radius: 200px;box-shadow: 0 0 4px #666666;margin: 100p ...
html制作动态八卦图源码
动态八卦图自动旋转的八卦图,一个html文件就行,如下动态图所示: taijitu.html <!DOCTYPE html> <html><head><me ...
css3绘制八卦图及动画效果
原理很简单,就是外面加个盒子box.作为旋转动画的box,然后里面分别利用两个div使用css3的 border-radius绘制半圆,分别定位在上下中间对齐两个位置,里面在放两个小的原点水平和垂直方 ...
css3制作旋转动画
现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片思路:1.制作之前呢,我们先来 ...
CSS3——3D旋转图（跑马灯效果图）
2019独角兽企业重金招聘Python工程师标准>>> CSS3--3D旋转图(跑马灯效果图) CSS3新增了很多新的属性,可以用很少的代码实现炫酷的动画效果,但由于兼容性各浏览器的 ...
用css3制作旋转加载动画的几种方法
2019独角兽企业重金招聘Python工程师标准>>> 以WebKit为核心的浏览器,例如Safari和Chrome,对HTML5有着很好的支持,在移动平台中这两个浏览器对应的就是i ...

css3实现旋转的八卦图动画

css3实现旋转的八卦图动画相关推荐

最新文章

热门文章