css动画

前言 大家平时应该经常见到这种特效，很炫酷不是吗 这是谷歌 Material Design 中最常见的特效了，市面上也有很多现成的js库，用来模拟这一特效。但是往往要引入一大堆 js 和 css ，其实在已有的项目中，可能只是想加一个这样的按钮，来增强用户体验，这些 js 库就显得有些过于庞大了，同时由于是 js 实现，很多时候还要注意加载问题。 那么，有没有办法用 css 来实现这一特效呢？ 思路 其实就是一个动画，一个正圆从小变大，用 css3 中的动画很容易实现 示例代码 @keyframes ripple{ from { transform: scale(0); opacity: 1; } to { transform: scale(1); opacity: 0; } } 通常用 js 来实现的方式很简单，就是给点击元素添加一个 class ，然后再动画结束后移除该 class 示例代码 var btn = document.getElementById('btn'); btn.addeventlistener('click',function(){ addClass(btn,'animate') },false) btn.addeventlistener('transitionend',function(){//监听css3动画结束 removeClass(btn,

ת 点击查看原文 https://www.cnblogs.com/starof/p/4968769.html /* animation */ .a-bounce,.a-flip,.a-flash,.a-shake,.a-swing,.a-wobble,.a-ring{-webkit-animation:1s ease;-moz-animation:1s ease;-ms-animation:1s ease;animation:1s ease;} .a-fadein,.a-fadeinT,.a-fadeinR,.a-fadeinB,.a-fadeinL,.a-bouncein,.a-bounceinT,.a-bounceinR,.a-bounceinB,.a-bounceinL,.a-rotatein,.a-rotateinLT,.a-rotateinLB,.a-rotateinRT,.a-rotateinRB,.a-flipin,.a-flipinX,.a-flipinY{-webkit-animation:1s ease-out backwards;-moz-animation:1s ease-out backwards;-ms-animation:1s ease-out backwards;animation:1s ease-out backwards;} .a-fadeout

先上效果图 布局解析： 背景和文字就没啥好说的了，直接说关键部分 1.图标绘制 class 命名为 icon_local 看起来很复杂其实很简单 首先咱们画个正方形然后旋转45度 width: 60rpx; height: 60rpx; background: #89849b; transform: rotate(-45deg); display: flex; align-items: center; justify-content: center; 接下来让它变成小气球的样子 只要设置border-radius即可 transform: rotate(-45deg); 然后给它中心加个小圆圈 这里用css的伪元素 after 由于我们上边设置了 flex布局 并且让内容全居中了就不用管小圆圈位置问题了 .icon_local:after content: ''; width: 26rpx; height: 26rpx; background: #2f2f2f; border-radius: 50%; 小小的图标就完成了，接下来是下边的波纹动画 这个动画其实也是用了旋转 只不过是3D的 首先画一个小圆圈作为定位图标的阴影 命名类名为 .shadow border-radius: 50%; height: 28rpx; width: 28rpx; z-index: -2; /

1、常见的块级元素 内联元素 div -最常用的块级元素 dl - 和dt-dd 搭配使用的块级元素 form - 交互表单 h1 -h6- 大标题 hr - 水平分隔线 ol – 有序列表 p - 段落 ul - 无序列表 fieldset - 表单字段集 colgroup-col - 表单列分组元素 table-tr-td 表格及行-单元格 pre - 格式化文本 a –超链接（锚点） br - 换行 i - 斜体 em - 强调 img - 图片 input - 输入框 label - 表单标签 span - 常用内联容器，定义文本内区块 strong - 粗体强调 sub - 下标 sup - 上标 textarea - 多行文本输入框 u - 下划线 select - 项目选择 2、实现文本三个点的几个条件 text-overflow属性仅是：当文本溢出时是否显示省略标记，并不具备其它的样式属性定义，要实现溢出时产生省略号的效果还需定义： 1、容器宽度：width：value；（px、%，都可以） 2、强制文本在一行内显示:white-space：nowrap; 3、溢出内容为隐藏：overflow：hidden； 4、溢出文本显示省略号：text-overflow：ellipsis; 注：必须是单行文本才能设置本文溢出！！！ IE6+；chrome1.0+

Web前端技术由 html、css 和 javascript 三大部分构成，是一个庞大而复杂的技术体系，其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先从某一个点切入，然后不断地接触和学习新的知识点，因此对于初学者很难理清楚整个体系的脉络结构。本文将对Web前端知识体系进行简单的梳理，对应的每个知识点点到为止，不作详细介绍。目的是帮助大家审查自己的知识结构是否完善，如有遗漏或不正确的地方，希望共勉。 一、JAVASCRIPT 篇 0、基础语法 Javascript 基础语法包括：变量声明、数据类型、函数、控制语句、内置对象等。 在ES5 中，变量声明有两种方式，分别是 var 和 function ，var 用于声明普通的变量，接收任意类型，function用于声明函数。另外，ES6 新增了 let、const、import 和 class 等四个命令，分别用以声明 普通变量、静态变量、模块 和 类 。 JS数据类型共有六种，分别是 String、Number、Boolean、Null、Undefined 和 Object 等， 另外，ES6新增了 Symbol 类型。其中，Object 是引用类型，其他的都是原始类型(Primitive Type)。 原始类型也称为基本类型或简单类型，因为其占据空间固定，是简单的数据段，为了便于提升变量查询速度，将其存储在栈

Web前端技术由 html、css 和 javascript 三大部分构成，是一个庞大而复杂的技术体系，其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先从某一个点切入，然后不断地接触和学习新的知识点，因此对于初学者很难理清楚整个体系的脉络结构。本文将对Web前端知识体系进行简单的梳理，对应的每个知识点点到为止，不作详细介绍。目的是帮助大家审查自己的知识结构是否完善，如有遗漏或不正确的地方，希望共勉。 一、JAVASCRIPT 篇 0、基础语法 Javascript 基础语法包括：变量声明、数据类型、函数、控制语句、内置对象等。 在ES5 中，变量声明有两种方式，分别是 var 和 function ，var 用于声明普通的变量，接收任意类型，function用于声明函数。另外，ES6 新增了 let、const、import 和 class 等四个命令，分别用以声明 普通变量、静态变量、模块 和 类 。 JS数据类型共有六种，分别是 String、Number、Boolean、Null、Undefined 和 Object 等， 另外，ES6新增了 Symbol 类型。其中，Object 是引用类型，其他的都是原始类型(Primitive Type)。 原始类型也称为基本类型或简单类型，因为其占据空间固定，是简单的数据段，为了便于提升变量查询速度，将其存储在栈

transition name 用于自动生成 CSS 过渡类名。例如：name: fade 将自动拓展为 .fade-enter ，.fade-enter-active等。默认类名为 "v" appear ，是否在初始渲染时使用过渡。默认为 false。 css ，是否使用 CSS 过渡类。默认为 true。如果设置为 false，将只通过组件事件触发注册的 JavaScript 钩子。 type，指定过渡事件类型，侦听过渡何时结束。有效值为 "transition" 和 "animation"。默认 Vue.js 将自动检测出持续时间长的为过渡事件类型。 mode ，控制离开/进入的过渡时间序列。有效的模式有 "out-in" 和 "in-out"；默认同时生效。 duration， 指定过渡的持续时间。 CSS 动画 animation 　　 CSS 动画用法同 CSS 过渡，区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend事件触发时删除。 过渡的类名 v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。 v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间

前言 灵活运用CSS开发技巧 请戳这里，持续更新 灵活运用JS开发技巧 请戳这里，持续更新 何为技巧，意指表现在文学、工艺、体育等方面的巧妙技能。代码作为一门现代高级工艺，推动着人类科学技术的发展，同时犹如文字一样承托着人类文化的进步。 每写好一篇文章，都会使用大量的写作技巧。 烘托、渲染、悬念、铺垫、照应、伏笔、联想、想象、抑扬结合、点面结合、动静结合、叙议结合、情景交融、首尾呼应、衬托对比、白描细描、比喻象征、借古讽今、卒章显志、承上启下、开门见山、动静相衬、虚实相生、实写虚写、托物寓意、咏物抒情 等，这些应该都是我们从小到大写文章而接触到的写作技巧。 作为程序猿的我们，写代码同样也需要大量的写作技巧。一份良好的代码能让人耳目一新，让人容易理解，让人舒服自然，同时也让自己成就感满满(哈哈，这个才是重点)。因此，我整理下三年来自己使用到的一些 CSS开发技巧 ，希望能让你写出耳目一新、容易理解、舒服自然的代码。 目录 既然写文章有这么多的写作技巧，那么我也需要对 CSS开发技巧 整理一下，起个易记的名字。 Layout Skill ： 布局技巧 Behavior Skill ： 行为技巧 Color Skill ： 色彩技巧 Figure Skill ： 图形技巧 Component Skill ： 组件技巧 备注 代码只作演示用途，不会详细说明语法 部分技巧示例代码过长，使用

因为项目需要，别人想让我给他写一个个人博客，并且给了我一个其他人的网页，可以 点此查看 。有的同学可能说了，第三方博客框架这么多，为什么还要去手写的，你说这个有可能是没有看到打开这个博客。 样式介绍 给大家看一下这个网页的大体样式。 这个界面可以说是非常漂亮，整体也是一个响应式布局，总体来说还算不错。但是抛开页面设计，这个网站有一个致命的缺点，就是没有做 懒加载 ，这么多页面其实就是一个HTML文件，所有的资源图片以及文字信息等全部是一次性加载，所以你想打开这个界面还是比较困难的，需要等待一些时间。 我们这次只看设计。其实用Vue的朋友们应该都听过 element-ui 这个组件库，它里面有一个抽屉组件可以用。其实用这种现成的组件的局限性大家都很清楚，虽然说开发很快，但是定制化有很多限制，向上面GIF图中的效果他就不能很好的实现。于是本着学习的态度我们来实现一下这个样式。 实现方法 话不多说，我们先来看一下实现效果 我们大致实现了想要实现的效果： 点击不同标签页出现相应界面 切换动画 点击蒙版收回顶层标签页 切换动画 动画的实现方法有很多，在CSS里面写动画的话我比较常用keyframes，但是在这里我是用js来控制动画，没有使用css动画属性。js实现动画的话大家思考一下连环画的生成原理，其实就是在很短的事件里面对图片的频繁移动，只要移动速度合适

　　曾经以为，loading的制作需要一些比较高深的web动画技术，后来发现大多数loading都可以用“障眼法”做出来。比如一个旋转的圆圈，并不都是将gif图放进去，有些就是画个静止图像，然后让它旋转就完了。gif图也可以，但是加载时间比较长。 　　CSS的animation可以做出大多数的loading，比如： loading1： 1、HTML： 1 <div id="ddr"> 2 <div class="ddr ddr1"></div> 3 <div class="ddr ddr2"></div> 4 <div class="ddr ddr3"></div> 5 <div class="ddr ddr4"></div> 6 <div class="ddr ddr5"></div> 7 </div> 2、CSS： 1 #ddr { 2 margin : 0 auto ; 3 width : 70px ; 4 height : 120px ; 5 } 6 .ddr { 7 width : 10px ; 8 height : 120px ; 9 float : left ; 10 margin : 2px ; 11 background-color : #00ff00 ; 12 animation : loading 1s infinite ease-in-out ; /