CSS 实例之滚动的图片栏

在一些网站上可以经常看到有一些图片进行持续不断的滚动,这个效果可以通过css的动画效果来实现。具体效果如下 主要原理是通过动画向左移动。 首先给出两组一样的图片(同一行上),让整体图片向左移动一组图片的长度, 这样在动画结束时会迅速还原到原来位置,而此时正好与第二组图片交替,看起来就像是一组图片在不 ... »

CSS 实例之打开大门

本个实例主要的效果如下图所示 本案例主要运用到了3D旋转和定位技术。具体步骤如下: 1、首先在页面主体加三个很简单的div标签: 2、给外层盒子(.door) 加上基本的属性、背景、视距以及相对定位(子盒子要用到绝对定位,所以父盒子最好 加上相对定位)。 3、给左右的门设置相关属性,这里给出左盒子的 ... »

CSS 小结笔记之伸缩布局(flex)

之前块级元素布局在同一行,可以通过display或position或float来实现,而本篇介绍一个新的方法——flex(弹性布局)。 flex 为和模型布局提供了极大地灵活性,所谓弹性布局即可根据大小判定自动伸缩。 flex相关的各个属性如下: 1、display:flex;在父盒子定义flex, ... »

CSS 小结笔记之变形、过渡与动画

1、过渡 transition 过渡属性用法: transition :ransition-property transition-duration transition-timing-function transition-delay 可以一起指定也可以分别单独指定 何时开始; transitio ... »

CSS 小结笔记之滑动门技术

所谓的滑动门技术,就是指盒子背景能够自动拉伸以适应不同长度的文本。即当文字增多时,背景看起来也会变长。 大多数应用于导航栏之中,如微信导航栏: 具体实现方法如下: 1、首先每一块文本内容是由a标签与span标签组成 2、a标签只指定高度,而不指定宽度。 3、a标签 设置好背景图后,指定一个paddi ... »

CSS Grid 读书笔记

基本概念 "MDN" 上的解释是这样的 CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, b ... »

margin负值应用

在文档流中,只能是后面的流向前面的,即文档流只能向左或向上流动,不能向下或向右移动。 第二个元素的基准线是第一个元素的右边界,第三个元素的基准线是第一、二个元素排好后最右边的边界,第四个元素的基准线是第一、二个元素排好后最右边的边界、、、 ... »

css float属性详解

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。 如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地窄。 注释:假如在一行之上只有极少的空间可供浮动元素,那... ... »

微信小程序 this.data与this.setData

一、摘要 小程序中我们会经常使用到this.data与this.setData。其中this.data是用来获取页面data对象的,而this.setData是用来更新界面的。那么他们之间的区别与联系你真的搞懂了吗? 二、正文 this.data可以获取页面data对象,但是它返回的对象到底是新的对 ... »

弹性布局----Flex

1.背景 传统的布局方案于盒状模型,依赖display + position + float 的方式实现,灵活性较差,对于那些头数的布局非常不方便. 2009年,W3C提出了一种新的方案--Flex布局. 2.什么是Flex布局? Flex是Flexible Box的缩写,意为"弹性布局",用来为盒 ... »

Vuejs开发环境搭建及热更新

Vuejs开发环境搭建及热更新 一、安装NPM 1.1最新稳定版本: npm install vue 二、命令行工具安装 国内速度慢,使用淘宝镜像: npm install -g cnpm --registry=https://registry.npm.taobao.org 注意:以后使用npm的地 ... »

论前端信息加密必须性(要不要加密、如何加密)

一、序言 最近,关注了一下关于web端登录、传输数据加密的情景。发现了一些有意思的事情。某互联网金融公司程序员做登录验证,先来一发md5加密,然后就自豪的说我的登录是加密的,外人无法破解,绝对保障用户的信息安全。事后博主发现,my gold,全站http协议,仅仅登录使用了md5加密。 ps: 偷偷 ... »

自定义滚动条样式-transition无效

问题 需求是自定义滚动条样式,然后2秒内无操作隐藏滚动条。 2s内隐藏比较麻烦,不能用css实现,只能监听容器的touch事件,然后给滚动条加个 的class。 需要在touch事件触发2s后给container加上.hide的class。为了实现过渡效果,我加了 。然而并没有用 stackover ... »

webpack4 系列教程(八): CSS Tree Shaking

CSS 也有 Tree Shaking? 是滴,随着 webpack 的兴起,css 也可以进行 Tree Shaking: 以去除项目代码中用不到的 CSS 样式,仅保留被使用的样式代码。 通常来说,造成学习和理解难度的原因,无非是无法模拟较真的生产环境来进行演练 (比如:在 js、html等... ... »

纯js购物车

效果图: 之前做过JQ的购物车,一直想写一个纯js的购物车,所以就抽空码了一个,多有不足,阅览后请指教 <!DOCTYPE html><html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=ed ... »

CSS Modules入门教程

为什么引入CSS Modules 或者可以这么说,CSS Modules为我们解决了什么痛点。针对以往我写网页样式的经验,具体来说可以归纳为以下几点: 全局样式冲突 过程是这样的:你现在有两个模块,分别为A、B,你可能会单独针对这两个模块编写自己的样式,例如a.css、b.css,看一下代码 下面是 ... »

css随堂笔记(二)

css sub注释 注释不能嵌套 sub生成结构代码快捷 复合选择器 1。后代选择器 语法:选择器1 选择器2 选择器3 { 属性名:属性值 } 2.子代选择器 子代选择器语法: 选择器1>选择器2>选择器3 { 属性名:属性值; } 注意:子代选择器只能选择直接子元素(只能选择儿子) 3.交集选择 ... »

jquery仿移动端支付宝键盘

最近做项目时碰到一个需求,就是在移动端支付页面点击支付按钮弹出一个支付键盘,类似于支付宝的那种。由于项目只是单纯的手机网站,而并非app,所以这个功能得由前端来实现。话不多说,先上图看看效果。 尼玛,这不就是支付宝app那个支付键盘吗? 没错,咱们UI就是参照支付宝做的这个键盘。你可能会问,为什么不 ... »