【DIV+CSS】代码作业练习DIV+CSS太极阴阳图
1. DIV + CSS 练习:太极阴阳图。
基本思路:由三个div块元素组成;
#taiji太极阴阳图底面
#yin太极阴阳图阴面小圆
#yang太极阴阳图阳面小圆
(太极阴阳图:上为阳下为阴或左为阳又为阴)
2. 太极阴阳图底图#taiji:
巧用边框:宽度0高度300px,左右边框150分别150px;然后圆角处理作圆形。
#taiji{
margin:auto;
width:0;
height:300px;
border-left:150px solid #fff;
border-right:150px solid #000;
box-shadow: 0 0 20px 0 #333;
border-radius:100%;
}
3. 阴阳小圆,两个眼分别用伪属性:before或:after一个做小圆眼。
#yin{
width:150px;
height:150px;
border-radius:100%;
background:#000;
}
#yin:after{
position:absolute;
content:" ";
width:50px;
height:50px;
border-radius:100%;
background:#fff;
}
4. 定位组合,效果如图:
5. 全部代码:
<!DOCTYPE html><html><head><title> 飛天网事--DIV+CSS代码阴阳太极图 </title><meta charset="utf-8" /><meta name="description" content="飛天网事,WEB前端开发,纯css3代码时钟精彩案例" /><meta name="keywords" content="飛天网事,WEB前端开发,HTML5,CSS3,jQuery," /><meta name="author" content="R.tian @eduppp.cn 2015"><link rel="shortcut icon" href="http://eduppp.cn/images/logo4.gif" /><link rel="apple-touch-icon" href="http://eduppp.cn/images/logo.gif" /></head><body><style type="text/css">#taiji{margin:auto;width:0;height:300px;border-left:150px solid #fff;border-right:150px solid #000;box-shadow: 0 0 20px 0 #333;border-radius:100%;}#yin{position:absolute;margin:150px 0 0 -75px;width:150px;height:150px;border-radius:100%;background:#000;}#yin:after{position:absolute;margin:50px 0 0 50px;content:" ";width:50px;height:50px;border-radius:100%;background:#fff;}#yang{position:absolute;margin:0 0 0 -75px;width:150px;height:150px;border-radius:100%;background:#fff;}#yang:after{position:absolute;margin:50px 0 0 50px;content:" ";width:50px;height:50px;border-radius:100%;background:#000;}</style><div id="taiji"><div id="yin"></div><div id="yang"></div></div></body></html>
使用一个div元素完成太极阴阳图,要点| :before、:after伪对象和box-shoadow阴影的使用。
<style> #taiji{ position:absolute; width:0px; height:300px; box-shadow:0 0 100px #000; border-left:150px solid #fff; border-right:150px solid #000; border-radius:100%; } #taiji:before{ content:"; "; position:absolute; left:-25px;top:50px; width:50px;height:50px; border-radius:100%; background:#000; box-shadow:0 0 0 50px #fff ; } #taiji:after{ content:"; "; position:absolute; left:-25px;top:200px; width:50px;height:50px; border-radius:100%; background:#fff; box-shadow:0 0 0 50px #000 ; } </style><div id="taiji" ></div>
本文来自 rtian001 的CSDN 博客 ,全文地址请点击:https://blog.csdn.net/rtian001/article/details/48686353?utm_source=copy
转载于:https://www.cnblogs.com/7qin/p/9703632.html
【DIV+CSS】代码作业练习DIV+CSS太极阴阳图相关推荐
- 【DIV CSS】代码作业练习DIV CSS太极阴阳图
1. DIV CSS 练习:太极阴阳图. 基本思路:由三个div块元素组成: #taiji太极阴阳图底面 #yin太极阴阳图阴面小圆 #yang太极阴阳图阳面小圆 (太极阴阳图:上为阳下为阴 ...
- 用css实现一个太极阴阳图,使用多个div块实现
用css实现一个太极阴阳图,使用多个div块实现 下面是HTML代码 <!DOCTYPE html> <html lang="en"> <head&g ...
- Java绘制太极阴阳图
用Java语言绘制的太极阴阳图,没有精确的坐标,所以没有标准的中心对称,仅供参考. 示例代码如下: import java.awt.Font; import java.awt.Graphics; im ...
- Tweetable Mathematical Art 太极阴阳图
从Matrix67 blog里面看到了Tweetable Mathematical Art. 使用C++实现3个函数RD(i, j), GR(i, j), BL(i, j)分别返回像素(i, j)的R ...
- css 横线_CSS-画一个太极阴阳图
先来看一下最终展示 接下来一步步实现它 第一步 写一个HTML文件,内容只需要一个<div>标签,给一个类为"taiji" <!DOCTYPE html> ...
- css布局作业:京东首页轮播图
效果: html代码: <!DOCTYPE html> <html lang="en"> <head><meta charset=&quo ...
- html表格垂直居中的CSS代码,使用3行CSS代码使任何元素垂直居中
在页面设计中,使元素水平居中是比较简单的事情.但是如何使元素垂直居中呢?其实,我们通过3行CSS代码(不包括添加浏览器厂商所需的代码)就可以使任何元素垂直居中.秘诀就是使用transform: tra ...
- html css绘制太极,css画太极阴阳图
前言:道生一,一生二,二生三,三生万物 今天,我们来聊聊如何用 CSS 实现 太极图? 在网上可以找到很多资料,不过我强推荐一个css酷炫效果的网站,我们要实现一个 阴阳图,谷歌搜索关键词:css t ...
- 背景的css代码,创建炫酷 CSS 背景效果的 10 个代码片段
在现代网页设计中,大背景图设计非常流行.随着高清(现在是4K)显示器的出现,越来越多的网页设计师使用大背景图来填充屏幕. 为什么? 因为这样可以造成很大的视觉冲击力,并有助于更好的传递所要表现的内容. ...
最新文章
- R语言使用caret包的preProcess函数进行数据预处理:对所有的数据列进行独立成分分析ICA(Independent components analysis)、设置method参数为ica
- 清华集训2014 day2 task1 简单回路
- 解决虚拟机vmware虚拟机安装64位系统“此主机支持 Intel VT-x,但 Intel VT-x 处于禁用状态”的问题
- nginx、apach、php、mysql编译参数
- BeanUtils工具的使用
- 《Java编程思想》《Think in Java》笔记
- 二叉树的非递归遍历(统一的模板)
- 阿里云服务器Svn-Server无法连接,阿里云服务器SVNServer配置
- html 弹出层插件,jQuery弹出层插件(原创)
- 你眼中的嵌入式是什么样?
- 让你脱胎成技术大神的JAVA开发技巧
- 面试官问:断网了,还能ping通 127.0.0.1 吗?为什么?
- 3. 机器学习中为什么需要梯度下降_梯度提升(Gradient Boosting)算法
- 移动互联网实战--资源类APP的数据存储处理和优化
- 如何使用 SQL Server FILESTREAM 存储非结构化数据?
- 崩坏3服务器维护2月8号,崩坏3影骑士月轮将在2月8日更新后正式登场
- Java实现 LeetCode 48 旋转图像
- 中止执行后超过2年_执行中止。债权人是否两年内都要申请执行一次。如果中止执行两年内不申请执行,是否都再也执行不了...
- 如何看待互联网公司 996 现象,是种什么样的体验?
- Android初识-Intent用法进阶篇