transform | 易学教程

GPU硬件加速原理 /转

阅读更多关于 GPU硬件加速原理 /转

现代浏览器大都可以利用GPU来加速页面渲染。每个人都痴迷于60桢每秒的顺滑动画。在GPU的众多特性之中，它可以存储一定数量的纹理（一个矩形的像素点集合）并且高效地操作这些纹理（比如进行特定的移动、缩放和旋转操作）。这些特性在实现一个流畅的动画时特别有用。浏览器不会在动画的每一帧都绘制一次，而是生成DOM元素的快照，并作为GPU纹理（也被叫做层）存储起来。之后浏览器只需要告诉GPU去转换指定的纹理来实现DOM元素的动画效果。这就叫做 GPU合成，也经常被称这种借助于显卡的优势改变渲染操作：通常被笼统的称为“硬件加速(hardware acceleration)”。 “注”：fps:帧/秒(frames per second)的缩写,也称为帧速率。是指1秒钟时间里刷新的图片的帧数 GPU（Graphic Processing Unit，图形处理器）。GPU是相对于CPU的一个概念，由于在现代的计算机中图形的处理变得越来越重要，需要一个专门的图形的核心处理器。在浏览器中用css开启硬件加速，使GPU发挥功能。CSS animations, transforms 以及 transitions 不会自动开启GPU加速，而是由浏览器的缓慢的软件渲染引擎来执行。那我们怎样才可以切换到GPU模式呢，很多浏览器提供了某些触发的CSS规则。现在，像Chrome, FireFox, Safari,

transform、transition 动画效果

阅读更多关于 transform、transition 动画效果

