前端实现div框边角的钝化虽然简单，但是有时候突然想不到，特此写下几句实现方法，以便记忆。 实现div框四个角都钝角的操作：设置 div ： border-radius=10px; 实现div框一个角的钝角效果 ：设置div :border-top-left-radius=10px; border-top-right-radius=10px; border-bottom-left-radius=10px; bor...
一、网页换肤<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>网页换肤</title><script type="text/javascript">//检查浏览器是否支持localStorageif(typeof localStorage===‘undefined‘){window.alert("not support localStorage"); }else{window.alert("support localStorage");var storage = localStorage;//设置DIV背景颜色为红色，并保存localStoragefunction redSet(){var value = "red";document.getElemen...
页面的自动滚动效果，可由javascript来实现，但是今天无意中发现了一个html标签 - <marquee></marquee>可以实现多种滚动效果，无需js控制。使用marquee标记不仅可以移动文字，也可以移动图片，表格等.语法：<marquee>...</marquee>； 说明：在标记之间添加要进行滚动的内容。重要属性：1.滚动方向direction（包括4个值：up、 down、 left和 right） 语法：<marquee direction="滚动方向">...</marquee>2.滚动方式behavior（scro...
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Test</title><script src="jquery.1.11.0.min.js"></script><script type="text/javascript">$(function () {settime_show();$(‘#btn‘).click(function () {});});function settime_show() {setTimeout(show, 2000);}function show() {$(‘.bg‘).show();$(‘.show‘).fadeIn(‘slow‘)//$(‘.show‘).show(‘slow‘); setTimeout(hide, 4000);//$(‘.show...
HTML代码： <div id="baymax"><!-- 头部 --><div id="head"><div id="eye"></div><div id="eye2"></div><div id="mouth"></div></div><!-- 躯干 --><div id="torso"><div id="heart"></div></div><!--腹部 --><div id="belly"><div id="cover"></div></div><!-- 手臂 --><div id="left-arm"><div id="l-bigfinger"></div><div id="l-smallfinger"></div></div><div id="right-arm"><div id="r-bigfinger"></div><div id="r-smallf...
刮刮卡需求： 每一位用户有三次刮刮卡的机会本次刮刮卡的结果会覆盖上次的结果刮刮卡的中奖几率呈现为递增的曲线（保证三次中必须有一次中奖）刮出的结果包含按钮既（领取奖品 or 再来一次 ）分享活动奖品升级（这里主要是微信分享的回调了）我们自己的需求，今天就说怎么制作刮刮卡，有这样需求的可以找我要源码 第一、body创建Canvas <div class="info" id="prize"><span id="prompt"></span><span class="btn" id="ok">领取奖品...
先看看效果，把鼠标移上去看看。backfront 1. 本实例需要以下元素： a. 外容器 box b. 内容器 border c. 默认显示内容 front d. 滑动内容 back2. 外容器BOX的Height为200px，Width为200px；1.box1{
2 position: relative;
3 top: 100px;
4 left: 100px;
5 width: 200px;
6 height: 200px;
7 border: 1px solid #ccc;
8 overflow: hidden;
9 }3. 内容器BORDER的Height为200%，Width为100%，Top为-100%； 1.bord...
<canvas id=‘test01‘></canvas><script>
function draw25(id) {var canvas = document.getElementById(id);if (canvas == null)return false;var context = canvas.getContext(‘2d‘);var g1 = context.createLinearGradient(0, 0, 0, 300);g1.addColorStop(0, ‘rgb(255,0,0)‘); //红 g1.addColorStop(0.5, ‘rgb(0,255,0)‘);//绿g1.addColorStop(1, ‘rgb(0,0,255)‘); //蓝//可以把lg对象理解成GDI中线性brushcontext.fil...
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>HTML5-页面切换动画</title> 6<link href="animations.css" rel="stylesheet"> 7<script src="modernizr.custom.js"></script> 8<script src="jquery-1.8.0.min.js"></script> 9<style> 10 #viewsWrapper { 11 top:0px; 12 left:0px; 13 width:300px; 14 height:200px; 15 position:relative; 16 overflo...
本篇博客实现一个HTML与CSS简单页面效果实例index.html 1 <!DOCTYPE html>2 <html>3 <head>4 <meta charset="UTF-8">5 <title>Insert title here</title>6 <link href="style.css" rel="stylesheet" type="text/css">7 </head>8 <body>9 <div class="container">
10 <div class="wrapper">
11 <div class="heading">
12 <div class="heading_nav">
13 <div class="head...
在线演示本地下载使用HTML5画布2D来模拟3D的空间效果，生成舰队飞行效果，了解如何开发，请阅读下面代码相关“轻视频”：HTML5画布模拟生成3D的舰队飞行效果原文：http://www.cnblogs.com/gbin1/p/4071168.html
要过年了，过年想到的就是放烟火啦。。。。于是就用canvas写了个放烟火的效果，鼠标点击也会产生烟火，不过不要产生太多烟火哦，一个烟火散出的粒子是30到200个之间，当页面上的粒子数量达到一定的时候，页面就会很卡咯，我也没特意去优化神马的。以后有空再说吧。 直接上DEMO吧：放烟火 原理很简单。。。就写一个烟火类以及碎屑类，实例化后让它飞起来，然后到达某个点后，把这个烟火对象的dead属性置为true，然后再实例化...
前言 数据蕴藏价值，但数据的价值需要用 IT 技术去发现、探索，可视化可以帮助人更好的去分析数据，信息的质量很大程度上依赖于其呈现方式。在数据分析上，热力图无疑是一种很好的方式。在很多行业中都有着广泛的应用。最近刚好项目中需要用到3D 热力图的效果展示。网上搜了相关资料，发现大多数是2D 效果或者伪3D 的，而 3D 粒子效果对于性能上的体验不是很好，于是取巧写了个3D 热力图的效果 。Demo : http://www.hightopo.com/...
今天，带来的是使用HTML5中Canvas标签实现的动态时钟效果。 话不多说，先看效果：http://webfront.verynet.cc/pc/canvas-clock.html 众所周知，Canvas标签是HTML5中的灵魂，HTML5 Canvas是屏幕上的一个由JavaScript控制的即时模式位图区域。即时模式是指在画布上呈现像素的方式， HTML5 Canvas通过JavaScript调用CanvasAPI，在每一帧完全重绘屏幕上的位图。详细将在下面代码进行说明。 HTML结构代码：1<canvas id="c...
分享一款布料效果的 HTML5 Canvas 应用演示，效果逼真。你会看到，借助 Canvas 的强大绘图和动画功能，只需很少的代码就能实现让您屏息凝神的效果。在线预览 源码下载实现的代码。html代码：<canvas id="c"></canvas><div id="info"><p><br>- 使用鼠标可以拉扯<br><br>- 右键可以切断布料<br><br></p></div><script type="text/javascript">document.getElementById(‘close‘).onmousedown =function (e) {e.preventDefault();d...
长阴影其实就是扩展了对象的投影，感觉是一种光线照射下的影子，通常采用角度为 45 度的投影，给对象添加了一份立体感。长阴影（Long Shadow）概念来自于最新非常流行的扁平化设计（Flat Design）。扁平化设计趋势影响最大的是用户界面元素和图标，但它也开始蔓延到其他网页设计的其他部分。