动画 | 易学教程

CSS-简单动画效果

阅读更多关于 CSS-简单动画效果

简单的图标扩散动画，重点备注效果为一个心脏跳动 Body ： <div id="img_head_back"> <img src="img/ 邮箱 (1).png" class="img_head_back_1" > </div> Css ： .img_head_back_1{ margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; animation-name: back;/* 为动画设置名称 */ animation-duration: 3s;/* 动画时长 */ animation-delay: 0s;/* 动画等待 1s 后开始 */ animation-iteration-count: infinite;/* 动画无限重复 */ } // 间隔 1.5 秒一次动画效果 @keyframes back{ 0% { width:180px; height: 180px; opacity:1.0; } 50%{ width:180px; height: 180px; opacity:1.0; } 100%{ width:220px; height:220px; opacity:0; } } 来源： https://www.cnblogs.com/hjc-12580/p/11339671

CSS3 元素转圈动画（元素旋转动画）

阅读更多关于 CSS3 元素转圈动画（元素旋转动画）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>css 转圈</title> <style> .turn{ width:100px; height: 100px; background: aqua; animation:turn 1s linear infinite; margin: 100px auto; } /* turn : 定义的动画名称 1s : 动画时间 linear : 动画以何种运行轨迹完成一个周期 infinite :规定动画应该无限次播放 */ @keyframes turn{ 0%{-webkit-transform:rotate(0deg);} 25%{-webkit-transform:rotate(90deg);} 50%{-webkit-transform:rotate(180deg);} 75%{-webkit-transform:rotate(270deg);} 100%{-webkit-transform

TJU1031

阅读更多关于 TJU1031

直接模拟做。棋盘共有(10*10*4)^2=160000种状态，循环160000次以后还没相遇就认为无解了。代码方面么……自己喜欢设计点class，估计看上去好理解一些哈~~ #include < iostream > using namespace std; enum Direction {North,East,South,West} ; typedef struct { int x,y;Direction d;} Point; class Map { public : Map(); int meet(); void move(); int seconds; private : int item[ 10 ][ 10 ]; Point Cat,Mouse; void Fill( char s, int x, int y); int movable(Point & pos); } ; int main() { int data; cin >> data; Map * m; while (data -- > 0 ) { m = new Map(); while ( ! m -> meet()) { m -> move(); if (m -> seconds > 160000l ) { m -> seconds = - 1 ; break ; } } cout << m ->

jQuery特效 | 导航底部横线跟随鼠标缓动

阅读更多关于 jQuery特效 | 导航底部横线跟随鼠标缓动

jQuery特效 | 导航底部横线跟随鼠标缓动 2月初，接收到了公众号读者的效果需求，希望能够讲解这样一个实例：横排的导航，下边框是一条横线，随着鼠标移入某个导航，横线滑动到相应位置。今天就针对该特效来说说如何开发（本次内容使用jQuery进行讲解，原生JavaScript代码下周一奉上）功能效果图功能需求明确横向导航条；当鼠标移入导航区域的时候，在当前导航底部淡入一个横线；当鼠标在导航区域当中左右移动时，横线跟随鼠标移动；当鼠标移出导航区域的时候，横线淡出。导航跟随 - 实现结构分析在此功能当中，核心在于结构的搭建，导航底部的横线能够来回运动，那么该横线必然需要定位到当前导航当中，因此可以确定如下的结构代码样式处理针对父级元素进行相对定位设置，针对子级元素（横线）设置绝对定位，并且设置left和bottom的值针对每个导航元素进行样式设置，需要注意的是，针对“当前”导航，需要给出不同于其他元素的样式（此时可以借助CSS选择器优先级来实现） Plus：如果对定位以及选择器优先级不是太了解，可以在文章底部点击相关链接，查看HTML5学堂（码匠）之前的文章。功能逻辑当鼠标移入具体每个导航时，设置“横线”的left值，使用animate方法实现其缓动的效果。当鼠标移入移出整个导航条时，再控制横线的显示与隐藏。效果实现必备知识详解 fadeIn

css @keyframes动画

阅读更多关于 css @keyframes动画

先放下我写的代码 .rex{ position: absolute; top: 0px;left: 0px;width: 200px;height: 200px; border-radius: 5px;border: 1px solid #ccc; font-size: 125pt;text-align: center;line-height: 200px;background: #bbb;opacity: 0.5; animation: rotate 8s infinite linear; -webkit-animation: rotate 8s infinite linear; -ms-animation:rotate 8s infinite linear; } @-webkit-keyframes rotate{ form{-webkit-transform: rotateY(0);-webkit-transition:right 3s linear,background-color 3s ease;} to{-webkit-transform: rotateY(-350deg);} } @keyframes rotate{ form{-webkit-transform: rotateY(0);} to{-webkit-transform: rotateY(-350deg);

css keyframes动画属性设置

阅读更多关于 css keyframes动画属性设置

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>css-keyframes</title> 6 <link href="style.css" rel="stylesheet" type="text/css"> 7 </head> 8 <body> 9 <div><span></span></div> 10 </body> 11 </html> 1 @-webkit-keyframes move{ /*定义名为move的动画函数目前chrome对其支持较好所以加-webkit-前缀*/ 2 0%{ /*时间达到0%时坐标位置为（0,0）*/ 3 transform:translate(0px,0px);/*应用该动画的标签位置为（0,0）*/ 4 } 5 20%{ 6 transform:translate(100px,80px); 7 } 8 50%{ 9 transform:translate(200px,0px); 10 } 11 100%{ 12 transform:translate(400px,80px); 13 } 14 } 15 div { 16 width: 300px; 17 height: 100px; 18 background: blue; 19 border

QT动画时间轴控制 QTimeLine

阅读更多关于 QT动画时间轴控制 QTimeLine

QTimeLine 类提供用于控制动画的时间轴比如控制进度条的增长，图片，窗口的旋转，平移等等 QTimeLine 有一个 frameChanged(int) 信号当调用 QTimeLine ：： start （） frameChanged(int val) 里面的 val值会从0到50开始递增（前提是需要设置范围如timeLine->setFrameRange(0, 50); 也需要设置QTimeLine变化的时间timeLine = new QTimeLine(1000, this) ）可以在槽函数中接受这个 val值一般使用如： transform.translate(a, b); transform.rotate(c); transform.scale(d, e); 以上（ a,b,c,d,e）都可以通过val的值代替或者和val做某种运算后得到 QTransform QTransform 类指定坐标系统的 2D 转换其中 translate() 和 rotate() 俩函数组合实现图片旋转， translate() 设置旋转中心， rotate() 实现旋转 ) translate（设置坐标中心）, scale（设置缩放比例）, shear（设置b变形比例）, rotate （设置旋转角度）例子：当点击按钮时进度条的值会从 0 到 100 使用时间是

CSS3 动画

阅读更多关于 CSS3 动画

通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。㈠@keyframes 规则 ⑴浏览器支持 Firefox 支持替代的 @-moz-keyframes 规则。 Opera 支持替代的 @-o-keyframes 规则。 Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则。 ⑵定义和用法通过 @keyframes 规则，能够创建动画。创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。在动画过程中，能够多次改变这套 CSS 样式。以百分比来规定改变发生的时间，或者通过关键词 " from " 和 " to "，等价于 0% 和 100%。 0% 是动画的开始时间， 100% 动画的结束时间。为了获得最佳的浏览器支持，应该始终定义 0% 和 100% 选择器。注释：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。 ⑶语法 @keyframes animationname {keyframes-selector{css-styles;}} keyframes-selector：动画时长的百分比。合法的值： 0-100% from（与 0% 相同） to（与 100% 相同） ⑷代码示例： @keyframes myfirst { from

Vue实现动画的几种方式

阅读更多关于 Vue实现动画的几种方式

1. vue内置组件transition 　　元素出现和消失都呈现动画  <transition name="fade"> <div v-show="show"></div> </transition> .fade-enter-active, .fade-leave-active { transition: opacity .5s } .fade-enter, .fade-leave-active { opacity: 0 } 2. animate.css插件　　参照 https://github.com/daneden/animate.css 　　加入类名时呈现动画 npm install animate.css --save import animate from 'animate.css' <div class="animated bounce delay-2s faster">Example</div> 3. wow.js 　　需引入animate，滚动到元素的位置展现动画 npm install wowjs --save-dev <script> import { WOW } from "wowjs" import 'animate.css' export default { mounted() {