transform 转换，变形 origin 定义旋转基点（ left top center right bottom 坐标值） transform-origin: 50px 50px; transform-origin: left;。 rotate 旋转 transform:rotate(50deg) 旋转角度可以为负数，需要先定义origin。 skew 扭曲 transform:skew(50deg,50deg) 分别为相对x轴倾斜,相对y轴倾斜。 scale 缩放 transform:scale(2,3) 横向放大2倍，纵向放大3倍；transform:scale(2) 横竖都放大2倍。 translate 移动 transform:translate(50px, 50px) 分别为相对x轴移动,相对y轴移动。 Transition 平滑过渡 transition-property：变换的属性（ none(没有属性改变)、all(所有属性改变)、具体属性） transition-duration：变换持续时间 transition-timing-function：变换的速率（ ease:(逐渐变慢)、linear:(匀速)、ease-in:(加速)、ease-out:(减速)、ease-in-out:(加速然后减速)、cubic-bezier:(自定义时间曲线））

移动端边框1像素的问题

阅读更多关于移动端边框1像素的问题

前两天设计说我移动端为什么边框看起来像2px。我代码检查了大半天，是1px啊。仔细比对了很久，不得不承认，设计的眼睛比我的眼睛好太多太多了。造成这个的原因是手机分辨率的问题。原理都在代码里了。也不多说。下面这个代码重点是css的代码，html全部代码都贴了。less的代码就不分享了，我自己收藏着。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="initial-scale=1, width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1, user-scalable=no" media="(device-height: 568px)"> <meta name="renderer" content="webkit"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-touch

unity3d随机地牢生成代码

阅读更多关于 unity3d随机地牢生成代码

现在也是处于失业状态，碰巧看到个面试题是要用unity生成个随机地牢，就把做题过程中的思路和代码记录一下吧。做完了以后我又想了一下，发现其实根本不需要这么麻烦，果然demo里的代码对我的思路影响还是有点大。demo里的c++代码为了展示地牢的墙壁，在二维数组中加上了wall这个东西表示墙壁。事实上用unity来做的话，只需要考虑地板的位置，然后根据邻接的地板有没有东西来判断是否生成墙壁即可。 Demo 使用素材以及题目地址： http://pan.baidu.com/s/1c2l3RFE 密码：aseh 首先用一个枚举类型代表地牢迷宫中的各个元素： public enum Tile { Default, DirtFloor,// 房间地板 Wall_w,//上方的墙 Wall_s,//下方的墙 Wall_a,//左方的墙 Wall_d,//右方的墙 Corridor_ad,//横向走廊 Corridor_ws,//纵向走廊 Door,// 房门 UpStairs,// 入口 DownStairs// 出口 } 然后考虑使用二维数组来保存地牢元素的信息。既然是用unity来做，先不考虑随机地牢的逻辑数组要怎么生成，先把二维数组转化为实体的方法写出来：建立一个test脚本，用于测试生成用的creat_dungeon方法是否好用，并在里面定义一个测试用的二维数组： using

使用JQuery的动态罗盘时钟

阅读更多关于使用JQuery的动态罗盘时钟

感谢参考原文- http://bjbsair.com/2020-04-01/tech-info/18510.html 惯例，先来效果图 Index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>动态时钟</title> <meta > <script src="js/jquery-1.10.2.js"></script> <script src="js/test.js"></script> <script src="js/common.js"></script> <script src="js/config.js"></script> </head> <style> * { margin: 0; padding: 0; } body { background-attachment: fixed; color: #F5F4F6; font-size: 12px; font-weight: bold; overflow: hidden; width: 1000px; height: 900px; font-family: "微软雅黑"; } audio { position: absolute;

使用JQuery的动态罗盘时钟

阅读更多关于使用JQuery的动态罗盘时钟

web前端入门到实战：前端高手在CSS 开发效率的必备片段

阅读更多关于 web前端入门到实战：前端高手在CSS 开发效率的必备片段

这篇文章会记录我们平时常用到的 CSS 片段，使用这些 CSS 可以帮助我们解决许多实际项目问题中遇到的，墙裂建议点赞收藏再看，方便日后查找清除浮动浮动给我们的代码带来的麻烦，想必不需要多说，我们会用很多方式来避免这种麻烦，其中我觉得最方便也是兼容性最好的一种是，在同级目录下再创建一个<div></div>；不过这样会增加很多无用的代码。此时我们用:after这个伪元素来解决浮动的问题，如果当前层级有浮动元素，那么在其父级添加上 clearfix 类即可。 // 清除浮动 .clearfix:after { content: "\00A0"; display: block; visibility: hidden; width: 0; height: 0; clear: both; font-size: 0; line-height: 0; overflow: hidden; } .clearfix { zoom: 1; } 垂直水平居中在 css 的世界里水平居中比垂直居中来的简单一些，经过了多年的演化，依然没有好的方式来让元素垂直居中(各种方式各有优缺点，但都不能达到兼容性好，破坏力小的目标)，以下是几种常见的实现方式绝对定位方式且已知宽高专门建立的学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧

蚂蚁庄园

阅读更多关于蚂蚁庄园

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>chick</title> <style> html{min-width:320px;overflow-x:hidden} body,html{height:100%;line-height:1;-webkit-user-select:none;//禁止用户复制页面文本 -webkit-touch-callout:none;-webkit-overflow-scrolling:touch;//ios滚动效果 -webkit-font-smoothing:antialiased;//mac下字体 -webkit-tap-highlight-color:rgba(242,137,76,.05);://a标签点击高亮效果} article,aside,blockquote

CSS3动画

阅读更多关于 CSS3动画

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>CSS3动画</title> <style type="text/css"> div{ height: 50px; width: 50px; background: pink; /*调用动画*/ animation:animates 5s linear 1s 2; } /*创建关键帧*/ @keyframes animates{ 0%{ width: 0px; transform: translate(50px,0); } 25%{ width: 25px; height: 25px; transform: translate(150px,0) rotate(90deg); } 50%{ width: 50px; height: 50px; transform: translate(300px,0) rotate(180deg); } 75%{ width: 25px; height: 25px; transform: translate(150px,0) rotate(270deg); } 100%{ width: 50px; height: 50px; transform: translate(50px,0) rotate(360deg)

动画效果，过渡效果

阅读更多关于动画效果，过渡效果

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>网站首页</title> 6 <style> 7 .ttt{ 8 -webkit-animation:cc 15s ease-in 0 infinite alternate ; 9 -ms-animation:cc 15s ease-in 0 infinite alternate ; 10 } 11 @-ms-keyframes cc{ 12 0%{color:red;} 13 25%{color:green;} 14 50%{color:blue;} 15 75%{color:yellow;} 16 100%{color:purple;} 17 } 18 19 20 @-webkit-keyframes cc{ 21 0%{color:red;} 22 25%{color:green;} 23 50%{color:blue;} 24 75%{color:yellow;} 25 100%{color:purple;} 26 } 27 28 @-webkit-keyframes aa{ 29 from { color:red; } 30 to { color:green; } 31 } 32 </style> 33 </head> 34 35

订阅 transform