css3 画网格

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css画网格</title>
<link rel="stylesheet" href="http://wow.techbrood.com/css/normalize.css">
<style type="text/css">
body {
background-image:
linear-gradient(0deg, transparent 14px, rgba(204, 204, 204, .2) 14.5px, rgba(204, 204, 204, .2) 15px, transparent 15.1px, transparent 29px, rgba(204, 204, 204, .2) 29.5px, rgba(204, 204, 204, .2) 30px,transparent 30.1px, transparent 44px, rgba(204, 204, 204, .2) 44.5px, rgba(204, 204, 204, .2) 45px, transparent 45.1px, transparent 59px, rgba(204,204,204, .8) 60px),
linear-gradient(90deg, transparent 14px, rgba(204, 204, 204, .2) 14.5px, rgba(204, 204, 204, .2) 15px, transparent 15.1px, transparent 29px, rgba(204, 204, 204, .2) 29.5px, rgba(204, 204, 204, .2) 30px,transparent 30.1px, transparent 44px, rgba(204, 204, 204, .2) 44.5px, rgba(204, 204, 204, .2) 45px, transparent 45.1px, transparent 59px, rgba(204,204,204, .8) 60px);
background-size:60px 60px;
}
</style>
</head>
<body>

</body>
</html>

时间： 2024-10-09 00:28:58

css3 画网格的相关文章

3D Grid Effect – 使用 CSS3 制作网格动画效果

今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的??.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此创建了两个演示,分别演示垂直和水平旋转网格项. 温馨提示:为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safari 等现代浏览器中浏览. 您可能感兴趣的相关文章 创意无限!一组网页边栏过渡动画[附源码下载] 真是好东西!13种非常动感的页面加载动画效果 你见过吗?9款超炫的

css3画三角形的原理

以前用过css3画过下拉菜单里文字后面的“下拉三角符号”,类似于下面这张图片文字后面三角符号的效果 下面是一个很简单的向上的三角形代码 #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid blue; } 再给相应的div加上对应的class,一个如下的三角形就用css画好了

【二次元的CSS】—— 用 DIV + CSS3 画咸蛋超人（详解步骤）

[二次元的CSS]—— 用 DIV + CSS3 画咸蛋超人(详解步骤) 2016-05-17 HTML5cn 仅仅使用div作为身体的布局,用css3的各种transform和圆角属性来绘制各部位的形状,当然也不会使用任何图片哦.那就没意思了. 有的同学说,用canvas不是能画得更逼真而且更简单吗?这点我也非常赞同,但我的理由还是,那就没意思了. 这次写的详细一点,把各个部位都拆出来分析. 第一步:头部轮廓 <header></header> .ultraman header

如何使用CSS3画出一个叮当猫

刚学习了这个案例,然后觉得比较好玩,就练习了一下.然后发现其实也不难,如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易 的事,至少我是这么觉得.但是,用CSS3画出来确实是第一次接触,所以很乐意去尝试一下,对于我这种菜鸟,确实是帮助不少,至少懂得如何去画一个简单的 人物形象出来,再加上一些动画效果,就活了,那就更好玩了!OK,开始之前,先把效果图晒一下: PS:说实话,我觉得挺可爱的,小时候经常看多啦A梦,突然感觉很亲切,很童真,瞬间年轻了好多,哈哈!热烈的笑脸 首先,先把H

WinForm画网格并填充颜色

因为研究CodeCombat上的最后一题,自己尝试分解题目,然后想到需要画网格,还有最优化的方法 源代码如下 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; namespace D

css3实现网格背景,background-image，background-size

用纯css3实现网格背景,应该怎么做呢? 需要给容器设置background-image,background-size属性 .container{ background-image: linear-gradient(90deg, rgba(200, 0, 0, 0.15) 10%, rgba(0, 0, 0, 0) 10%), linear-gradient(rgba(200, 0, 0, 0.15) 10%, rgba(0, 0, 0, 0) 10%); background-size: 1

用css3画3d动画的思路

最近试了下CSS3动画,现在通过一个例子简单讲一讲我用css3画3d视图的思路. 任何时候敲代码前都要想清楚我要干什么,我要敲一个简单的3d旋转画册. 一. 1.首先用一个总容器包含所有的图片,设定属性perspective: 1000px,表示他距离我们屏幕1000px的距离,从二维变成了三维 2.要使用3d旋转,必先要有一个参考系使所有图片围绕他旋转,在总容器里面加一个div,添加属性transform-style: preserve-3d就可以变成参考系. 3.然后在这个div里设置动画效

【推荐】纯CSS3画出小黄人并实现动画效果

前言 前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的初衷是想体验一下用图片做动画的赶脚,但是找不到素材,才无奈用了最笨的方法来满足自己的需求,本想勉强能看就行了.可是呢,还是抵不住自己内心的完美,于是乎,用了一个晚上用CSS3画出了小黄人再实现类似的动画效果. 正题 OK,大家看一下下面两张图有什么不同: 当然,很多人会说,明显大小不同,嘴巴,头发也

css3画三角形

以下是用css3画3角形,效果如下图 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> span{ display:inline-block; margin-right:10px} .triangle_top{height:0;width:0; border:10px solid; bord