css3画图之大白(●—●)

把大白送给你~ <!DOCTYPE html> <html> <head> <title>大白</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <style type="text/css"> *, body { margin: 0;…

闲来无事,写写图形.当时巩固一下css3吧..前端小白,写的不好还请前辈多指教. 三角形 { width:; height:; border-bottom: 140px solid red ; border-right: 70px solid transparent; border-left: 70px solid transparent; } 圆形 { width: 0px; height: 0px; border:50px solid red; border-radius: 50%; } 梯…

CSS3画图

众所周知,用CSS3的圆角.转换可以画出各种不同的形状,制作不同的图案,早些前先驱者已画出经典的叮当猫,iphone手机等展示CSS3的强大实力,趁最近有空我也对CSS3进行了一些实践,颇有收获. 用border边框属性可以画出各种三角形,矩形,用border-radius可以画出何种圆形.扇形.圆弧型,利用内置阴影外置阴影可以有各种投影效果,只要你去尝试就好发现可以出来各种形状结合实践画了个会动的小黄人地址http://play.163.com/special/minions/ 实践中的收…

玩转CSS3,嗨翻WEB前端,CSS3伪类元素详解/深入浅出[原创][5+3时代]

在我的上一篇博客中, 很多园友提出说对css3"画图"不是很理解, 在跟他们私聊了一段时间以后,加上自己在开始自学css3的时候的疑惑,我觉得大家之所以不是很理解主要是因为对伪元素不太了解,介于画图和CSS3里一些高大上的特效用的比较广泛的伪类元素就是::before 和 ::after, 写这篇博客主要也是为了起到一个敲门砖的作用,所以本篇博客主要是讲::before 和 ::after.那么就让我们一起来聊聊伪元素吧. 2.CSS历史伪元素实际上在CSS1(CSS1发布于 199…

CSS3特殊图形制作

CSS3特殊图形制作现在IE8+的浏览器都支持CSS3+HTML5了,IE8及以下的浏览器的浏览器也快告一段落了,大前端的时代来了.废话不多说,现在开始用CSS3画图 1.心型 //HTML <div class="box"></div> //css3 <style> .box{ position: relative; width: 160px; height: 160px; border: 1px solid red; } .box:before…

【二次元的CSS】—— 用 DIV + CSS3 画大白（详解步骤）

原本自己也想画大白,正巧看到一位同学(github:https://github.com/shiyiwang)也用相同的方法画了. 且细节相当到位.所以我就fork了一下,在此我也分享一下.同时,我也希望有更多的同学发挥自己的想象力,来找个东西画画. 如果看过我前几次的分享,肯定能马上想到大白的各个部位是怎么实现的. GitHub传送门:https://github.com/lancer07/css3_Baymax 第一步:头 <div class="baymax-head"&g…

一分钟可知css3版大白源码

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Baymax</title> <link rel=stylesheet href="demo2.css"/> </head> <style> body { background: #595959; } #baymax{ /*设置为居中*/…

前端制作动画的几种方式（css3，js）

制作动态的网页是是前端工程师必备的技能,很好的实现动画能够极大的提高用户体验,增强交互效果,那么动画有多少实现方式,一直对此有选择恐惧症的我就总结一下,以便在开发的时候选择最好的实现方式. 1.css的transition. 语法: transition: property duration timing-function delay; property:填写需要变化的css属性如:width,line-height,font-size,color等; duration:完成过渡效果需要的时间(…

06. Web大前端时代之：HTML5+CSS3入门系列~HTML5 画布

Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 我们先看看画布的魅力: 初始画布 canvas默认是宽300px,高150px; 绘制步骤 1.定义一个id <canvas id="canvasOne" width="300" height="300"></canvas> 2.获取canvas对象 var canvasObj =…

CSS3与页面布局学习总结（四）——页面布局大全

一.负边距与浮动布局 1.1.负边距所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能如下: 1.1.1.向上移动当多个元素同时从标准流中脱离开来时,如果前一个元素的宽度为100%宽度,后面的元素通过负边距可以实现上移.当负的边距超过自身的宽度将上移,只要没有超过自身宽度就不会上移,示例如下: <!DOCTYPE html> <html> <head> &…

CSS3与页面布局学习总结（二）——Box Model、边距折叠、内联与块标签、CSSReset

一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border).内边距(Padding)和内容(Content),其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型,加上了doctype声明,让所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子.当设置一个元素的样式如下: <!DOCTYPE html> <html> <…

使用css3新属性clip-path制作小图标

一般一个网页上面,或多或少都会用到一些小图标,展示这些小图标的方法有很多种.最简单的做法就是将UI图上面的每个小图标都保存为图片,一个小图标就一张图片.但这也是比较笨的方法,因为浏览器同一时间最多加载的资源是有限的,例如IE7是2个,IE8是6个,chrome是6个,火狐是8个.如果网页上面有很多张零碎的小图片,导致请求的次数太多,等待加载状态中的资源会很多,明显影响性能.因此,一个改进的办法是使用sprites图,将多张小图放在一张大图,然后限定展示区域的大小,同时改变图片的显示位置backg…

CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)

一.负边距与浮动布局 1.1.负边距所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能如下: 1.1.1.向上移动当多个元素同时从标准流中脱离开来时,如果前一个元素的宽度为100%宽度,后面的元素通过负边距可以实现上移.当负的边距超过自身的宽度将上移,只要没有超过自身宽度就不会上移,示例如下: <!DOCTYPE html> <html> <head> &…

html5之canvas画图基础

HTML5+CSS3的好处是,你可以编写一个页面分别用于不同的平台,只需要设置不同的css样式就可以了,现在基本主流浏览器都支持全新的HTML5和CSS3,因为它的跨平台开发.因为是原生代码所以它的页面打开速度会比一些WEB前端开发框架要快. HTML5中的canvas就是一个可以减少页面图片的画布工具,使用<canvas> 标签定义图形,比如图表和其他图像,使用JS脚本来绘制图形.在Canvas上画一个矩形,渐变矩形,彩色矩形,和一些彩色的文字.比如这些. 在使用canvas时,请注意要在c…

CSS3与页面布局学习总结（四）——页面布局大全BFC、定位、浮动、7种垂直居中方法

目录一.BFC与IFC 1.1.BFC与IFC概要 1.2.如何产生BFC 1.3.BFC的作用与特点二.定位 2.2.relative 2.3.absolute 2.4.fixed 2.5.z-index属性 2.6.菜单 2.7.:target伪类三.浮动 3.1.float取值 3.2.float的特性 3.3.清除浮动 3.3.1.清除外部浮动 3.3.2.清除内部浮动四.多种居中办法 4.1.块标签自身水平居中 4.2.块标签内对齐 4.3.垂直居中方法一 4.4.垂直居中方法…

CSS3与页面布局学习笔记（二）——盒子模型(Box Model)、边距折叠、内联与块标签、CSSReset

一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border).内边距(Padding)和内容(Content),其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型,加上了doctype声明,让所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子.当设置一个元素的样式如下: <!DOCTYPE html> <html> <…

CSS3与页面布局学习总结——Box Model、边距折叠、内联与块标签、CSSReset

目录一.盒子模型(Box Model) 1.1.宽度测试 1.2.溢出测试 1.3.box-sizing属性 1.4.利用CSS画图二.边距折叠 2.1.概要 2.2.垂直方向外边距合并计算三.内联与块级标签 3.1.行内标签与块标签区别 3.2.隐藏 3.3.行内块标签 3.4.菜单示例四.重置浏览器默认样式 4.1.CSSReset 4.1.1.MT css reset 4.1.2.PC css reset 4.1.3.PPTV css reset 4.1.4 YUI css res…

【转】15个无比华丽的HTML5/CSS3动画应用

原文转自:http://www.html5cn.org/article-7089-1.html 前几天,HTML5标准已经尘埃落定,未来的Web将会是由HTML5主导,当然作为开发者对这一喜讯更为动心.本文主要分享了15个无比华丽的HTML5/CSS3动画应用,供大家参考学习.1.HTML5/CSS3图片选择动画可选择多张图片今天我们来分享一款既炫酷又实用的HTML5图片选择特效,当图片被选中时,图片上就会覆盖一个半透明的层,上面有一个勾,并且在选中的时候图片出现弹跳的动画效果. 在线演示 …

html5之canvas画图

导航前言基本知识绘制矩形清除矩形区域圆弧路径绘制线段绘制贝塞尔曲线线性渐变径向渐变(发散) 图形变形(平移.旋转.缩放) 矩阵变换(图形变形的机制) 图形组合给图形绘制阴影绘制图像(图片平铺.裁剪.像素处理[不只图像.包括其他绘制图形]) 绘制文字保存和恢复状态(context) 保存文件结合setInterval制作动画结语.demo下载前言 <canvas></canvas>是html5出现的新标签,像所有的dom对象一样它有自己本身的属性.…

《HTML5与CSS3实例教程》

<HTML5与CSS3实例教程> 基本信息作者: (美)Brian P. Hogan 译者: 卢俊祥丛书名: 图灵程序设计丛书出版社:人民邮电出版社 ISBN:9787115363404 上架时间:2014-7-25 出版日期:2014 年8月开本:16开页码:1 版次:1-1 所属分类:计算机 > 数码/设计 > CSS 计算机 > 软件与程序设计 > 网络编程 > HTML 更多关于>>> <HTML5与CSS3实例教程>…

HTML5和css3的总结

简单的罗列一个HTML5的新东西,以后的几天里详细的过一遍一个挺有用的网站:www.css88.com [H5的新标签] 用之前的标签完全可以代替的:header footer aside atrical nav address time mark section 新增的重要的标签:video audio caves(画图) 这些新标签的作用:语义化,使代码的可读性更强:便于提高搜索优化. 再谈谈兼容性:兼容IE9+,IE8及其以下有些可以解决,但大部分的还是放弃.这里有两个词我觉得挺好,简单写…

（转）浅谈HTML5与css3画饼图！

神马系饼图? 饼图,大家都应该熟知,在统计数据对比方面,几乎处处用到.如cnzz的统计饼图从饼图中,很形象地展示了访问者地区的分布,以扇形为块的方式拼成一个大圆. 都使用什么方法实现目前众多站点制作饼图大多使用flash,或者后台语言生成,如PHP,Python只要安装相应的基础库就能实现画图.但很少有站点这么干,因为耗费服务器资源. cnzz里使用的就是flash PHP生成的 HTML5与CSS3也能画出饼图不得不说,HTML5与CSS3的推出,将推翻老一代的网页制作者.特别在当今浏览…

8个超炫酷的纯CSS3动画及源码分享

在现代网页中,我们已经越来越习惯使用大量的CSS3元素,而现在的浏览器也基本都支持CSS3,所以很多时候我们不妨思考一下是否可以用纯CSS3制作一些有趣或者实用的网页.本文要分享8个超炫酷的纯CSS3动画,有几个非常经典,比如大象走路的那个,如果你对CSS3感兴趣,赶紧来看看吧. 1.纯CSS3实现大象走路动画之前我们分享过一款纯CSS3人物行走动画,效果相当震撼.这一次要给大家介绍的是一款纯CSS3实现的大象走路动画,大象走路时的形态表现的十分逼真,你可能不会想到,这么给力的动画居然是用纯C…

7款纯CSS3实现的炫酷动画应用

1.纯CSS3实现人物摇头动画这次我们要来分享一款超级可爱的纯CSS3人物摇头动画,初始化的时候人物的各个部位是利用CSS3动画效果拼接而成,接下来就是人物听音乐的场景,一边听音乐一边摇着脑袋,十分陶醉的样子,周围还会出现跳动的音符动画. 在线演示源码下载 2.CSS3 Loading进度条加载动画特效 3款绚丽风格今天我要分享一款更加炫酷的CSS3进度条加载动画特效,该动画特效有3个不同的风格,注意,IE6,7,8是不支持该进度条动画的. 在线演示源码下载 3.纯CSS3实现云雾缭绕动…

css3种方法实现元素的绝对居中

元素的绝对居中应该是很多人熟悉的一个小应用,我记得很多年前去神州数码面试的时候就遇到过这个面试题.方法比较简单,代码如下: .node{ width : 300px; height : 400px; position : absolute; left : 50%; top : 50%; margin-left : -150px; /*一半的高度*/ margin-top : -200px; /*一半的宽度*/ } 这样的用法网上很多,我那时候也是只知其然不知其所以然,margin负值是一方面,这…

玩转html5<canvas>画图

导航前言基本知识绘制矩形清除矩形区域圆弧路径绘制线段绘制贝塞尔曲线线性渐变径向渐变(发散) 图形变形(平移.旋转.缩放) 矩阵变换(图形变形的机制) 图形组合给图形绘制阴影绘制图像(图片平铺.裁剪.像素处理[不只图像.包括其他绘制图形]) 绘制文字保存和恢复状态(context) 保存文件结合setInterval制作动画结语.demo下载前言 <canvas></canvas>是html5出现的新标签,像所有的dom对象一样它有自己本身的属性.…

CSS3 skew倾斜、rotate旋转动画

css3出现之前,我们实现一个对象的一组连续动画需要通过JavaScript或Jquery编写,脚本代码较为复杂: 若需要实现倾斜.旋转之类的动画难度将更高(我还没试过用JavaScript或Jquery如何实现),而且即使能实现估计花的时间代价及维护难度是很大的,很多时候只能依靠画图工具制作此类动画文件: 有时候在想如果不用脚本语言,也不用画图工作制作动画文件,就能在网页上实现倾斜.旋转之类的动画效果多好. 最近挤出一些业余时间学习CSS3,其中就包含很多动画示例,花了点时间学习和整理今天分…

用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 学习小结

写样式时有时遇到浏览器兼容问题:-webkit-transition:chrome和safari-moz-transition:firefox-ms-transition:IE-o-transition:Opera但是在JS 中则不允许带前边的横杠,并且首字母大写,如WebkitTransition,MozTransition,MsTransition,OTransition属性选择器:设置样式的格式:表签名[属性名=value]{}表签名[属性名~=value]{}//属性值是一个词组用空格分…

HTML5和CSS3

一.HTML5 HTML5 是 HTML 标准的最新演进版本. 这个术语代表了两个不同的概念:它是一个新的 HTML 语言版本包含了新的元素,属性和行为,同时包含了一系列可以被用来让 Web 站点和应用更加多样化,功能更强大的技术. l 语义:能够让你更恰当地描述你的内容是什么. HTML5 中的节段和提纲 HTML5 中新的提纲和节段元素一览: <section > :定义区段,语义大于div, <article > :定义文章, <nav > …