动画

CSS是我们常用的控制网页样式和布局的一种标准。 CSS3是最新的CSS标准。 CSS3被拆分为“模块”，旧的规范也已经拆分为小的块，同时还增加了新的属性。 一些比较重要的CSS3的模块：选择器、盒模型、背景和边框、文字特效、2D/3D转换、动画等。 CSS3边框： 使用用CSS3，可以创建圆角边框，添加阴影框，并作为边界的形象而不使用画面设计程序，如Photoshop等软件。 CSS3 圆角 ：border-radius属性——创建边框线的圆角 示例： 值的类型可以是像素，也可以为百分比。 CSS3 盒子阴影 ：box-shadow属性——创建阴影 示例： 值有3个时，表示距离左侧、距离上侧、影子颜色 值有4个时，表示距离左侧、距离上侧、虚化的像素、影子颜色 值有5个时，表示距离左侧、距离上侧、虚化的像素、影子颜色、是否显示在内部并且将颜色进行反转 CSS3 边界图片 ：border-image属性——可以允许使用图片作为边框 示例： border-image属性在IE和QQ等浏览器中并不兼容 CSS3背景： 背景图片大小 ：background-size属性——可以规定背景图片的尺寸 示例： 两个值，分别表示宽度，高度。可用像素和百分比。 背景图片定位 ：background-origin属性——规定背景根据边框定位还是根据文本定位 示例： border-box：根据边框定位

Css3中的过渡属性：transition 　　　　注意事项: 　　　　　　　　1:时间要加单位 　　　　过度属性： 　　　　　　　　1：属性名称 transition-prorperty 　　　　　　　　2：时间：transition-duration 　　　　　　　　3：速度：traisition-timing-function 　　　　　　　　4：延迟：transition-delay C3里面的属性简写类似于background的简写 animation：动画 添加动画要写@keyframe前缀 　　　　动画属性： 　　　　　　　　动画名称 用于@keyframes anmiation-动画名称 　　　　　　　　动画完成的周期：animation-duration 　　　　　　　　规定动画的速度曲线：animation-timing-function 　　　　　　　　规定当动画不播放时，要应用到元素的样式：animation-fill-mode 　　　　　　　　规定动画何时开始：animation-delay 　　　　　　　　规定动画播放的次数：animation-iteration-count 　　　　　　　　规定动画是否在下一周期逆向的播放：animation-direcition 　　　　　　　　规定动画是否正在运行或暂停：animation-play-state

transform：2D变形： 通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。转换方法：translate()/rotate()/scale()/skew()/matrix() none 定义不进行转换。 translate(x,y) 定义 2D 平移转换。 translateX(x) 定义转换，只是用 X 轴的值。 translateY(y) 定义转换，只是用 Y 轴的值。 scale(x,y) 定义 2D 缩放转换。 scaleX(x) 通过设置 X 轴的值来定义缩放转换。 scaleY(y) 通过设置 Y 轴的值来定义缩放转换。 rotate(angle) 定义 2D 旋转，在参数中规定角度。 补充1.角度也可以使用弧度单位：rad skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。 kewX(angle) 定义沿着 X 轴的 2D 倾斜转换。 skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。 matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。 变形矩阵功能很强大，但是相对比较复杂，涉及到复杂的数学计算，在本章中暂不作详细讲解。 transform-origin:改变元素变形的基准点 像素/百分比 X轴：left/right/center Y轴：top/bottom

动画类型 Android 的 animation 由四种类型组成 XML 中 alpha 渐变透明度动画效果 scale 渐变尺寸伸缩动画效果 translate 画面转换位置移动动画效果 rotate 画面转移旋转动画效果 JavaCode 中 AlphaAnimation 渐变透明度动画效果 ScaleAnimation 渐变尺寸伸缩动画效果 TranslateAnimation 画面转换位置移动动画效果 RotateAnimation 画面转移旋转动画效果 Android 动画模式 Animation 主要有两种动画模式： 一种是 tweened animation( 渐变动画 ) XML 中 JavaCode alpha AlphaAnimation scale ScaleAnimation 一种是 frame by frame( 画面转换动画 ) XML中 JavaCode translate TranslateAnimation rotate RotateAnimation Android 动画解析 alpha xml 淡出效果 <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <alpha android

