css动画

【zepto学习笔记01】核心方法$()(补)

霸气de小男生 提交于 2020-04-07 05:40:11
前言 在很久之前,我们项目有一个动画功能,功能本身很简单,便是典型的右进左出,并且带动画功能 以当时来说,虽然很简单,但是受限于框架本身的难度,就直接使用了CSS3的方式完成了功能 当时主要使用transform与animation实现功能,并且用了一个settimeout执行回调,然后此事便不了了之了 但是出来混总是要还的,这不,最近相似的东西又提了出来,我们当然可以将原来的那套东西拿来用,但是看着那个settimeout总是不是滋味,因为这样捕捉回调的效果以及可能引起的BUG大家都懂,于是就想使用transitionEnd监控动画结束再执行相关回调,于是便有了一个有趣的想法 当时的心声 嗯,不行,这次我要写一个通用的东西,他至少有这些功能: ① 我可以给他一个CSS变化属性 ② 我可以给他一个时间长度 ③ 我可以给他一个动画曲线参数 有了以上东西我就可以让一个元素触发动画,并且对其注册transitionEnd事件,最后执行我们的回调,于是我基本就陷进去了 但是,我想着想着突然感觉不对,感觉以上东西好像在哪里见过,于是一个叫 animate 的东西冒了出来 突然一刹那,我有一个不妙的感觉,搞出来一看: animate animate(properties, [duration, [easing, [function(){ ... }]]]) ⇒ self animate

jQuery总结

て烟熏妆下的殇ゞ 提交于 2020-03-20 21:42:43
一、jQuery初步认知 jQuery概述 JQuery概念 javascript概念 基于Js语言的API和语法组织逻辑,通过内置window和document对象,来操作内存中的DOM元素 JQuery概念 基于javascript的,同上,提高了代码的效率 jQuery是什么: 是一个javascript代码仓库,我们称之为javascript框架。 是一个快速的简洁的javascript框架,可以简化查询DOM对象、处理事件、制作动画、处理Ajax交互过程。 它可以帮我们做什么(有什么优势) 轻量级、体积小,使用灵巧(只需引入一个js文件) 强大的选择器 出色的DOM操作的封装 出色的浏览器兼容性 可靠的事件处理机制 完善的Ajax 链式操作、隐式迭代 方便的选择页面元素(模仿CSS选择器更精确、灵活) 动态更改页面样式/页面内容(操作DOM,动态添加、移除样式) 控制响应事件(动态添加响应事件) 提供基本网页特效(提供已封装的网页特效方法) 快速实现通信(ajax) 易扩展、插件丰富 如何引入JQuery包 引入本地的JQuery 引入Google在线提供的库文件(稳定可靠高速) 使用Google提供的API导入 写第一个JQUery案例 解释:在JQuery库中,$是JQuery的别名,$()等效于就jQuery() <script type=“text

css中transition-transform-animation的用法

偶尔善良 提交于 2020-03-17 11:00:51
对css中的transition(过渡)-transform(转换)-animation(动画)认识的不够清楚,今天就放一起集中解决了。 1.transition-过渡 元素属性的过渡效果,通常配合hover实现元素初始样式到hover中样式的过渡,语法如下: 1 transition: property duration timing-function delay; property:属性,可以写allduration:持续时间timing-function:变化的曲线delay:延迟transition 元素属性transition要定义在元素的初始样式内,hover内写目标属性值 1 div 2 { 3 width:100px; 4 transition: width 2s; 5 } 6 div:hover {width:300px;} 2.transform-转换 2D转换有元素旋转(rotate),缩放(scale),移动(translate) 1 transform: rotate(45deg); /*旋转的单位为deg*/ 2 transform: scale(1.2); /*缩放的倍数,1是原始大小*/ 3 transform: translate(20px, 20px); /*参数分别是水平方法和垂直方向移动的数值,移动的单位可以为像素,也可以为百分比

CSS实现立方体

倾然丶 夕夏残阳落幕 提交于 2020-03-08 00:51:53
Css制作立方体 这周在逆战班学习了过渡(transition),2D动画(transform),渐变(gradient),以及3D动画特效。让我能够敲出很多很炫很好看的动画特效。今天想讲一下如何制作一个立方体。 首先,一个立方体需要六个面,所以我们可以用6个div放在一个大的div里,也可以用ul,li列表来制作。 < div class = "wrap" > < div class = "box1" > < / div > < div class = "box2" > < / div > < div class = "box3" > < / div > < div class = "box4" > < / div > < div class = "box5" > < / div > < div > 接下来需要添加静态样式。 .wrap { ​ width : 500px ; ​ height : 500px ; ​ margin : 50px auto ; ​ border : 1px solid pink ; ​ position : relative ; ​ /* 让wrap盒子变成一个3d空间 */ ​ transform-style : preserve-3d ; ​ } /* 给所有的子div设置同样的宽高200像素 让它们都绝对定位 并且在父元素中居中显示 */

