css3绘制中国结

【css3绘制中国结】的更多相关文章

<!doctype html> <html> <head> <title></title> <meta charset='utf-8'> <style type="text/css"> :root,body{ height: 100%; width: 100%; } .z{ width:200px; height: 400px; left: 400px; position: absolute; } .z…

CSS3绘制六边形

因为很简单,所以先总结一下:使用CSS3绘制六边形主要使用伪类:before和:after在源元素之前和之后再绘制两个元素,并利用css3的边框样式,将这两个元素变成三角形放置在源元素的两端即可. (因为之前在生物公司工作过,觉得六边形更贴近生物分子.基因等概念,包括我们在网上搜索关于生物分子.基因等图片,好多也有六边形的样式,所以那时候在页面做一些功能性的导航或Tag,都会觉得六边形更贴近一些). 完整的页面效果如下图:(其实是多个六边形定位成这样子的.当然,也可以设置不同六边形的颜色,这样就…

CSS3绘制旋转的太极图案（一）

实现步骤: 基础HTML: <div class="box-taiji"> <div class="circle-01"></div> <div class="circle-02"></div> </div> 步骤一: .box-taiji {width:400px;height:400px;position:relative;margin:50px auto;bor…

css3绘制几何图形

用css3绘制你需要的几何图形 1.圆形示例: 思路:给任何正方形元素设置一个足够大的 border-radius ,就可以把它变成一个圆形.代码如下: html: <div class="size example1"></div> css: .size{ width:200px; height: 200px; background: #8BC34A; } .example1{ border-radius:100px; } 2.自适应椭圆思路:border-…

用纯CSS3绘制萌系漫画人物动态头像

大家已经见惯了用CSS3画的图标.LOGO.头像,这次台湾同学Rei给我们带来了用纯CSS3绘制的日本动漫<轻音少女>女主角秋山澪的动态头像.看到动图我震惊了!!!CSS3的强大再次霸气测漏! 示例中用到的主要CSS3特性如下: border-radius:绘制边框圆角. transform:主要是旋转(rotate)和偏斜(skew),用于绘制各种形状. animation:动画效果的实现,例如头发的飘动.眼睛的闪动. 只要掌握了这几个特性,你也能画出同样奇妙的CSS3动画,赶快试试吧!…

css3绘制腾讯logo

CSS3绘制的腾讯LOGO,下边是对比图. 演示地址…

【项目1-1】使用HTML5+CSS3绘制HTML5的logo

作为一个WEB小萌新,自学了有一段时间,总是感觉停滞不前.最近反思中,想到前贤一句话:书读百遍其义自见.说到底,还是项目做的少,如果做多了,想必自然会得心应手. 利用HTML5+CSS3绘制HTML5的Logo <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </h…

CSS3绘制砖墙-没实用不论什么图片

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-…

使用 CSS3 绘制 Hello Kitty

偶然间看到了 SegmentFault 上的一篇文章,感觉这个 Hello Kitty 画的还不错,心血来潮也用 CSS3 画了个 Hello Kitty,现在在这里记录一下详细的绘制过程.想要源码.素材.在线演示的同学可以直接拉到最下面. 我们先看下原图: 结构分解从上图可以看出,Hello Kitty 由脸蛋.耳朵.红色蝴蝶结.眼睛.鼻子和六根胡须构成,所以 DOM 结构也相对简单: <div class="hello-kitty-div"> <!-- 脸蛋 -…

详解使用CSS3绘制矩形、圆角矩形、圆形、椭圆形、三角形、弧

1.矩形绘制矩形应该是最简单的了,直接设置div的宽和高,填充颜色,效果就出来了. 2.圆角矩形绘制圆角矩形也很简单,在1的基础上,在使用css3的border-radius,即可. 3.圆根据圆的特性,在2的基础上,设置div的宽和高一直,为正方形,然后设置border-radius为50%即可. 4.椭圆椭圆也很简单了,只需要在3的基础上,让div的宽和高不一致即可.为了更好看,建议宽设置为高的1.5倍. 5.三角形三角形相对其他来说,就有点难了.这里我们要用到border-sty…

CSS3 绘制360安仔小精灵[原创]

Css3图形通常由矩形,圆形,椭圆,三角形,梯形等组合而成. 矩形,为display:block的块级元素设定宽高,便能实现, 圆角矩形,椭圆,圆形,则通过border-radius 属性来得到. 圆角矩形,几种写法: 1, border-radius: 70px 30px 60px 0px; 按顺时针方向, 上左,上右,下右,下左, 分别定义了矩形4个角的弧度. 如图: 2.border-radius: 70px 30px 60px ; 不写第4个(下左角)的值,那么值默认与它的对角(上右角)…

用CSS3绘制图形

参考资料:http://blog.csdn.net/fense_520/article/details/37892507 本文非转载,为个人原创,转载请先联系博主,谢谢~ 准备: <!DOCTYPE html> <head> <meta charset="UTF-8"> <title>- UED - </title> <style type="text/css" src="css/style…

大厂前端工程师教你如何使用css3绘制任意角度扇形+动画

这里只是做下原理解释,原理:使用两个半圆做角度拼接.比如想绘制一个缺口朝右,缺口弧度30度角的扇形资源网站搜索大全https://55wd.com 那么将由一个旋转65度角的半圆A+一个旋转-65度角的半圆B组合而成.代码: <style> .outer{ position: absolute; width: 200px; height: 200px; transform: rotate(65deg); clip: rect(0px,100px,200px,0px);/* 这个clip属性用…

div+css3绘制基本图形

基本图形包括:矩形.圆角矩形.圆形.椭圆形.三角形.值线.弧这些图形的绘制用到了CSS圆角属性,不考虑IE8. 下面的实现在chrome浏览器运行通过. 1.矩形比较简单,通过CSS设置宽度.高度.背景色即可. html: <div class="rectangle"></div> css: .rectangle { width: 150px; height: 100px; background-color: orangered; } 呈现: 2.圆角矩形…

CSS3绘制404页面

标题有点噱了...最近在做一个交通有关的项目, 想做一个类似标志牌的404, 所以就有了这个. 只用的CSS3中的旋转, 效果如下上代码: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Error</title> <style> .circle {…

用css3绘制你需要的几何图形

1.圆形示例: 思路:给任何正方形元素设置一个足够大的 border-radius ,就可以把它变成一个圆形.代码如下: html: <div class="size example1"></div> css: .size{ width:200px; height: 200px; background: #8BC34A; } .example1{ border-radius:100px; } 2.自适应椭圆思路:border-radius 这个属性还有另外一…

CSS3绘制弹球动画效果

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .box{ width:400px; height: 400px; border: 1px solid #ccc; margin:30px aut…

css3 绘制优惠券

今天偶然发现了一个css3制作动画的地方,发现css3的径向渐变好难理解,幸亏有这里的大神介绍http://www.daqianduan.com/5989.html,这是优惠券的介绍还有这个http://blog.csdn.net/playboyanta123/article/details/9303857感谢帮助,今天还有很多不懂的地方,感觉好纠结弄这个东西…

demo_05HTML5+CSS3绘制小鸟

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } body{ background-color: skyblue } .cloud{ width: 200px; height: 200px; p…

css3绘制三角形

将div的宽和高设置为0:利用border-width.border-style.border-color属性绘制不同位置边框的样式.将不需要展示的三角颜色填充为transparent透明即可,就能得到某一部分三角. ;; border-style: dashed dashed dashed solid ; /* dashed是兼容ie6写法,ie6不支持背景透明*/ border-width:10px; border-color:transparent transparent transpar…

CSS3绘制灰太狼动画，绝对精彩

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-…

纯css3绘制扇形

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> .hold{position:absolute;width:200px;height:200px;} .outer{position:absolute;width:200px;height:200px;transform:rotate(…

怎么利用CSS3绘制三角形

最近三角形挺火,很多地方都能碰到,如网页,微信,或者QQ空间的时间轴等地方都能看到,而且这些并不是图片插入进去的,那就需要用CSS来做了 <p class="bbb">111111111111</p> <br/> <div class="triangle-up">  </div> <br/> <div class="triangle-down&…

CSS3绘制环形进度条

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{margin: 0;padding: 0;} .box{width:200px;height:200px;margin:10px auto;position:relative;} .box div{posit…

css3 绘制图形

星形: .star-six { width:; height:; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid yellow; position: relative; } .star-six:after { width:; height:; border-left: 50px solid transparent; border-right:…

CSS3绘制特殊图形

…

css3 绘制书本

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>翻书的效果</title> <style> body{ background-color:#A0A0A4; } .book-wrapper{ width: calc(100%/5); } .book-notbook{ margin:20px; position:relative;…

纯CSS3绘制神奇宝贝伊布动画特效

在线演示本地下载…

纯CSS3绘制的黑色图标按钮组合

在线演示本地下载…

CSS3绘制不规则图形，代码收集

三角形系列(三角形.倒三角.左三角.右三角.左上三角.右上三角.左下三角.右下三角) 主要用到的是:宽度高度设置为0, border的各个边的设置(各个边的透明或不透明): .triangle-up { /* 三角形 */ width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #f00; } .triang…