作者归档:sxwgf

HTML a 标签,HTML超链接标签

本HTML教程将详细介绍HTML中的超链接标签<a>,<a>标签的作用是引导用户从一张页面链接到另一张页面,互联网说到底就是一张张网页通过超链接<a>互相关联起来的。

<a>标签如何使用

一般用法如下:

<a href="http://www.html5tricks.com" target="_blank">html5tricks</a>

这里的href是<a>标签的一个非常重要的属性,它标识着需要连接的页面地址。

HTML 4.01 与 HTML5 之间的差异

在 HTML 4.01 中,<a> 标签可以是超链接或锚。在 HTML5 中,<a> 标签始终是超链接,但是如果未设置 href 属性,则只是超链接的占位符。

HTML5 提供了一些新属性,同时不再支持一些 HTML 4.01 属性。

<a>标签属性

属性

描述

charset
char_encoding
HTML5 中不支持。规定被链接文档的字符集[......]

阅读全文>>

10款很酷的HTML5动画和实用的HTML5应用

五一假期结束,码农们又回到了正常的工作岗位上了,小编也未各位整理了10款很酷的HTML5动画和实用的HTML5应用,希望大家能够喜欢。

1、HTML5 Canvas花朵生成器 可生成多种样式的花朵

HTML5非常流行,利用HTML5制作动画也非常方便,今天要分享一款利用HTML5 Canvas制作的花朵生成器,我们只需要在Canvas画布上点击鼠标,即可动态生成各种颜色样式的花朵,并且每一朵花都可以缓慢地旋转,非常炫酷。

html5-canvas-create-flower

在线演示        源码下载

2、HTML5/CSS3仿Google Play垂直菜单

之前我们分享过几款相当不错的CSS3垂直菜单,比如清新小图标的HTML5/CSS3侧边栏菜单CSS3侧边栏菜单 带可爱的小图标菜单等。今天介绍的一款CSS3菜单也是垂直菜单,是一款仿Google Play的垂直菜单,另外菜单左侧还有非常漂亮的小图标。

css3-google-play-store-menu

在线演示        源码下载

3、CSS3 3D按钮 按钮有漂亮的边线

今天要分享的这款CSS3按钮效果非常不错,是一款3D的按钮特效,当按钮按下时,按钮便会凹陷下去,效果和之前分享的[......]

阅读全文>>

纯CSS3实现齿轮Loading加载动画

还记得当时分享的一款齿轮动画吗,一起来看看:HTML5物理实验 CSS3模拟齿轮转动,的确非常华丽。这次我们要分享一款纯CSS3实现的齿轮动画,这款齿轮动画可以用来做Loading动画,和其他的Loading动画相比,这个齿轮效果也还可以。

pure-css3-gear-animation

在线演示源码下载

HTML5 3D球体斑点运动动画

这是一个很酷的HTML5 3D动画效果,是一个小球,小球表面出现跳动的斑点,斑点跳动时形成各种各样的形状,其实这款动画并不是正宗的HTML5 3D动画,而是利用这些小斑点组合的各种形状造成的3D视觉效果。

html5-psychospher-ball

在线演示源码下载

纯CSS3/HTML5实现3D波浪形动画

今天我们又要来分享一款实现简单的纯CSS3 3D动画效果,这款HTML5/CSS3动画是一个3D波浪形动画特效。利用一堆div加上CSS3对每个div的控制,实现波浪起伏的动画效果。这和之前分享的HTML5/CSS3 3D木块旋转动画的实现方式类似,大家可以参考一下css源代码。

html5-css3-wavy-3d-effect

在线演示源码下载

CSS3环形分享按钮动画

分享按钮我们应该很熟悉了,在html5tricks上也分享过很多,像纯CSS3社会化分享按钮 可固定网页顶部CSS3发光社会分享按钮 超酷CSS3按钮组合都非常不错。今天要分享的这款CSS3分享按钮外观比较特别,是环形的按钮,鼠标滑过时即可将环形展开,动画效果还不错。

css3-circle-share-button

在线演示源码下载

CSS3 Columns:比table更好用的分列式布局方法

CSS里一直有一个让我们头疼的问题,就是创建布局很麻烦。当然,有很多方式,有很多技术都可以创建各种布局,但我们总觉得CSS里应该提供一些新属性,让我们能更好的管理布局。幸运的是,CSS3里提供了一批新的创建列式布局的column属性,有了这些属性,我们不需要再使用float,clear,margin等属性进行调控,避免了很多麻烦。

CSS代码

CSS3里的column系列属性提供了各种不同的功能,通过组合使用它们,你能得到相应的任何分栏式布局:

  • column-count: 列数目
  • column-gap: 各列之间间隙宽度
  • column-width: 建议宽度;未必会使用,浏览器基于此数值进行计算
  • column-rule-width:列之间分割线宽度
  • column-rule-style:列之间分割线风格
  • column-rule-color:列之间分割线演示
  • column-span: 允许一个元素的宽度跨越多列
  • column-fill: 分列方式

要想制作出一个漂亮的分列布局,你至少需要用到column-countcolumn-gap

/[......]

阅读全文>>

CSS3文字阴影效果 阴影角度可随鼠标变化

之前我们有分享过一款很酷的CSS3文字阴影插件HTML5/CSS3文字投影特效 乳白阴影文字效果,今天要分享的也是CSS3文字阴影效果,不同的是今天这款CSS3文字阴影的角度可以随着鼠标的移动而发生变化,即阴影可动态调整,非常实用。

css3-text-shadow-animation

在线演示源码下载

JS实现HTML5 Canvas图像数据和图片的互相转化

这篇文章了我将介绍一下如何将一张图片拷贝到canvas里,以及反过来,如何将画布内容保存成图片格式。

使用JavaScript将图片拷贝进画布

要想将图片放入画布里,我们使用canvas元素的drawImage方法:

// Converts image to canvas; returns new canvas element
function convertImageToCanvas(image) {
	var canvas = document.createElement("canvas");
	canvas.width = image.width;
	canvas.height = image.height;
	canvas.getContext("2d").drawImage(image, 0, 0);

	return canvas;
}

这里的0, 0参数画布上的坐标点,图片将会拷贝到这个地方。

用JavaScript将画布保持成图片格式

如果你的画布上的作品已经完成,你可以用下面简单的方法将canvas数据转换成图片格式:

// Conver[......]

阅读全文>>

基于Bootstrap的CSS3下拉菜单 菜单3D立体效果

Bootstrap是Twitter推出的一个用于前端开发的开源工具包,基于Bootstrap框架,我们可以方便地制作漂亮的UI界面。今天要分享的这款CSS3下拉菜单就是基于Bootstrap的,下拉子菜单的外观也非常不错,同时菜单也具有3D立体的视觉效果。

css3-bootstrap-dropdown-menu

在线演示源码下载

下面我们一起来看看实现这款CSS3 3D菜单的过程和源码,代码主要由HTML、CSS和jQuery组成。

HTML代码:

<nav class="navbar navbar-inverse" role="navigation"><div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-ta[......]

阅读全文>>