css动画demo

a 夏天 提交于 2020-03-05 17:03:00
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>zepto实现手机端滚屏效果</title> <meta name="description" content="羊城杯活动"> <meta name="keywords" content="羊城杯活动"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta content="telephone=no" name="format-detection"> <script type="text/javascript" src="http://script2.pingan.com/app_js/wap/common/flexible.min.js"></script> <link rel="stylesheet" href="http://css2.pingan

CSS 故障艺术

浪子不回头ぞ 提交于 2020-02-10 11:31:43
本文的主题是 Glitch Art,故障艺术。 什么是故障艺术?我们熟知的抖音的 LOGO 正是故障艺术其中一种表现形式。它有一种魔幻的感觉,看起来具有闪烁、震动的效果,很吸引人眼球。 故障艺术它模拟了画面信号出现故障导致成像错误的感觉。青色色块与红色色块无法重合就是这种故障的体现。从胶片时代开始到今天的数码时代,这种故障一直是观众非常熟悉的现象。即使抖音的 LOGO 只是静态的,大脑也会自己补完整个效果,甚至还会自己脑补信号干扰的噪音。 当然,广义的故障艺术不仅仅指这种效果,我觉得是很宽泛的,本文将介绍一些 CSS 能够模拟完成的故障艺术效果。 使用混合模式实现抖音 LOGO 首先从静态的开始,抖音的 LOGO 就是很好的一个例子。 它看着像是 3 个 J 形重叠在一起。而实际上,是两个 J 形重叠在一起,重叠部分表现为白色,这个特性,使用 CSS 的混合模式 mix-blend-mode 非常好实现,而单个 J 形示意图如下: 图片来源于知乎: 为什么抖音的标志,看起来具有“电”“闪烁”“震动”的感觉? 单个 J 形其实是由 3/4圆 + 竖线 + 1/4圆组成,使用一个标签即可完成(加上两个伪元素)。 关键点 主要借助伪元素实现了整体 J 结构,借助了 mix-blend-mode 实现融合效果 利用 mix-blend-mode: lighten 混合模式实现两个 J

CSS动效集锦,视觉魔法的碰撞与融合(三)

只愿长相守 提交于 2020-01-31 09:14:33
本文讲述的原理和相关demo 扇形DIV的使用——实现雷达扫描图 DIV环形布局—实现loading圈 动画的向量合成—实现抛物线动画 无限滚动动画—实现跑马灯效果 perspective和transform的运用——实现卡片翻转 话不多说,请看。 扇形DIV的使用——实现雷达扫描图 在一些杀毒或文件扫描类的软件上,我们可能会看到一些雷达扫描的UI样式,例如下图所示 如果我们要通过CSS该如何去实现话,我们的想法一般是先画个扇形,然后给它加上渐变。 实现渐变的方式很简单,但我们该如何实现一个扇形呢? 我们可以通过一些技巧实现这一点,请看: 没错,我们可以通过skew函数,将黄色的div倾斜,然后溢出部分通过overflow:hidden遮住就可以了。 锐角扇形:deg<0,向右边倾斜,即可得到锐角扇形 钝角扇形:deg>0, 向左边倾斜,即可得到钝角扇形 代码如下 // CSS代码 @keyframes rotateAnimate { from { transform : rotate(0deg) skew(-30deg) } to { transform : rotate(360deg) skew(-30deg) } } .fan-wrapper { overflow : hidden ; position : relative ; margin : 100px ; width

