ease | 易学教程

vue中公共样式

阅读更多关于 vue中公共样式

html, body, h1, h2, h3, h4, h5, h6, p, textarea, input, select, ul, ol, li, fieldset, figure { margin: 0; padding: 0; border: none; } html,body{ height: 100%; } ul, li { list-style: none; } body, textarea, input, select { font-size: 14px; color: #222222; font-weight: normal; font-family:"Helvetica Neue", Helvetica, STHeiTi, 'Microsoft Yahei',sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; outline: none; } a { text-decoration: none; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -ms-transition: all 0.25s ease; -o-transition: all 0.25s

前端轻量级web进度条 – Nprogress & nanobar

阅读更多关于前端轻量级web进度条 – Nprogress & nanobar

转载：http://www.xuanfengge.com/front-end-nprogress-and-lightweight-web-progress-bar-nanobar.html 前言进度条库是前端中常见的库之一，bootstrap中提供了多种进度条样式。NProgress.js和nanobar.js是两款轻量级的进度条组件，使用简便。轩枫阁用过Nprogress，用于页面刚打开时的页面加载进度显示。官网 NProgress.js： http://ricostacruz.com/nprogress/ nanobar.js： http://nanobar.micronube.com/ 1. NProgress 简介轻量级的ajax进度条应用，灵感来自Google, YouTube, and Medium。纳米级的进度条。具有逼真的动画涓涓细流来说服你的用户，something is happen！安装引入 nprogress.js 和 nprogress.css 到项目中。基本用法只需要调用start() 和 done()来控制进度条 1 2 NProgress . start ( ) ; NProgress . done ( ) ; 高级用法百分比：通过设置progress的百分比，调用 .set(n)来控制进度，其中n的取值范围为0-1。 1 2

CSS3动画的使用

阅读更多关于 CSS3动画的使用

0921自我总结 CSS3动画的使用一.动画的创建 @keyframes规则是创建动画浏览器兼容 1、@keyframes myfirst 2、@-webkit-keyframes myfirst /* Safari and Chrome */ 3、@-moz-keyframes myfirst /* Firefox */ 4、@-o-keyframes myfirst /* Opera */ 根据状态的百分比来设置 @-webkit-keyframes fadeIn { 0% { opacity: 0; /*初始状态透明度为0*/ } 50% { opacity: 0; /*中间状态透明度为0*/ } 100% { opacity: 1; /*结尾状态透明度为1*/ } } 上面如果有前缀下面使用的时候必须加上前缀二.css3动画的属性 animation设置动画 ` 语法 :animation: name duration timing-function delay iteration-count direction fill-mode play-state; animation-name指定的动画，从而执行动画语法 : animation-name : none | 动画名称 none:为默认值，当值为none 时，将没有任何动画效果，其可以用于覆盖任何动画

vue公共组件之回到顶部组件

阅读更多关于 vue公共组件之回到顶部组件

vue公共组件之回到顶部组件 vue公共组件之回到顶部组件技术栈实现方式：设计图标样式回到顶部组件用于测试的组件最终效果今天在看PSD图时，发现图片右下角有一个包含向上箭头的小图标，点击这个图标，马上返回页面顶部。这个小图标引起了我的兴趣，有几种实现方式？能否抽取成公共组件，在整个项目中使用呢？马上开干！技术栈 vue2.5框架 webpack3.6 es6/7 tween.js animation.js element-ui font-awesome EventUtil 实现方式：共用2种实现方式，通过css实现，通过js实现设计图标样式 /*回到顶部标识*/ .utils-sticky-btns .scrolled { right : 3 px ; } .utils-sticky-btns { position : fixed ; z-index : 50 ; right : - 48 px ; bottom : 10 px ; -webkit-transition : right . 3 s ease ; transition : right . 3 s ease ; } .utils-sticky-btns a { text-decoration : underline ; color : #ff712c ; -webkit-transition :

前端开发（四）HTML5和CSS3

阅读更多关于前端开发（四）HTML5和CSS3

一、圆角、rgba 设置某一个角的圆角，比如设置左上角的圆角： border-top-left-radius:30px 60px; border-top-left-radius: 60px; 同时分别设置四个角： border-radius:30px 60px 120px 150px; 设置四个圆角相同： border-radius:50%; ①盒子透明度表示法： .box { opacity:0.1; /* 兼容IE */ filter:alpha(opacity=10); } ②rgba(0,0,0,0.1) 前三个数值表示颜色，第四个数值表示颜色的透明度 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>透明度</title> <style type="text/css"> body{ background: url(images/banner01.jpg); } .box{ width: 300px; height: 100px; background-color: #000; color: #fff; text-align: center; line-height: 100px; font-size: 30px; /*设置透明度*/ opacity: 0.3; /*兼容IE*/

web前端入门到实战：CSS项目悬停过渡动画三部曲

阅读更多关于 web前端入门到实战：CSS项目悬停过渡动画三部曲

CSS不一定要写得多么复杂才能实现特殊效果。如下就是三个超级简单的过渡的例子，可能只是几行代码，但是添加到Web应用程序中，却会让它增色不少。如下是我们将在本教程中构建的代码项目设置在这个项目中，我们将把过渡效果应用到一个class为box的元素上面。这个box元素内部是垂直和水平居中的文字内容。HTML结构相当简单： <div class='box'> <p>TEXT</p> </div> CSS代码也一样简单。我们想要使用无衬线字体，并确保div中的段落文本是白色的，可以通过如下代码来实现： body { color: white; font-family: Helvetica, Sans-Serif; } web前端开发学习Q-q-u-n： 767273102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）另外，给box元素添加如下CSS属性： .box { width:200px; /* Set the Width of box */ height:50px; /* Set the Height of box */ background:#424242; /* Dark Grey Background color */ transition:all 0.25s ease; /* Transition settings