HTMLCSS学习笔记（二十四）——利用border属性制作太极图与哆啦A梦

旋转太极图

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>太极图</title><style>*{margin: 0;padding: 0;}html,body{width: 100%;height: 100%;background: -webkit-linear-gradient(125deg, #2c3e50, #27ae60, #2980b9, #e74c3c, #8e44ad);}.box{position: relative;width: 600px;height: 600px;background: antiquewhite;left: 0;top: 30px;right: 0;bottom: 0;margin: auto;border-radius: 50%;overflow: hidden;animation: taiji 6s linear infinite;}.left{position: relative;width: 300px;height: 600px;background: black;float: left;border-radius: 300px 0 0 300px;}.right{position: relative;width: 300px;height: 600px;background: white;float: right;border-radius: 0 300px 300px 0;}.black_circle_B{position: absolute;width: 300px;height: 300px;background: black;left: 50%;border-radius: 50%;z-index: 5;}.black_circle_S{position: absolute;width: 100px;height: 100px;background: white;left: 275px;top: 100px;border-radius: 50%;z-index: 5;}.white_circle_B{position: absolute;width: 300px;height: 300px;background: white;right: 50%;top: 50%;border-radius: 50%;z-index: 5;}.white_circle_S{position: absolute;width: 100px;height: 100px;background: black;right: 275px;bottom: 100px;border-radius: 50%;z-index: 5;}@keyframes taiji{0%{transform: rotateZ(0deg);}100%{transform: rotateZ(360deg);}}@-webkit-keyframes taiji{0%{transform: rotateZ(0deg);}100%{transform: rotateZ(360deg);}}</style>
</head>
<body><div class="box"><div class="left"><div class="black_circle_B"></div><div class="black_circle_S"></div></div><div class="right"><div class="white_circle_B"></div><div class="white_circle_S"></div></div></div>
</body>
</html>

哆啦A梦

html代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>多啦a梦</title><link rel="stylesheet" href="../css/多啦a梦.css">
</head>
<body><div class="box"><div class="head"><div class="face"><div class="left_eye"><div class="L_eye"></div></div><div class="right_eye"><div class="R_eye"></div></div><div class="nose"></div><div class="mouth"></div><div class="beard first"></div><div class="beard second"></div><div class="beard third"></div><div class="beard fourth"></div><div class="beard fifth"></div><div class="beard sixth"></div></div></div><div class="body"><div class="hands left_hand"><div class="L_hand"></div></div><div class="hands right_hand"><div class="R_hand"></div></div><div class="bell_rope"></div><div class="belly"><div class="bell_body"><div class="bag"></div></div><div class="bell"><div class="bell_T"></div><div class="bell_B"></div></div><div class="crotch"></div></div></div><div class="foot_left"></div><div class="foot_right"></div></div>
</body>
</html>

css代码：

*{margin: 0;padding: 0;
}
html,body{width: 100%;height: 100%;
}
.box{width: 600px;height: 750px;margin: 0 auto;position: relative;
}
.head{position: relative;width: 480px;height: 400px;border: 2px solid #000;background: #0BB1DC;top: 10px;left: 58px;border-top-left-radius: 50% 48%;border-top-right-radius: 50% 48%;border-bottom-left-radius: 30% 50%;border-bottom-right-radius: 30% 50%;box-shadow: -5px 5px 5px 5px #ccc;
}
.face{position: absolute;bottom: 0;left: 38px;width: 400px;height: 290px;background: #fff;border: 2px solid #000;border-top-left-radius: 50% 48%;border-top-right-radius: 50% 48%;border-bottom-left-radius: 30% 50%;border-bottom-right-radius: 30% 50%;
}
.left_eye{position: absolute;width: 120px;height: 130px;left: 76px;top: -67px;border: 2px solid #000;background: #fff;border-radius: 45%;
}
.L_eye{position: absolute;width: 25px;height: 25px;border-radius: 50%;background: #333;bottom: 20px;right: 30px;transform-origin: -10px -5px;animation: L_eye 2s linear infinite;
}
.right_eye{position: absolute;width: 120px;height: 130px;right: 76px;top: -67px;border: 2px solid #000;background: #fff;border-radius: 45%;
}
.R_eye{position: absolute;width: 25px;height: 25px;border-radius: 50%;background: #333;bottom: 20px;left: 30px;transform-origin: 35px -5px;animation: R_eye 2s linear infinite reverse;
}
.nose{position: absolute;width: 50px;height: 50px;border: 2px solid #000;border-radius: 50%;left: 173px;top: 45px;background: -webkit-radial-gradient(70% 30%, circle, #fff 5%, #CA3E01 30%);
}
.nose::after{position: absolute;content: "";display: block;width: 2px;height: 160px;background: #000;left: 50%;top: 50px;transform: translate(-50%);
}
.beard{position: absolute;width: 90px;height: 1px;background-color: #000;
}
.first{top: 145px;left: 30px;
}
.second{top: 115px;left: 30px;transform: rotate(15deg);
}
.third{top: 175px;left: 30px;transform: rotate(-15deg);
}
.fourth{top: 145px;right: 30px;
}
.fifth{top: 115px;right: 30px;transform: rotate(-15deg);
}
.sixth{top: 175px;right: 30px;transform: rotate(15deg);
}
.mouth{position: absolute;width: 300px;height: 150px;bottom: 30px;left: 50px;border-radius: 0 0 50% 50%;border-bottom: 2px solid #000;
}
.body{position: relative;width: 590px;height: 280px;left: 5px;
}
.bell_rope{position: absolute;width: 300px;height: 34px;border: 2px solid #000;left: 143px;border-radius: 18px;background: #B22A00;
}
.hands{position: absolute;width: 250px;height: 70px;border: 2px solid #000;background: #0183A7;
}
.left_hand{left: 30px;transform-origin: right top;transform: rotate(-20deg);
}
.L_hand{position: absolute;width: 80px;height: 80px;background: #fff;border: 2px solid #000;border-radius: 50%;top: -7px;left: -42px;
}
.right_hand{right: 30px;transform-origin: left top;transform: rotate(20deg);
}
.R_hand{position: absolute;width: 80px;height: 80px;background: #fff;border: 2px solid #000;border-radius: 50%;top: -7px;right: -42px;
}
.belly{position: absolute;width: 320px;height: 240px;background: #0183A7;border: 2px solid #000;left: 133px;top: 38px;border-top-left-radius: 20% 50%;border-top-right-radius: 20% 50%;border-bottom-left-radius: 5%;border-bottom-right-radius: 5%;border-top: none;
}
.bell_body{position: absolute;width: 250px;height: 220px;background: #fff;border: 2px solid #000;border-top-left-radius: 20% 50%;border-top-right-radius: 20% 50%;border-bottom-left-radius: 50% 60%;border-bottom-right-radius: 50% 60%;border-top: none;left: 50%;transform: translate(-50%);
}
.bag{position: absolute;width: 200px;height: 100px;background: #fff;border: 2px solid #000;border-radius: 0 0 100px 100px;bottom: 20px;left: 50%;transform: translate(-50%);
}
.bell{position: absolute;width: 64px;height: 64px;border: 2px solid #000;background: #DED317;border-radius: 50%;left: 50%;top: -10%;transform: translate(-50%);overflow: hidden;
}
.bell_T{position: absolute;width: 64px;height: 10px;top: 15px;border: 2px solid #000;border-left: none;border-right: none;
}
.bell_B{position: absolute;width: 15px;height: 15px;background: #000;border-radius: 50%;left: 50%;bottom: 10px;transform: translate(-50%);
}
.bell_B::after{position: absolute;content: "";display: block;width: 2px;height: 10px;background: #000;left: 50%;top: 15px;transform: translate(-50%);
}
.crotch{position: absolute;width: 34px;height: 17px;background: #fff;border: 2px solid #000;border-radius: 17px 17px 0 0;left: 50%;bottom: -2px;transform: translate(-50%);border-bottom: none;
}
.foot_left{width: 190px;height: 50px;left: 100px;position: absolute;border: 2px solid #000;background: #fff;border-top-left-radius: 40% 70%;border-top-right-radius: 20% 50%;border-bottom-left-radius: 20% 50%;border-bottom-right-radius: 20% 50%;box-shadow: -5px 1px 0px 1px #ccc;
}
.foot_right{width: 190px;height: 50px;right: 100px;position: absolute;border: 2px solid #000;background: #fff;border-top-left-radius: 20% 50%;border-top-right-radius: 40% 70%;border-bottom-left-radius: 20% 50%;border-bottom-right-radius: 20% 50%;box-shadow: -5px 1px 0px 1px #ccc;
}
@keyframes L_eye{0%{transform: rotateZ(0deg);}100%{transform: rotateZ(360deg);}
}
@keyframes R_eye{0%{transform: rotateZ(0deg);}100%{transform: rotateZ(-360deg);}
}
@-webkit-keyframes L_eye{0%{transform: rotateZ(0deg);}100%{transform: rotateZ(360deg);}
}
@-webkit-keyframes R_eye{0%{transform: rotateZ(0deg);}100%{transform: rotateZ(-360deg);}
}

HTMLCSS学习笔记（二十四）——利用border属性制作太极图与哆啦A梦相关推荐

[傅里叶变换及其应用学习笔记] 二十四. 级联，脉冲响应
我们上节课学习了在离散有限维空间中,任何线性系统都是通过矩阵间的相乘得到的在连续无限维空间中,任何线性系统都是通过对核函数的积分得到的脉冲响应(impulse response) 级联线性系统( ...
Mr.J-- jQuery学习笔记(二十四)--剖析jQuery源码--extend
定义和用法 jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象. 注意:1. 如果只为$.extend()指定了一个参数,则意味着参数target被省略.此时,target就 ...
立创eda学习笔记二十四：拼板
这里主要是两部分:自带拼板和手动拼板,软件自带拼板功能,那么手动拼板当然就是自己重新画图拼板了. 一般用自带拼板功能就可以了,把单板画好之后很容易就拼好了,完全不用动任何器件和丝印编号,单板会被理解成 ...
Windows保护模式学习笔记（十四）—— 阶段测试
Windows保护模式学习笔记(十四)-- 阶段测试题目一解题步骤题目二解题步骤题目一描述:给定一个线性地址,和长度,读取内容 int ReadMemory(OUT BYTE* buffe ...
QT学习笔记（十四）：QLayout的属性介绍
QT学习笔记(十四):QLayout的属性介绍主要包括QBoxLayout.和QGridLayout以及QFormLayout等的参数类似. 我主要说明一下QGridLayout在QtDesigne ...
Mr.J-- jQuery学习笔记(二十八)--DOM操作方法(添加方法总结)
Table of Contents appendTo appendTo(source, target) 源代码 append prependTo prependTo源码 prepend ...
MATLAB学习笔记（十四）
MATLAB学习笔记(十四) 一.线性方程组求解 1.1 直接法 1.1.1 利用左除运算符 1.1.2 利用矩阵分解 1.2 迭代法 1.2.1 雅可比(Jacobi)迭代法 1.2.2 高斯-赛德 ...
python数据挖掘学习笔记】十四.Scipy调用curve_fit实现曲线拟合
#2018-03-28 10:02:08 March Wednesday the 13 week, the 087 day SZ SSMR python数据挖掘学习笔记]十四.Scipy调用curve ...
Spring Security技术栈学习笔记（十四）使用Spring Social集成QQ登录验证方式
上一篇文章<Spring Security技术栈开发企业级认证与授权(十三)Spring Social集成第三方登录验证开发流程介绍>主要是介绍了OAuth2协议的基本内容以及Spring ...

HTMLCSS学习笔记（二十四）——利用border属性制作太极图与哆啦A梦

旋转太极图

哆啦A梦

HTMLCSS学习笔记（二十四）——利用border属性制作太极图与哆啦A梦相关推荐

最新文章

热门文章