css技巧
关注
分享
扫一扫
文章平均质量分 59
Albert_Tiger
学而不思则罔，思而不学则殆。
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
优秀网站2
react-router https://lishaoy.net/ 闹钟 webstrom激活 vchart 3d特效 魔方 video.js https://www.cnblogs.com/saysmy/p/6429835.html h5视频 https://blog.csdn.net/happylee6688/article/details/34436011 https:...原创 2018-04-09 18:41:40 · 152 阅读 · 0 评论 -
优秀网站
8个前沿的 HTML5 & CSS3 效果 Web 开发中很实用的10个效果 https://www.createjs.com/ jquery插件 滚动插件 视频播放 https://www.cnblogs.com/huliang56/p/6257120.html http://www.jq22.com/jquery-info3353 视频进度条 ...原创 2018-04-09 16:52:34 · 342 阅读 · 0 评论 -
3d之移动的星空
<!DOCTYPE html><html><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <title>Par转载 2018-03-27 12:25:05 · 225 阅读 · 0 评论 -
3d效果之旋转的球形
引入以下js可直接运行。<script src="js/three.min.js"></script><script src="js/tween.min.js"></script><script src="js/CSS3DRenderer.js"></script>效果图原创 2018-03-09 11:36:27 · 6673 阅读 · 2 评论 -
3d效果之由近及远
了解代码需要一定的3d基础，读者可先阅读之前的基础文章。效果并不完善，但主要内容已具备。效果图：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content原创 2018-03-09 11:31:28 · 672 阅读 · 0 评论 -
3D绘图
1.WebGL & Three.js1. WebGL是一个底层的标准，在这些标准被定义之后，Chrome、Firefox之类的浏览器实现了这些标准。2. Three.js封装了底层的图形接口，使得程序员能够在无需掌握繁冗的图形学知识的情况下，也能用简单的代码实现三维场景的渲染。这里写链接内容2.正交投影vs透视投影正交投影: 对于在三维空间内平行的线，投影到二维空间中也一定是平行的。对于制图、原创 2017-11-30 20:11:58 · 560 阅读 · 0 评论 -
two.js画地球自转
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> svg,canvas{ backgro原创 2018-04-13 14:33:10 · 761 阅读 · 0 评论 -
canvas学习小结
5.H5新特性——Canvas绘图技术 Canvas：画布，是H5提供的2D绘图技术。 您的浏览器不支持Canvas标签！ CANVAS标签在浏览器中默认是300*150的inline-block。画布的宽和高只能使用HTML/JS属性来赋值，不能使用CSS样式赋值！ 每个画布上有且只有一个“画笔”对象——称为“绘图上下文”对象——使用该...原创 2018-04-13 12:52:03 · 467 阅读 · 1 评论 -
canvas位置判断
效果图 功能点1.百分比字幕在屏幕中间2.百分比和圆环动态展示，互相关联3.鼠标移入圆环时，图标变成手；移出恢复4.鼠标移入圆环是点击，百分比暂停&开始动态切换5.鼠标在圆环外无点击效果6.鼠标在canvas内时动态显示位置不足：鼠标点击控制圆环播放时，第一帧总是从头开始绘制，有闪烁的效果。 代码如下：<!doctype html&g...原创 2018-04-13 11:51:16 · 2093 阅读 · 0 评论 -
手机端绘图板制作
实现套路：利用canvas的api,绘制图片，将canvas图片转成base64 保存在后台。后台将base64转换为png格式。前端请求就可看到显示的图片了。 效果图1： 效果图2：所需图片：//html 代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8...原创 2018-03-09 16:52:26 · 614 阅读 · 0 评论 -
网页布局
布局方式 静态布局：网页上所有元素尺寸使用px为单位。 流式布局：屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。 自适应布局：自适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围 响应式布局：媒体查询+流式布局 弹性布局 网页布局左边固定，右边自适应1.左边左浮动，右边加个margin-le...原创 2018-08-04 14:25:02 · 187 阅读 · 0 评论 -
模拟qq对话框
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-原创 2018-06-08 16:28:18 · 969 阅读 · 0 评论 -
css翻页技巧
<!DOCTYPE html><html> <head> <meta charset="gb-2312"> <title></title> <style type="text/css"> *{原创 2018-06-08 16:27:03 · 433 阅读 · 0 评论 -
CSS 绘制loading图标
原理：利用animate动画和时间差绘制小原点。<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width原创 2018-02-26 10:15:08 · 502 阅读 · 0 评论 -
css绘制loading图标（1）
<!DOCTYPE html><html><head> <meta charset="utf-8"> <link rel="stylesheet" href="./CSS Only Loading Spinners_files/core.css"> <style&a转载 2018-02-26 10:40:32 · 603 阅读 · 0 评论 -
css实现loading图标（2）
效果一：<!doctype html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="renderer" content="webkit"> <link rel=&qu转载 2018-02-26 11:44:27 · 269 阅读 · 0 评论 -
CSS绘制天气
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-转载 2018-02-26 12:36:39 · 638 阅读 · 0 评论 -
CSS实现图片轮播
CSS3有个别特性,可以触发硬件GPU来加速渲染,而不是调用默认浏览器引擎渲染;但是很多属性,默认都是不开启硬件加速的;需要触发条件,一个最简单的触发条件就是使用3D属性(对Z轴的操作)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <tit转载 2018-02-26 12:45:03 · 974 阅读 · 0 评论 -
css绘制小图标集锦
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-原创 2018-02-26 12:57:43 · 572 阅读 · 0 评论 -
CSS画雷达
效果图：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, in原创 2018-02-27 16:35:57 · 403 阅读 · 0 评论 -
CSS雪碧图制作emoji表情包
效果图： 原理：利用雪碧图，来实现emoji表情包，减少图片请求数。 表情包转换为文字 & 文字转换为表情包 维护两个对象来实现。缺点：表情包大小由雪碧图中表情包大小控制，不能更改。htm代码<!doctype html><html lang="en"><head> <meta charset="UTF-8"...原创 2018-03-02 14:23:27 · 4535 阅读 · 0 评论 -
css flex制做从上往下的div
从上往下<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no,原创 2018-03-21 16:45:36 · 3337 阅读 · 0 评论 -
border-image使用
效果图开发时遇到要给内容新增一个图片边框，本来是可以用background的，但为了充分利用减少图片的大小，就采用了border-image的特性。 border-image可能小伙伴们用的比较少，下面我来讲讲他的一些特性。 属性：1.border-image-source:url(”) 图片的路径 2. border-image-slice 图片的裁切方式，...原创 2018-04-11 18:21:18 · 2835 阅读 · 0 评论 -
模拟抽奖
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><style> .box {原创 2018-06-08 16:15:10 · 774 阅读 · 0 评论 -
CSS实现Tab页切换
1.hover 移入其父元素.navI时，触发鼠标的hover态，给父元素添加样式为position:relative;z-index:1;。从而提升了层级z-index。在其子元素导航内容的层级比拼中，“子凭父贵”，父元素层级高的，其导航内容在重叠状态中显示在最上面style>body,p{margin: 0;}h2{margin: 0;font-size:100%;}ul{转载 2018-01-29 17:04:26 · 2725 阅读 · 0 评论