CSS属性绘制图形(一)
div部分:
<div class="react-logo">
<div class="reactive"></div>
</div>
CSS代码:
html, body{
width: 100%;
height: 100%;
min-height: 100%;
font-family: 'Gloria Hallelujah', cursive;
font-size: 100%;
background-color: #222;
display: flex;
align-items: center;
justify-content: center;
}
.react-logo{
width: 500px;
height: 160px;
position: relative;
border: 15px solid #fff;
border-radius: 50%;
box-shadow: #00d8ff 0px 0px 44px 0px;
}
.react-logo:before{
content: "";
width: 500px;
height: 160px;
position: absolute;
border: 15px solid #aaa;
border-radius: 50%;
transform: rotate(125deg);
top: -25px;
left: -18px;
box-shadow: #00d8ff 0px 0px 44px 0px;
}
.react-logo:after{
content: "";
width: 500px;
height: 160px;
position: absolute;
border: 15px solid #00d8ff;
border-radius: 50%;
transform: rotate(-125deg);
top: -25px;
left: -18px;
box-shadow: #00d8ff 0px 0px 44px 0px;
}
.reactive{
width: 100px;
height: 100px;
float: left;
background-color: #aaf;
border-radius: 50%;
margin-left: calc(50% - 50px);
margin-top: 30px;
box-shadow: #00d8ff 0px 0px 44px 0px;
}
最终效果:
CSS属性绘制图形(一)的更多相关文章
- CSS图形基础:纯CSS绘制图形
为了在页面中利用CSS3绘制图形,在页面中定义 <div class="container"> <div class="shape"> ...
- CSS 魔法系列:纯 CSS 绘制图形(心形、六边形等)
<CSS 魔法系列>继续给大家带来 CSS 在网页中以及图形绘制中的使用.这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等. 我们的网页因为 CSS 而呈现千 ...
- css clip-path的polygon属性绘制多边形
通过设置多个点的坐标位置来绘制图形的形状 .box{ clip-path:polygon(x1 y1, x2 y2, x3 y3, , , , , ,) backgroud-color:red; }
- html5 canvas 笔记一(基本用法与绘制图形)
<canvas> 元素 <canvas id="tutorial" width="150" height="150"> ...
- HTML5—canvas绘制图形(1)
1.canvas基础知识 canvas元素是HTML5中新增的一个重要的元素,专门用来绘制图形,不过canvas本身不具备画图的能力,在页面中放置了canvas元素,就相当于在页面中放置了一块矩形的“ ...
- 浅谈JavaScript的Canvas(绘制图形)
HTML5中新增加的一个元素canvas,要使用canvas元素,浏览器必须支持html5.通过canvas标签来创建元素,并需要为canvas指定宽度和高度,也就是绘图区域的大小. <canv ...
- CSS一些特殊图形
CSS一些特殊图形 CSS绘制三角形 通过控制元素的border属性可以实现三角形效果; 首先来设置4个边框, 为50px solid [color] color设置成不同的颜色值看一下效果 < ...
- css属性的选择对动画性能的影响
现在手机的占比越来越高,各种酷炫页面层出不穷,这些特效都离不开css动画.说到css动画,主流的情况也就无非这两大类:位移和形变.而我们在写一个动画特效的过程中,如何去提升它的性能呢?当然首先我们需要 ...
- CSS属性一览
CSS 属性 CSS 属性组: 动画 背景 边框和轮廓 盒(框) 颜色 内容分页媒体 定位 可伸缩框 字体 生成内容 网格 超链接 行框 列表 外边距 Marquee 多列 内边距 分页媒体 定位 打 ...
随机推荐
- Memcached存储机制
Memcached存储机制 memcached 内存管理 分析(转) 缓存.缓存算法和缓存框架简介 memcached全面剖析–PDF总结篇
- android代码规范和studio配置CodeStyle
studio配置CodeStyle可以很好的帮助我们检测代码规范性,保持大家的代码统一,来看看怎么配置和使用吧 代码规范,自己公司的一套 代码规范 一. 简介 A. 目的 本文提供一整 ...
- 安装配置和使用HBASE Cluster(基于发行版CDH5.0.2)——系列随笔
本系列文章只是记录了笔者本人在学习实验安装和使用基于CDH5.0.2的HBASE集群过程中的一些经验教训和心得,绝不是详细的安装过程,因本人不过一初学者,很多方面不甚了了,如果能让不幸读到的人有所得则 ...
- C++标准命名空间std
输入输出要用到这个. 标准C++库的所有的标识符都是在一个名为std的命名空间中定义的,或者说标准头文件(如iostream)中函数.类.对象和类模板是在命名空间 std中定义的.std是standa ...
- VC++关于UNICODE版本的开发
关于UNICODE版本的开发 代码转换方案 概述 在VC6.0中,相应的有一些宏来代替ANSI的函数.宏或数据类型,这些宏在ANSI编译条件中处理字符串为单字节,而在UNICODE中处理字符串为双字节 ...
- JSP求和计算
已知两个数的值,如何求和并输出? <%@ page language="java" import="java.util.*,java.text.*" co ...
- 绑定方式开始服务&调用服务的方法
1.编写activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/androi ...
- Selenium 查找节点
Selenium 可以驱动浏览器完成各种操作,比如填充表单.模拟点击等.比如,我们想要完成向某个输入框输入文字的操作,总需要知道这个输入框在哪里吧?而 Selenium 提供了一系列查找节点的方法,我 ...
- 使用 requests 进行身份认证
如下图,有些网站需要使用用户名密码才可以登录,我们可以使用 requests 的 auth 参数来实现 import requests req = requests.get("http:// ...
- CMS4.0——后知后觉
前言: 2016年底,自己作为参与者加入CMS3.0的改版中:2017年中,CMS4.0在经过一个月有余的时间,华丽丽的蜕变成现在大家喜闻乐见的:http://news.gangguwang.com/ ...