transform

JavaScript IE rotation transform maths

由 假装没事ソ 提交于 2020-01-05 02:37:41
问题 I am working on setting the rotation of an element with JavaScript, I know this is easy to achieve if you want to set to a 90 degree angle but this is not what I want. Because I want to set to strange angles such as 20 degrees I need to use the transform filter. I know the layout of this but I was wondering how I calculate the four values, at first I tried this. calSin = Math.sin(parseInt(css[c])); calCos = Math.cos(parseInt(css[c])); element.style.filter = 'progid:DXImageTransform.Microsoft

简单的CSS3 Loading动画

由 Deadly 提交于 2020-01-05 02:34:56
　　最终效果如图一，gif图片稍微有点卡顿，事实上代码在浏览器里执行得很流畅。这里面用到的css3技术非常简单，分别是border-radius、伪元素、css3关键帧以及animation动画。 　　首先整理一下大概的思路：整个圆分为AB两部分，左右都是半圆，上面盖了一个背景色为白色的小圆，如右图，简单布局如下： 　　 <style> .loading{margin:100px auto; width: 8em; height: 8em; position: relative;} .loading .progress{position: absolute; width: 6em; height:6em; background-color: white; border-radius: 50%; left: 1em; top: 1em; line-height: 6em; text-align: center; } .left,.right{width: 4em;height: 8em;overflow: hidden; position: relative; float: left;} .left{ border-radius: 8em 0 0 8em;} .right{ border-radius: 0 8em 8em 0;} .left:after,.right:after

css3动画-加载中...