动画类型 Android 的 animation 由四种类型组成 XML 中 alpha 渐变透明度动画效果 scale 渐变尺寸伸缩动画效果 translate 画面转换位置移动动画效果 rotate 画面转移旋转动画效果 JavaCode 中 AlphaAnimation 渐变透明度动画效果 ScaleAnimation 渐变尺寸伸缩动画效果 TranslateAnimation 画面转换位置移动动画效果 RotateAnimation 画面转移旋转动画效果 Android 动画模式 Animation 主要有两种动画模式： 一种是 tweened animation( 渐变动画 ) XML 中 JavaCode alpha AlphaAnimation scale ScaleAnimation 一种是 frame by frame( 画面转换动画 ) XML中 JavaCode translate TranslateAnimation rotate RotateAnimation Android 动画解析 alpha xml 淡出效果 <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <alpha android

在 Android 中， Animation 动画效果的实现可以通过两种方式进行实现，一种是 tweened animation 渐变动画，另一种是 frame by frame animation 画面转换动画，接下来eoe进行讲解。 tweened animation 渐变动画有以下两种类型： 1.alpha 渐变透明度动画效果 2.scale 渐变尺寸伸缩动画效果 frame by frame animation 画面转换动画有以下两种类型： 1.translate 画面转换位置移动动画效果 2.rotate 画面转移旋转动画效果 在 res 文件夹下新建一个 anim 的文件夹，并在其中建立一个 animation.xml 文件，具体如下： <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:fromXDelta="0" // 设置动画开始时 x 坐标的位置 android:toXDelta="-100%p" // 设置动画结束时 x 坐标的位置 android:duration="300" // 设置动画持续的时间 300 毫秒 > </translate> <alpha

不同于传统的 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

本文介绍react相关的过渡动画效果的实现 有点类似vue的transition组件，主要用于组件mount和unmount之前切换时应用动画效果 安装 cnpm install react-transition-group --save transition动画 import React from 'react' import ReactDOM from 'react-dom' import Transition from 'react-transition-group/Transition'; const duration = 300; const defaultStyle = { transition: `opacity ${duration}ms ease-in-out`, opacity: 0, width: "100px", height: "100px", background: "red" } const transitionStyles = { entering: { opacity: 0 }, entered: { opacity: 1 }, }; class MyComponent extends React.Component { constructor() { super(); this.state = { in: false } }

huffman 网址 huffman 来源： CSDN 作者： 李！ 链接： https://blog.csdn.net/qq_22149613/article/details/103812028

01.【负边距】💘负边距的效果。注意左右负边距表现并不一致。左为负时，是左移，右为负时，是左拉。上下与左右类似 02.【shape-outside】❤不要自以为是了。你以为自己是方的，在别人眼里你却是圆的 03.【BFC应用】💓BFC应用之阻止外边距合并（margin collapsing） 04.【BFC应用】💔BFC应用之消除浮动的影响 05.【flex不为人知的特性之一】💕flex布局下margin:auto的神奇用法 06.【flex不为人知的特性之二】💖flex布局，当flex-grow之和小于1时，只能按比例分配部分剩余空间，而不是全部 07.【input的宽度】💗并不是给元素设置display:block就会自动填充父元素宽度。input 就是个例外，其默认宽度取决于size特性的值 08.【定位特性】💙绝对定位和固定定位时，同时设置 left 和 right 等同于隐式地设置宽度 09.【层叠上下文】💚层叠上下文：小辈就是小辈，再厉害也只是个小辈 10.【粘性定位】💛position:sticky，粘性定位要起作用，需要设置最后滞留位置。chrome有bug，firefox完美 11.【相邻兄弟选择器】💜相邻兄弟选择器之常用场景 12.【模态框】🖤要使模态框背景透明，用rgba是一种简单方式 13.【三角形】💝css绘制三角形的原理 14.【table布局