大师网-带你快速走向大师之路 解决你在学习过程中的疑惑，带你快速进入大师之门。节省时间，提升效率

首页 > ease

EASE（软件）

EASE，ADA(Ahnert声学设计公司)在Montreux举行的88届AES大会上介绍的软件。

css实现边框动画

css实现边框动画 1、css实现边框动画 效果如图： body,div{ margin: 0; padding: 0; box-sizing: border-box; } .box{ width: 300px; height: 200px; padding: 20px; margin: 50px auto; color: #fff; background-color: #f60; } .border-box{ position: relative; width: 100%; height: 100%; padding: 20px; } .border-box::before

动画函数的绘制及自定义动画函数

} y = fn(t,0,yLen,duration); } 根据上面的公式，再结合Tween.js里面的函数调用格式，就可以实现生成代码的功能了。 function showCode(){ var code = `function bezierFun(t,b,c,d){\n`+ `\tt = t/d; } 最后也就实现了鼠标拖动控制点，即实时调整曲线形状，同时生成曲线对应的运动函数。

css3实现元素抖动效果

css3实现元素抖动效果 代码不多，不截图了，可自行尝试 说明 css部分比较冗余，是因为考虑到了适配情况。可酌情删减 -webkit-animation-name: shaky-slow; // webkit内核 -ms-animation-name: shaky-slow; // ie内核 animation-name: shaky-slow; // 原生 animation-duration: 4s; // 动画执行时间 animation-delay: 0s; // 动画等待时间 animation-iteration-count: infinite; // 动画执行次数，infinite为一直执行 animation-timing-function: ease-i

HTML蒙版--带过渡效果

HTML蒙版--带过渡效果 HTML: How is it going? 2018 CSS: .container { width: 555px; height: 200px; position: relative;mask { /*使mask层级高于content*/ z-index: 2; background-color: #E8921F; -webkit-transition: opacity . width: 100%; top: 50%; font-size: 40px; text-align: center; /*使content文字部分层级低于mask*/ z-index: 1;mask span { color: white; font-size: 48px;

粒子上升渐变特效学习

粒子上升渐变特效学习 之前在某个网站发现有个粒子缓缓上升的特效，最近想用的时候发现找不到了找不到了找不到了。求助群里的大佬们，在大佬推荐的网站上找到了一样的特效。于是把特效顺带学习了波。 特效demo如下： image 这里只取了Bubbles的特效。学习过程记录在代码注释中 css代码如下 . } /*css keyframes 动画*/ @keyframes bubbles { 0% { opacity: 0; transform: translate(0, -8000%);

【CSS】波纹效果

} @keyframes pulse { 0% { transform: translate(-50%, -50%) scale(1); margin: 10px auto 0; background-image: linear-gradient( 135deg, #52E5E7 10%, #130CB7 100%); letter-spacing: 4px; } @keyframes： 定义动画用的。后面跟着动画名，大括号里设置要改变的属性。 animation： 会用动画。后面跟着动画名。 animation里面的 infinite 说明重复执行动画。 opacity： 设置不透明度。 animation-delay： 延迟执行。 display: flex 弹性盒布局

让云朵飘，微信小程序animation循环动画

translateY(-10).translateX(0). // 更新数据 that.setData({ // 导出动画示例 //animationData: animationData.export(), animationCloudData: animationCloudData.export(), }) setInterval(function () { //动画的脚本定义必须每次都重新生成，不能放在循环外 animationCloudData.translateX(300). // 页面渲染完成 //实例化一个动画 var animation = wx.createAnimation({ duration: 1000, timingFunction: 'ease', }) this.animation = animation animation.scale(2, 2).

基于vue展开收起动画

基于vue展开收起动画 之前用jquery实现还很简单，然后用vue就一直不行，然后在网上找了很多，又仔细看了vue官网 的过渡 动画，发现其实很简单 (可以多看vue官网 过渡 动画 实现更多效果) 1、实际效果 展开收起效果.gif 2、代码 .box{ height:200px;width: 200px; background-color:black;draw-leave-active { transition: all 1s ease;draw-enter, .fade-leave-active below version 2.1.8 */ { height: 0;

vue.js动画中的js钩子函数

vue.js动画中的js钩子函数 在transition中还可以通过设置javascript钩子函数，实现自定义动画效果。 以实现击球效果为例： 击球 具体代码 代码解析： let vm = new Vue({ el: "#app", data: { flag: false, ball: 'https://upload-images.jianshu.io/upload_images/1864602-ec73f549171a6601.png? // 动画完成后的样式 el.style.transform = "translate(550px, 350px)"; }, afterEnter(el) { // 动画完成之后调用 this.flag = !

vue自定义transition样式前缀名

vue自定义transition样式前缀名 默认情况下，控制 transition 样式的类名是以 'v-' 为前缀，我们可以自定义前缀名 具体代码 动画前缀名.gif 代码解析： 将前缀名改为'pretty' 动画效果 .pretty-enter, .pretty-leave-to { opacity: 0; transform: translateY(200px);pretty-leave-active { transition: all 1.5s ease; } 更多vue.js的有趣实例，请点击移步至目录

前端特效的似是而非

height: 50px;bg{ left: 0; } @keyframes slideUp{ 0%{ transform: translateY(-100%); bottom: 20px;item label{ display: block; Ut sed sunt laudantium, possimus illum aliquam corporis, tenetur pariatur eveniet iusto, nisi ipsum harum. Error. a Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, vel ratione animi quisquam placeat vitae architecto id ducimus labore repudiandae eaque atque incidunt dolorem culpa at similique saepe harum laboriosam assumenda nam numquam a!

看，别人家的下拉菜单写得多好

mod=viewthread tid=1378 droplist.gif feature: 1、支持下拉动画 2、当前选中项高亮 3、子菜单由二维数组构建 4、带背景遮罩 其中1、4两点，前人就已经写好了的。 说明 1、open一维数组保存着子菜单开合状态 2、show一维数组保存着子菜单激活状态 3、highlight二维数组保存着子菜单的点选index值 核心代码 下拉动画核心代码 @keyframes slidown { from { transform: translateY(-100%); var show = this.data.show;

css制作收缩旋转圆环，效果已看20遍

css制作收缩旋转圆环，效果已看20遍 web前端群，189394454，有视频、源码、学习方法等大量干货分享 css代码： body { background: #372940; } .demo { position: relative; margin: 120px auto; width: 150px; } .loader { position: absolute; opacity: .7; } .loader circle { -webkit-animation: draw 4s infinite ease-in-out; animation: draw 4s infinite ease-in-out; -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate(-90deg); transform: rot

超级css制作水滴入池效果

超级css制作水滴入池效果 web前端群，189394454，有视频、源码、学习方法等大量干货分享 对于很多人来说css只是用来给网页上色的代码，其实css还是有很多很有趣的东西哦，除了用css来上色之外，还可以用css来写一些有趣的效果你就会发先css还是蛮有用的。 html代码： css代码： html, body { margin: 0; } @keyframes drip { 10% { top: 0; animation-timing-function: cubic-bezier(0.24, 0, 0.76, 0.14);

超简单效果，css制作毛毛虫爬行

超简单效果，css制作毛毛虫爬行 web前端学习群，189394454，有视频、源码、学习方法等大量干货分享 今天突然想起来了小时候在自家池塘边的小树上看到的毛毛虫了，我也不知道为什么，那么想起来了就写一下它爬行的动作。 html代码： css代码： body { background-color: #1B6CB2; border-bottom: none; } @keyframes magic { 0% { transform: rotate(-170deg) translate(-50%, -50%); } 100% { margin-left: 20px;

好玩的CSS动效~

好玩的CSS动效~ Loading动画-01 @keyframes bouncing-loader { from { opacity: 1;gradient-text { background: -webkit-linear-gradient(skyblue, cornflowerblue);hover-underline-animation { display: inline-block;mouse-cursor-gradient-tracking::before { --size: 0; transition: width 0.2s ease, height 0.2s ease;overflow-scroll-gradient::after { content: '';Pretty text underline without clipping descending letters. 文字下划线效果图 简单的导航栏特效 span { padding: 0 1rem;

使用CSS3和HTML5实现简单的计时器进度条

使用CSS3和HTML5实现简单的计时器进度条 本文改编自http://www.jianshu.com/p/2e7c4a73f39d，本文将jq改为原生，仅此而已 使用jquery+CSS和HTML5实现简单的计时器进度条 样式部分： *{ margin: 0;circle{ box-sizing: border-box; clip: rect(0,73px,146px,0); left: calc(50% - 16px); var loading=setInterval(function(){ if(percent =360){ clearInterval(loading); percent=0;classList.remove('clip-auto');classList.add('wth0');style.transform='rotate('+percent+'deg)';

使用jquery+CSS和HTML5实现简单的计时器进度条

使用jquery+CSS和HTML5实现简单的计时器进度条 直接上代码 *{ margin: 0;wrap{ margin-top: 50px;circle{ box-sizing: border-box; clip: rect(0,73px,146px,0); left: calc(50% - 16px); var loading=setInterval(function(){ if(percent =360){ clearInterval(loading); percent=0;removeClass('clip-auto');addClass('wth0'); } //1秒转6度 60秒 转360度 percent+=6;css("-webkit-transform","rotate("+percent+"deg)");text(percent.toFixed(0)/6);

CSS 鼠标悬停图片，显示隐藏文本

CSS 鼠标悬停图片，显示隐藏文本 Unsplash 我在 JavaScript 鼠标悬停图片，显示隐藏文本 这篇博文当中实现了同样的效果，只不过是通过 JS 来实现的，但其实，通过 CSS 动画也能实现同样的效果，直接看代码吧 HTML 结构如下 ! margin:0px 10px;filter:Alpha(opacity=80); opacity: 0.8; -webkit-transition:left 0.5s ease; color:#fff;text-align:center;con span p{line-height:25px;