[css]我要用css画幅画(四)

怎甘沉沦 提交于 2020-01-24 05:21:09
接着之前的 [css]我要用css画幅画(四) , 这次我给小明和静静增加了对话,用了简单的动画效果。 github: https://github.com/bee0060/Css-Paint , 完整代码在pages/sun-house-5.html和相关的css中可以找到 demo: http://bee0060.github.io/Css-Paint/pages/sun-house/sun-house-5.html 完整html如下: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Css Paint</title> 6 <link rel="stylesheet" type="text/css" href="../css/sun.css" /> 7 <link rel="stylesheet" type="text/css" href="../css/house.css" /> 8 <link rel="stylesheet" type="text/css" href="../css/human.css" /> 9 <link rel="stylesheet" type="text/css" href="../css/cloud.css" /> 10 11

如何使用CSS创建巧妙的动画提示框

流过昼夜 提交于 2020-01-21 18:44:55
原文: https://webdesign.tutsplus.co... 原作: Jase Smith 翻译: Stypstive 当你的用户需要漂亮的图标给出额外的文字信息时,亦或是当他们在点击了按钮之后需要确认自己没点错时,又或是带图片和字幕的复活节彩蛋,提示框是用来增强用户界面的绝佳手段。现在,让我们来做几个动画提示框,没有别的,只有HTML和CSS。 样例 这是我们之后要做的: http://jsfiddle.net/kcschaefe... 在我们沉浸在写代码的过程中之前,让我们先来看看我们的意图是什么。主要目的是为了获得一种简单的添加提示框的方法,这样一来,我们之后就能够通过增加一个自定义的 tooltip 属性来做到这一点。 <span tooltip="message">visible text or icon, etc.</span> 关于可访问性和功能的记注 如果你在寻找兼容508的提示框,或者需要带容器冲突侦测和/或HTML内容 vs 纯文本的智能提示框,有许多实用第三方脚本的解决方案能满足你的要求。 "用JavaScript来做完全可访问的交互组件是命令式的" - Sara Soueidan, 打造一个完全可访问的帮助提示框...比你想的要难 这篇教程不会特地解决可访问性的需求。你了解你的用户,知道他们需要什么,所以有关这方面,也要记得考虑他们的需求。

哪些你知道或不知道的css,在这里或许都齐全

♀尐吖头ヾ 提交于 2020-01-16 20:50:43
暑假实习的时候带我的师傅,告诉我要注重基础,底层实现原理。才能在日新月异的技术行业站住脚跟,以不变应万变,万丈高楼平地起,所以我们应该不断的去学习,去交流。交流,不应该仅仅停留在技术方面,更多的应该是在思维方式。语言只是一种工具,编程的思想才是核心。我们只有在明白了编程的思想之后,才能去创造属于自己的东西,随意切换。授之以鱼不如授之以渔。在我们的时代应该是去创造而不是模仿。回到学校之后,我开始我学习的新旅程;读一本好书亦如交一个有趣的朋友。最近读了一本《CSS揭秘》,里面有很多有意思的CSS技巧,有时间有兴趣的朋友可以去读读这本书,读完之后我们可以一起交流,学习,一起解答你我的迷惑知识点,期待和你的交流。读完这本书的时候我也对书中的知识点进行了总结归纳: 有问题欢迎讨论 sunseekers 本文所有链接均来自《CSS揭秘》,内容基本都来自原书 css编码技巧 尽量减少代码重复的重复,尽量减少改动时要编辑的地方,易维护,性能高; 使用css变量,currentColor,inherit...目前css变量很少,兼容性有待改善 响应式网页设计,每个媒体查询都会增加成本;避免媒体查询 使用百分比长度来取代固定长度,或者使用与视口相关的单位(vw,vh,vmin,vmax),她们的值解析为视口宽度或高度的百分比 当你需要在较大分辨率下得到固定宽度, 使用max-width代替width