动画 | 易学教程

transition和animation

阅读更多关于 transition和animation

transiton .pic { &:hover { transform: rotate(45deg); //旋转45度 } transition: transform 1s ease-out; } animation animation基础和写法 ①动画名称（name）--@keyframes，与transition不同的是，animation需要自定义一个名称②过渡时间（duration）延迟时间（delay）③时间函数（timing-function）④播放次数（iteration-count）⑤播放方向（direction），即是否轮流播放和反向播放⑥停止播放的状态（fill-mode），⑦是否暂停（play-state） ⑤的属性值：alternate：先正向后反向；reverse：反向播放 .pic { &:hover { animation: move 2s linear infinite alternate forwards; } } @keyframes move { 100% { transform: translateX(200px);//水平偏移200px } } animation: move 2s linear infinite alternate forwards; //设置动画名称延迟时间动画函数（1）linear匀速运动（2

jQuery动画

阅读更多关于 jQuery动画

1. 基本效果 show([s,[e],[fn]]) 显示隐藏的匹配元素 hide([s,[e],[fn]]) 隐藏显示的元素 toggle([s],[e],[fn]) 如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的参数详解 speed : 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000) easing : (Optional) 用来指定切换效果，默认是"swing"，可用参数"linear" fn : 在动画完成时执行的函数，每个元素执行一次。 2. 滑动效果 slideDown([s],[e],[fn]) 通过高度变化（向下增大）来动态地显示所有匹配的元素 slideUp([s,[e],[fn]]) 通过高度变化（向上减小）来动态地隐藏所有匹配的元素 slideToggle([s],[e],[fn]) 通过高度变化来切换所有匹配元素的可见性 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>滚动播放</title> <style> body { background:#ccc; } #box { margin:100px auto; width: 1000px; height: 460px;

html基础巩固（3）动画

阅读更多关于 html基础巩固（3）动画

6.3 过渡与动画过渡就是让CSS属性在一段时间内平缓变化。平缓变化的效果比突然变化的效果更柔和、更自然。 6.3.1 过渡属性若希望修改某个CSS属性值时变化平缓，可使用CSS的transition-property属性，其值可以是一个或多个具体属性名，多个属性名之间用空格分隔。如果希望所有CSS属性的变化都是平缓变化，可设置transition-property属性值为all。但是，并不是所有属性都支持过渡效果。其中，支持过渡效果的属性有：颜色属性、取值为数字的属性、转换属性、阴影属性、渐变属性、visibility属性。实现过渡效果，不但要设置平缓变化的属性名，还要设置变化的持续时间，来控制变化速度。可使用transition-duration属性设置变化持续的时间。其值为一个带单位的数字。时间段的单位可以是秒（s）或毫秒（ms）。有了transition-property和transition-duration属性，就可以实现过渡效果了。例如，在5.7.4实验：实现电商网站商品列表中，当鼠标悬停在商品卡片上时，卡片变大。但是，如果是突然变大，则用户体验会较差。此时，就可让卡片的变大平缓过渡，让放大和阴影经过2s平缓变化，修改CSS代码如下：除了可以定义平缓变化的属性和持续时间外，还可定义另外两个属性：（1）transition-timing-function属性

微信小程序之自定义底部弹出框动画

阅读更多关于微信小程序之自定义底部弹出框动画

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 最近做小程序时，会经常用到各种弹框。直接做显示和隐藏虽然也能达到效果，但是体验性太差，也比较简单粗暴。想要美美地玩，添加点动画还是非常有必要的。下面做一个底部上滑的弹框。 wxml <view class="modals modals-bottom-dialog" hidden="{{hideModal}}"> <view class="modals-cancel" bindtap="hideModal"></view> <view class="bottom-dialog-body bottom-pos" animation="{{animationData}}"></view> </view> <button bindtap="showModal">点我</button> wxss /*模态框*/ .modals{position:fixed; z-index: 999; top:0; left: 0; right:0; bottom: 0;} .modals-cancel{position:absolute; z-index:1000; top:0; left: 0; right:0; bottom: 0; background-color: rgba(0,0,0,.5);} .bottom-dialog

关于开发仿微信程序时，出现的问题之一：打包入HBuilder的时候，安卓端异常的卡

阅读更多关于关于开发仿微信程序时，出现的问题之一：打包入HBuilder的时候，安卓端异常的卡

由于要求，绝对的仿微信，所以微信的一些动画效果就很令人头疼，我本来使用的是帧动画，并且打包进HBuilder的时候，安卓端会出现非常卡顿的问题。我查了很多资料，说的一些开启一些什么硬件加速根本没有卵用。。。。接着我调用了UI库的一个动画效果，发现在手机上一点都不卡，我就懵逼了，抓紧扒开UI动画的源代码看了一下，才发现，特么的HBuilder打包后的动画仅支持过渡动画，，，HBuilder官方文档也没说妈的被搞的头痛死，，，问了好多人，都说最好用原生动画，，，难道帧动画就不算原生动画嘛。。。。。踩坑了，遇到过同样的问题的可以借鉴一下我，上面这些都不算什么，不就把帧动画改成过渡动画嘛，行，我改。。。。重头戏来了。。。。我写的组件的时候，是将聊天展示作为一个模块，发送信息作为另一个模块，要改过渡动画的话，我就只能将这两个dom单独提出来，。。。。。这特么不就是相当于重构？？？？牛逼了，，，，我花了三天时间将东西都重构了一遍，终于不卡了。。。。来源： https://www.cnblogs.com/hyar/p/12102139.html

模拟《意尔康》网站加载动画效果

阅读更多关于模拟《意尔康》网站加载动画效果

效果（纯css实现）：根本原理： css:animation: loader-fill 1s steps(19) forwards; html： <script src="http://yearcon-cn-asset-1.oss-cn-shanghai.aliyuncs.com/vendors/jquery/jq-1.11.2.min.js"></script> <script src="http://yearcon-cn-asset-1.oss-cn-shanghai.aliyuncs.com/vendors/jquery-cacheimage/jquery.cacheimage.js"></script> <div class="loader-wrapper fullscreen-extra" style="margin-top:50px; width: 1647px; min-height: 350px; "> <div class="abs loader valign-middle-by-top animate" style="background-image: url("http://yearcon-cn-asset-1.oss-cn-shanghai.aliyuncs.com/images/common/loader-sprite.png"); margin-top

C# WinForm窗体显示动画效果

阅读更多关于 C# WinForm窗体显示动画效果

/// <summary> /// 窗体动画函数（API声明） /// </summary> /// <param name="hwnd">指定产生动画的窗口的句柄</param> /// <param name="dwTime">指定动画持续的时间</param> /// <param name="dwFlags">指定动画类型，可以是一个或多个标志的组合。</param> /// <returns></returns> [DllImport("user32")] private static extern bool AnimateWindow(IntPtr hwnd, int dwTime, int dwFlags); //下面是可用的常量，根据不同的动画效果声明自己需要的 private const int AW_HOR_POSITIVE = 0x0001;//自左向右显示窗口，该标志可以在滚动动画和滑动动画中使用。使用AW_CENTER标志时忽略该标志 private const int AW_HOR_NEGATIVE = 0x0002;//自右向左显示窗口，该标志可以在滚动动画和滑动动画中使用。使用AW_CENTER标志时忽略该标志 private const int AW_VER_POSITIVE = 0x0004;//自顶向下显示窗口

js链式动画小例子

阅读更多关于 js链式动画小例子

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>链式动画</title> <style> * { margin: 0; padding: 0; } #odiv { width: 100px; height: 100px; background: pink; opacity: 0.5; } </style> </head> <body> <div id="odiv"> </div> <script type="text/javascript"> var odiv = document.getElementById("odiv"); //第三种 //执行动画的对象，目标值，动画的属性，下一个动画 odiv.onmouseover=function(){ starMove(odiv,500,'width',function(){ starMove(odiv,200,'height',function(){ starMove(odiv,100,'opacity',function(){ console.log("结束") }) }) }) }; odiv.onmouseout=function(){ starMove(odiv,50,'opacity',function(){ starMove(odiv,100,

前端动画

阅读更多关于前端动画

Css动画 Css动画，可以在许多网页中取代动画图片、Flash动画或者JavaScript。那么在css3中创建动画，就需要用到@keyframes规则了。在 @keyframes 中创建动画时，把它捆绑到某个选择器，否则不会产生动画效果。而且必须定义动画的名称和时长。在时间方面要用百分比来规定，或用关键词 "from" 和 "to"，等同于 0% 和 100%；0%是动画的开始，100%是动画的完成。然后再在@keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果啦！。那下面就给大家介绍一下所有的动画属性： animation :所有动画属性的简写属性 animation-name :规定@keyframes动画的名称 animation-duration :动画完成一个周期所花费的秒或毫秒。默认是0 animation-timing-function :动画的速度曲线，默认是”ease”(ease由快到慢, linear恒速, ease-in加速[渐显], ease-out减速[渐隐], ease-in-out先加速后减速) animation-delay :动画何时开始，默认0 animation-iteration-count ：规定动画被播放的次数。默认是 1（interation反复，infinite无限） animation

[UWP]使用CompositionLinearGradientBrush实现渐变画笔并制作动画

阅读更多关于 [UWP]使用CompositionLinearGradientBrush实现渐变画笔并制作动画

1. 什么是 CompositionBrush CompositionBrush(合成画笔)是操作可视化层时用于绘制 SpriteVisual 区域的画笔。使UWP 应用时可以选择使用 XAML 画笔或 CompositionBrush(合成画笔) 绘制 UIElement。很多时候XAML画笔和合成画笔都能实现同样的效果，在官方文档使用 XAML 画笔 vs。CompositionBrush 这一节中有详细的对比介绍。 CompositionBrush性能更好且能做更复杂的动画。XAML Brush的能力是有极限的，我从短暂的UWP生涯当中学到一件事，XAML Brush越是玩弄动画，动画就越可能因为没有料到的事态而失败……除非超越XAML Brush。所以我不做XAML Brush动画啦。 2. 使用CompositionLinearGradientBrush CompositionLinearGradientBrush 是线性渐变画笔，它是最基本的画笔之一，可以实现类似 LinearGradientBrush 的效果。基本使用步骤如下：通过Compositor创建CompositionLinearGradientBrush；通过Compositor创建并配置CompositionColorGradientStop

订阅动画