less封装 keyframes

2024-11-04

Less 创建css3动画@keyframes函数

封装: /** * animation */ .keyframes (@prefix,@name,@content) when (@prefix=def) { @keyframes @name { @content(); } } .keyframes (@prefix,@name,@content) when (@prefix=moz) { @-moz-keyframes @name { @content(); } } .keyframes (@prefix,@name,@content) wh

封装keyframes插件

模仿jquery,使用简单,自动添加浏览器前缀 var keyframes = new SHBKerframes(); keyframes.define([{ name:'myAnimate', 0%:{width:100px;height:100px;transform:scale(1);} 100%:{width:100px;height:100px;transform:scale(2);} }]); 源码: /** *简单的SHBKerframes *@author:索洪波 *@qq:60

React项目 - 几种CSS实践

前言团队在使用react时,不断探索,使用了很多不同的css实现方式,此篇blog总结了,react项目中常见的几种css解决方案:inline-style/radium/style-component,只列举了团队项目中用过的一下实现方式,还有其他的不过多展开 css的不足样式与状态相关的情况越来越多,需要动态.能直接访问组件state的css.一切样式都是全局,产生的各种命名的痛苦,BEM等命名规则能解决一部分问题,但当你使用三方插件时却无法避免命名冲突. Vue怎么解决 scoped 属性

移动端 transition动画函数的封装（仿Zepto）以及 requestAnimationFrame动画函数封装（仿jQuery）

移动端 css3 transition 动画 ,requestAnimationFrame 动画对于性能的要求,h5优先考虑: 移动端单页有时候制作只用到简单的css3动画即可,我们封装一下,没必要引入zepto框架,把zepto的动画模块从Zepto 扒下来,加以改造独立:用于生产环境:下面是 Demo栗子: 上面图片对应的 js var leftsbox=document.getElementById("leftsbox"); var boxdiv=leftsbox.get

css3实战版的点击列表项产生水波纹动画——之jsoop面向对象封装版

1.html: <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <link rel="stylesheet" href="./css/reset.css"/> <link rel="stylesheet" href="./css/animat

对百度WebUploader的二次封装,精简前端代码之图片预览上传(两句代码搞定上传)

前言本篇文章上一篇: 对百度WebUploader开源上传控件的二次封装,精简前端代码(两句代码搞定上传) 此篇是在上面的基础上扩展出来专门上传图片的控件封装. 首先我们看看效果: 正文使用方式同样很简单,首先创建HTML容器如下: <div id="uploader" class="uploaderPic"> </div> 然后页面加载完成后渲染: $(function () { $("#uploader").pow

jQuery Ajax封装（附带加载提示和请求结果提示模版）

1.创建HTML文件(demo) <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>jQuery Ajax</title> <script type="text/javascript" src="jquery-3.2.0.min.js"></sc

react封装简单的浏览器顶部加载进度条全局组件

在项目中经常会有在请求前后加loading或者加加载进度条,一般这些组件都会抽离出来作为全局组件进度条的插件貌似都不是很符合自己项目中的需求,于是.. 参考nprogress样式,自己在项目中封装组件,实现简单的顶部加载进度条.效果如下组件放到components文件夹下,新建progress文件夹 progress/index.jsx import React, { Component } from 'react'; import PropTypes from 'prop-types';

vue封装组件的正确方式-封装类似elementui的组件

最近读了下element的源码,仿照他封装了两种不同的组件. 第一种:通过组件来调用显示的 <template>  <div class = "contine"> <p class = "title"> {{title}} </p> <slot class = "contine" name = "co

FLV视频封装格式详解

FLV视频封装格式详解分类: FFMpeg编解码 2012-04-04 21:13 1378人阅读评论(2) 收藏举报 flvheaderaudiovideocodecfile 目录(?)[-] Overview File Structure The FLV header The FLV File Body FLV Tag Definition FLVTAG Audio Tags Video Tags SCRIPTDATA onMetaData keyframes Overview Fla

Vue.js（24）之弹窗组件封装

同事封装了一个弹窗组件,觉得还不错,直接拿来用了: gif图展示: 弹框组件代码: <template> <transition name="confirm-fade"> <div @touchmove.prevent v-if="isShowConfirm" class="my-confirm" @click.stop="clickFun('clickCancel')"> <div

vue自定义插件封装，实现简易的elementUi的Message和MessageBox

vue自定义插件封装示例 1.实现message插件封装(类似简易版的elementUi的message) message组件 <template> <transition name="msgbox-fade" @after-leave="handleAfterLeave"> <div :class="[ 'message_wrapper',

JS21. 使用原生JS封装一个公共的Alert插件（HTML5: Shadow Dom）

效果预览 Shadow DOM Web components 的一个重要属性是封装--可以将标记结构.样式和行为隐藏起来,并与页面上的其他代码相隔离,保证不同的部分不会混在一起,可使代码更加干净.整洁.其中, Shadow DOM 接口是关键所在,它可以将一个隐藏的.独立的 DOM 附加到一个元素上 [ MDN ] . 当我们对 DOM(文档对象模型)有一定的了解,它是由不同的元素节点.文本节点连接而成的一个树状结构,应用于标记文档中(例如 Web 文档中常见的 HTML 文档).请看如下

angular访问后台服务及监控会话超时的封装实现

以前一直没有想过写一些东西来把项目中用到的知识点及技术实现做一个归纳整理并分享出来.现在打算逐渐的把项目中的一些东西整理并分享出来,与大家共勉! angular本身自带访问组件http和httpclient,组件本身都是异步模式访问.本文只列举了对http组件的封装同时也一同处理会话超时监控. 实现思路概述: 1.将请求入参和出参统一约定 2.封装方法将请求参数.数据处理方法.数据呈现方法.访问错误处理方法封装在一起,业务调用通过服务调用该封装方法,同时把请求参数.数据处理方法.数据呈现方法.访

[C#] 简单的 Helper 封装 -- RegularExpressionHelper

using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Text.RegularExpressions; using System.Threading.Tasks; namespace ConsoleApplication6 { public sealed class RegularExpressionHelper { /// <summary> ///

iOS开发之App间账号共享与SDK封装

上篇博客<iOS逆向工程之KeyChain与Snoop-it>中已经提到了,App间的数据共享可以使用KeyChian来实现.本篇博客就实战一下呢.开门见山,本篇博客会封装一个登录用的SDK, 该登录SDK中包括登录.注册.忘记密码等功能,当然该SDK中包括这些功能的UI.数据验证等业务逻辑.网络请求.数据存储等等.当然此处的登录SDK是一个简化版的,真正的登录SDK比这个考虑的东西要多的多,如果在加上多个App进行登录账号的共享的话,那么考虑的东西就更为复杂了. 本篇博客就先封装一个Logi

Ajax实现原理，代码封装

都知道实现页面的异步操作需要使用Ajax,那么Ajax到是怎么实现异步操作的呢? 首先需要认识一个对象 --> XMLHttpRequest 对象 --> Ajax的核心.它有许多的属性和方法事件以便于脚本处理和控制HTTP的请求和响应. 下面来认识几个属性:我不用官方的话来解释,希望大家能一看就知道是什么意思 readyState 属性创建XMLHttpRequest对象(下面称ajax对象)后,readyState属性则表示当前对象处于一个什么状态 ,一共5个状态 0 未初始化状态

用C语言封装OC对象（耐心阅读，非常重要）

用C语言封装OC对象(耐心阅读,非常重要) 本文的主要内容来自这里前言做iOS开发的朋友,对OC肯定非常了解,那么大家有没有想过OC中NSInteger,NSObject,NSString这些对象是怎么封装的?接下来我们就使用C语言来一部一部的实现这个封装. Object对象首先我们先封装一个Object对象,我们来分析一下: 如果使用C来封装对象,我们就要用到结构体每一个Object都有一个计数器,这个计数器用来管理对象的释放提供一定的方法,能够retain, release, 获取

【知识必备】RxJava+Retrofit二次封装最佳结合体验，打造懒人封装框架~

一.写在前面相信各位看官对retrofit和rxjava已经耳熟能详了,最近一直在学习retrofit+rxjava的各种封装姿势,也结合自己的理解,一步一步的做起来. 骚年,如果你还没有掌握retrofit和rx两大框架,那你是真的out了! 如果你对Rxjava不熟悉,请先看扔物线的给 Android 开发者的 RxJava 详解,超详细: 如果你只是想了解retrofit的简单使用,你可以看我另外一篇博客(仅仅是简单使用),android快捷开发之Retrofit网络加载框架的简单使用,

对百度WebUploader开源上传控件的二次封装,精简前端代码(两句代码搞定上传)

前言首先声明一下,我这个是对WebUploader开源上传控件的二次封装,底层还是WebUploader实现的,只是为了更简洁的使用他而已. 下面先介绍一下WebUploader 简介: WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用原来的FLASH运行时,兼容IE6+,iOS 6+, android 4+.两套运行时,同样的调用方式

less封装 keyframes

热门专题