由 删除回忆录丶 提交于 2020-01-05 02:29:51
写几个简单的加载中动画吧。 像前面三种都是相当于几个不同的点轮流来播放同一动画：变大变小。css3里面有一个用于尺度变换的方法： scale( x , y ) ： 定义 2D 缩放转换，改变元素的宽度和高度 。 第四种就是一个小球从上往下跌落，再弹回去，在上面的时候速度最小，下面的时候速度最大。由于该小球只进行了上下的移动，所以我们可以运用： translateY( n )：定义 2D 转换，沿着 Y 轴移动元素， 从而实现小球沿Y方向来回移动。 废话不多说了，上代码。 首先，第一个加载中的动画： 1 <div id="loading1"> 2 <div class="demo1"></div> 3 <div class="demo1"></div> 4 <div class="demo1"></div> 5 <div class="demo1"></div> 6 <div class="demo1"></div> 7 </div> html Code 1 .demo1 { 2 width: 4px; 3 height: 4px; 4 border-radius: 2px; 5 background: #68b2ce; 6 float: left; 7 margin: 0 3px; 8 animation: demo1 linear 1s infinite; 9 -webkit

VSCode snippet transform to determine the containing directory

由 微笑、不失礼 提交于 2020-01-04 13:59:11
问题 I've been unable to determine the transform to use to grab the directory that a new file is in from the TM_DIRECTORY that VSCode exposes? i.e. For a path like c:\a\b\c\d\e I would like to get e as the output. I also have linux co-works so it should also work for something like /mnt/a/b/c/d/e 回答1: Try this snippet: "stripLastDirectory": { "prefix": "lsd", "body": [ "${TM_DIRECTORY/.*[\\\\|\\/]+(.*)/$1/}" ], }, I am unable to test that on Linux but it should work on all OS's. 来源： https:/

text-transform大小写

由 一个人想着一个人 提交于 2020-01-04 09:32:37
用于将元素中的字母全 都变成大写或小写。 – 大写：text-transform:uppercase – 小写：text-tansform:lowercase – 首字母大写：text-transform:capitalize – 正常：text-transform:none 来源： CSDN 作者： 无悟饭空 链接： https://blog.csdn.net/weixin_43269800/article/details/103805265

盒子端 CSS 动画性能提升研究

由 最后都变了- 提交于 2020-01-04 03:37:30
不同于传统的 PC Web 或者是移动 WEB，在腾讯视频客厅盒子端，接大屏显示器（电视）下，许多能流畅运行于 PC 端、移动端的 Web 动画，受限于硬件水平，在盒子端的表现的往往不尽如人意。 基于此，对于 Web 动画的性能问题，仅仅停留在感觉已经优化的OK之上，是不够的，想要在盒子端跑出高性能接近 60 FPS 的流畅动画，就必须要刨根问底，深挖每一处可以提升的方法。 流畅动画的标准 理论上说，FPS 越高，动画会越流畅，目前大多数设备的屏幕刷新率为 60 次/秒，所以通常来讲 FPS 为 60frame/s 时动画效果最好，也就是每帧的消耗时间为 16.67ms。 直观感受，不同帧率的体验 帧率能够达到 50 ～ 60 FPS 的动画将会相当流畅，让人倍感舒适； 帧率在 30 ～ 50 FPS 之间的动画，因各人敏感程度不同，舒适度因人而异； 帧率在 30 FPS 以下的动画，让人感觉到明显的卡顿和不适感； 帧率波动很大的动画，亦会使人感觉到卡顿。 盒子端动画优化 在腾讯视频客厅盒子端，Web 动画未进行优化之前，一些复杂动画的帧率仅有 10 ~ 30 FPS，卡顿感非常明显，带来很不好的用户体验。 而进行优化之后，能将 10 ~ 30 FPS的动画优化至 30 ~ 60 FPS，虽然不算优化到最完美，但是当前盒子硬件的条件下，已经算是非常大的进步。 盒子端 Web

Transform a Generic Array Efficiently Using Guava

由 给你一囗甜甜゛ 提交于 2020-01-03 17:59:50
问题 I'm working with Java 7 , and I'm searching in the Guava API for a way to apply a function to an array without having to convert it to a Collection first. I'm willing to create my own class for such purpose, but I don't want to reinvent the wheel hehe. So as a summary (in case you don't know exactly what I'm talking about), this is what I've found so far that you can do with Guava in order to apply a function to an array as I said: Integer[] someNumbers = new Integer[]{1, 2, 3}; Integer[]

CSS3制作各种形状图像

由 心不动则不痛 提交于 2020-01-03 16:26:03
圆形-椭圆形-三角形-倒三角形=左三角形-右三角形-菱形-平行四边形- 星形-六角星形-五边形-六边形-八角形-心形-蛋形-无穷符号-消息提示框 不废话直接 html界面（亲测的） ------转自百度经验 http://jingyan.baidu.com/article/e52e36154226ef40c70c5148.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css3画图形</title> <style media="screen"> div{ text-align: center; display: inline-block; margin-left: 20px; } #circle {/*圆形在设置CSS时要设置宽度和高度相等，然后设置border-radius属性为宽度或高度的一半即可：*/ width: 120px; height: 120px; background: #7fee1d; -moz-border-radius: 60px; -webkit-border-radius: 60px; border-radius: 60px; } /*设置椭圆形的CSS时，高度要设置为宽度的一半，border-radius属性也要做相应的改变：*/ #oval { width: 200px

纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）

由 ぃ、小莉子 提交于 2020-01-03 16:21:22
1、正方形 代码如下: #square { width: 100px; height: 100px; background: red; } 2、长方形 CSS代码如下： #rectangle { width: 200px; height: 100px; background: red; } 3、圆形 代码如下: #circle { width: 100px; height: 100px; background: red; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; } 4、椭圆 代码如下: #oval { width: 200px; height: 100px; background: red; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px; } 5、上三角 代码如下: #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom:

How to implement the Hough Transform?

由 為{幸葍}努か 提交于 2020-01-03 12:58:51
问题 How does one implement a Hough transform on a text image? I'm looking for pseudo-code (eventually this will be in java). Here is some background information: Given an image, determine the equation for a line y = mx + b . Typically the Hough Transform is represented in polar co-ordinates such that Rho = y*sin(theta) + x*cos(theta) . (I'm not really sure what the X and Y values correspond to back to the image). we are only interested in the Rho and theta values and plot them. The locations with
订阅 transform