前端的入门现在基本是由html和css组合写静态页面开始，下面为各位总结了HTML5和css3的新特性。一、HTML51.添加视频Video和音频Audio标签2.添加canvas画布和svg渲染矢量图片3.添加input表单控件(datetime、datetime-local、week、date、month、time)、color、email、number、range、search、t...
content-box和?border-box描述的太抽象了，这样更不好理解。直观通俗的解释是：content-box：指定盒模型为W3C标准模型，设置border、padding会增加元素width与height的尺寸，即border与padding相当于是元素的“殖民地”，元素的“土地”、尺寸会增加，为向外延伸。border-box：指定盒模型为IE模型(怪异模...
1.利用css如何制作一个半圆？(思路：对样式border-radius以及宽高的控制)复制代码div{display:inline-block;border:1pxsolid#6baabb;width:40px;height:40px;float:left;margin:0px10px;}a{display:inline-block;width:40px;height:40px;b...
和)清除浮动，并为其定义CSS代码clear:both。代码实例：.demo{width:500px;margin:50pxauto;background-color:#CCCCCC;}.left{width:100px;height:100px;float:left;background-color:#21B4BB;}.right{width:100px;height:5...
这是一组效果非常炫酷的纯CSS3Loading加载动画特效。这组loading动画共有27种不同的效果。每一种loading动画都是通过CSS3的keyframes帧动画来完成的，每一个加载动画都构思新颖，效果非常的酷。安装可以通过bower来按钮这个loading动画特效：bowerinstallloaders.css使用方法使用这个loading加载动画特效的时候，建议将效果中所需要...
这是一款HTML5svg和CSS3炫酷火箭升空动画特效。该特效的火箭使用SVG来实现，并通过CSS3动画来实现火箭的动画特效。使用方法HTML结构CSS样式body{background-color:#1f2740;text-align:center;margin:20pxauto;}svg{margin:20px20px10px;width:300px;}a{colo...
1、CSS3/jQuery实现移动端滑动图片层叠效果这是一款基于jQuery和CSS3的图片层叠插件，这和我们之前介绍的CSS3图片层叠展开特效有点不同，它支持鼠标滑动切换图片，同时如果在移动端运行的话，也支持触屏滑动来切换图片。这款jQuery图片应用非常适合在手机上使用，效果还不错。2、HTML5/CSS3图片网格动画特效HTML5技术可以让网页上的图片变得非常神奇，各种各样的HTML5图...
最近一直在研究HTML5的动画表现，特别是在移动设备上的呈现。今天就为大家分享一个用HTML5+CSS3制作的城市场景动画，动画包含了白天到夜晚的渐变动画以及太阳、云朵、气球等动画效果;除此之外，页面的视觉效果采用了插画的设计风格，希望大家会喜欢。一、HTML结构这个示例中的HTML结构采用了HTML5的语言来编写，代码将更加的简洁、结构更加清晰易懂。从下面的代码可以看出示例中的每个元素是独立...
本文我们分享用css3的animation画一个太阳系恒星公转的动画，如何实现画椭圆的运行轨迹，最后结合css3的clip-path做一些比较特别的动画。模拟太阳系行情公转动画最终的效果图如下：css3的animation是通过关键帧的形式做出来的，首先设定一个动画的运行时间，然后在这个时间轴上的若干位置处插入关键帧，浏览器根据关键帧设定的内容做过渡动画。animation一般结合transf...
较旧版本的IE浏览器经常需要一些额外的CSS才能显示您的网页。条件注释是添加此CSS的最佳方法。因为，该系统是针对此用例进行了明确设计的。我们可以使用条件注释(Hack)设置css样式只作用于IE。条件注释只能在IE下使用，因此我们可以通过条件注释来为IE添加特别的指令。通俗点，条件注释就是一些if判断，但这些判断不是在脚本里执行的，而是直接在html代码里执行的，比如：1，条件注释的基本结构...