HTML5/CSS3/JavaScript
DecemberCafe
这个作者很懒,什么都没留下…
展开
-
SVG裁剪和平移的顺序
SVG 里为元素添加 clip-path 属性即可做出裁剪效果,添加 transfrom 属性可以平移、旋转元素。根据需求不同,有两种情况:先裁剪元素,再把裁剪后的图形平移先平移元素,再按区域裁剪图形先裁剪再平移在实际元素的位置添加clip-path属性,则是先裁剪。<defs> <clipPath id="myclip" clip-rule="evenodd"> <r原创 2016-11-05 21:29:34 · 1566 阅读 · 0 评论 -
SVG文档的注意事项
SVG 是 HTML5 关于描述矢量图的元素。可以写在<html> </html>中,也可以保存为一个单独的.svg文件。单独作为一个svg文件的时候,有一点规则需要注意。<svg width="640" height="480" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle cx="100" cy="100" r="50" fi原创 2016-11-05 21:23:55 · 1094 阅读 · 0 评论 -
Canvas 获取颜色值
Canvas 是 HTML5 的画布元素,按照像素绘制图像。有时需要用户点击鼠标的时候获取像素值。原创 2016-10-15 20:19:04 · 6754 阅读 · 0 评论 -
CSS3 里添加自定义字体
添加自定义字体是从 CSS3 开始的,下载到的字体可以在网页中使用。原创 2016-10-15 20:34:20 · 1649 阅读 · 0 评论 -
bxSlider 在网页里添加幻灯片效果
幻灯片效果在网页上很常见,本文介绍用 bxSlider 轻松实现的方法。原创 2016-10-15 20:39:44 · 1210 阅读 · 0 评论 -
Canvas旋转元素
Canvas是HTML5的画布元素,有时需要按指定角度旋转某一个元素。var canvas = document.getElementById("mycanvas");var ctx = canvas.getContext("2d");//x,y为旋转的圆心,theta为角度(弧度,范围0~2π)ctx.translate(x, y);ctx.rotate(theta);ctx.transl原创 2016-10-26 19:09:10 · 1704 阅读 · 0 评论 -
不让padding影响元素的宽度
CSS3 新增了 box-sizing 属性。 以前,如果指定 div 的宽度为div { width: 100px; height: 100px; padding: 10px; }则包含 padding,div 的实际宽度为 120px。 有时我们不希望 padding 影响到 div 的实际宽度。以前只能手动计算 width,从 CSS原创 2016-10-26 19:11:55 · 10934 阅读 · 0 评论