css背景图层叠滑动门特效原理

2024-10-19

CSS——滑动门技术及应用

先来体会下现实中的滑动门,或者你可以叫做推拉门: 滑动门出现的背景制作网页时,为了美观,常常需要为网页元素设置特殊形状的背景,比如微信导航栏,有凸起和凹下去的感觉,最大的问题是里面的字数不一样多,咋办? 为了使各种特殊形状的背景能够自适应元素中文本内容的多少,出现了CSS滑动门技术.它从新的角度构建页面,使各种特殊形状的背景能够自由拉伸滑动,以适应元素内部的文本内容,可用性更强. 最常见于各种导航栏的滑动门. 核心技术核心技术就是利用CSS精灵(主要是背景位置)和盒子padding撑开宽度,

slidedoor滑动门特效

slidedoor滑动门特效 exportWidth:暴露门的宽度 width imagesWidth:单张图片的宽度width 每道门每次偏移量 translate=imagesWidth-exportWidth; 当前鼠标hover图片时,偏移后的left值应为当前图片images[i].style.left与每道门的偏移量之差注意:当前鼠标hover图片之前时,应该让每道门进行复位计算公式: images[i].style.left=images[i].style.left-trans

CSS 滑动门案例

一.什么是滑动门特效为了使各种特殊形状的背景能够自适应元素中文本内容的多少,出现了CSS滑动门技术.它从新的角度构建页面,使各种特殊形状的背景能够自由拉伸滑动,以适应元素内部的文本内容,可用性更强. 最常见于各种导航栏的滑动门. 二.核心技术核心技术就是利用CSS精灵(主要是背景位置)和盒子padding撑开宽度, 以便能适应不同字数的导航栏. 核心代码: <li> <a href="#"> <span>导航栏内容</span> &l

jquery插件之tab标签页或滑动门

该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的tab标签页或滑动门特效,在此插件中默认使用的是鼠标滑过事件,您也可以根据自己的实际需求将滑过事件hover改为点击事件click.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1

从零开始学 Web 之 CSS（五）可见性、内容移除、精灵图、属性选择器、滑动门

大家好,这里是「 Daotin的梦呓」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目.现在就让我们一起进入 Web 前端学习的冒险之旅吧! 一.CSS可见性 overflow: hidden; /*溢出隐藏 */ visibility: hidden; /* 隐藏元素隐藏之后还保留原来的位置.*/ display: none; /* 隐藏元素隐藏之

CSS - 滑动门技术

1. 概念: 1.1 为了使各种特殊形状的背景能够自适应元素中文本内容的多少,出现了CSS滑动门技术. 1.2 使各种特殊形状的背景能够自由拉伸滑动,以适应元素内部的文本内容,可用性更强. 1.3 最常见于各种导航栏的滑动门. 2. 原理: 2.1 利用CSS精灵Sprite(主要是背景位置position)和盒子padding撑开宽度, 以便能适应不同字数的导航栏. 2.2 原背景图--> 切开左边 --> 剩下的右边随着文字的增多从左往右滑动(这也是文字增长的方向) 3. 具体做法: 经典

HTML+CSS技术实现网页滑动门效果

一.什么是滑动门大家在网页中经常会见到这样一种导航效果,因为使用频率广泛,所以广大的程序员给它起了一个名字,叫做滑动门.在学习滑动门之前,首先你要了解什么是滑动门. 小米官网,网页滑动门效果二.实现滑动门所需技术简单HTML基础知识简单的CSS基础样式 CSS定位三.如何实现滑动门1.准备好一段HTML代码 <div class="bg"> <ul> <li> <a href="#">手机电话卡</a

李洪强和你一起学习前端之(9)规避脱标,CSS可见性,滑动门案例

1 复习昨天知识 1.1 浮动特点: >浮动的元素不占位置(脱标) >可以将行内元素转化为行内块元素 >块级元素在一行上显示 >设置了浮动的元素,影响其后面的元素作用: >解决文字图片环绕问题 >制作网页导航栏 >网页布局清除浮动: 清除浮动的影响定位的分类: 1.2定位静态定位(static) 绝对定位(absolute)看脸型 >绝对定位绝对脱标 >行内元素转化为行内块元素 >如果父盒子没有设置定位,以浏览器左上角为基准设

认识CSS中精灵技术（sprite）和滑动门

前端之HTML,CSS(十) 精灵技术与精灵图精灵技术本质精灵技术是一种处理网页背景图像的方式,实质是将小的背景图片拼接到一张大的背景图像上.拼接成的大图被称为精灵图.浏览器打开网页时,每一个图片显示都是浏览器向服务器发送一次请求的结果,精灵技术是把多个小图片拼接为一个大图,有效减少了浏览器请求服务器的次数,与此同时也提高了页面的加载速度. 精灵技术使用精灵技术实际是通过background属性限定盒子大小以后,通过background-position属性调整背景图片的位置,使得一个大图

李洪强和你一起学习前端之(7)定位盒子 css可见性滑动门案例

今天是2017年3月23日 1 复习昨天知识 1.1浮动 Float:left | right 特点: ->浮动的元素不占位置(脱标) ->可以将行内元素转化为行内块元素 ->块级元素在一行上显示 ->设置了浮动的元素,影响其后面的元素作用: 解决了文字图片环绕问题制作网页导航栏网页布局清除浮动清除浮动的影响 1.2定位静态定位(static) 绝对定位(absolute)看脸型绝对定位绝对脱标(不占位置) 行内元素转化为行内块元素如果父盒子没有设置定位,以浏览器左

css：滑动门

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

CSS基础(滑动门，雪碧图，网页布局）

3.11.2017 这一篇主要是关于滑动门技术的学习,还有雪碧图(sprite),也就是精灵图,还有一点昨天的css可见性的回顾,下面先来回顾下吧 CSS可见性(元素可见性) overflow: hidden: 将超出部分隐藏(部分隐藏) display: none; 元素隐藏(全部隐藏)(隐藏元素不占位置) display: block; 显示元素 visibility: hidden: 隐藏元素(全部隐藏)(隐藏元素占位置) 然后就是关于滑动门的讲解,现在的页面中好多地

CSS——滑动门

在背景图片中可以对图片进行圆角设置,但是这样是写死的.如下图: 情况分析:如果我们li标签中的文字变少了或者变多了,我们就需要重新定义背景图片.所以我们使用滑动门技术.它将图片特殊地方进行分割.宽度利用的是字体的宽度,在加上padding进行调整. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type="te

CSS滑动门

如下图所示,每个导航栏目的文字个数不一样多,有的长,有的短,如何用一张背景图片,适应不同字数”的导航条,“滑动门”设计的非常巧妙,采用两个相同的背景图像,一左一右,一个负责提供左边框,一个负责提供右边框.如下图所示,当需要容纳较多文字时,重叠就少一些,而需要较少文字时,重叠就多一些.两个图像可以滑动,重叠的部分的宽度会根据里面的文字的字数而自动调整,就像两扇推拉门一样,因此这种技术就叫做“滑动门”.(鼠标经过有凹凸感) 图片准备如下: html结构: <body> <div class=

css滑动门技术

滑动门的核心技术: 为了使各种特殊形状的背景能够自适应元素中文本内容的多少,以使自由拉伸滑动利用css精灵(主要是背景位置)和盒子padding撑开宽度,以便适应不同字数的导航栏一般经典布局 <li> <a href="#"> <span>导航内容</span> </a> </li> 样式设置 a { margin: 100px; display: inline-block; height: 33px; bac

html+css第八篇滑动门和可爱的css精灵

滑动门: 滑动门并不是一项全新的技术,它是利用背景图像的可层叠性,并允许他们在彼此之上进行滑动,以创造一些特殊的效果. CSS精灵 CSS Sprites在国内很多人叫CSS精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去. CSS Sprites并不是一门新技术,目前它已经在网页开发中发展得十分成熟.大部分公司要求前端工程师必须使用CSS 精灵,处理图片: CSS精灵优点: 利用CSS 精灵能很好地减少了网页的http请求次数,从而大大的提高了页面

css滑动门制作圆角按钮

之前做项目的时候,基本都是将圆角背景图切成三块,故而每次用的标签都超级多,a标签中总是包含三个span,然后里面还得放按钮,导航冗余标签极多. 事实上是之前理解的滑动门的精髓不够到位. 现在有两种方式. 效果展示:http://runjs.cn/detail/evk8nkc8 先上传要用的两张图片吧. btnBg.png bg.png <!doctype html>

CSS 小结笔记之滑动门技术

所谓的滑动门技术,就是指盒子背景能够自动拉伸以适应不同长度的文本.即当文字增多时,背景看起来也会变长. 大多数应用于导航栏之中,如微信导航栏: 具体实现方法如下: 1.首先每一块文本内容是由a标签与span标签组成 <a href="#"> <span></span> </a> 2.a标签只指定高度,而不指定宽度. 3.a标签设置好背景图后,指定一个padding-left值,大小与左侧半圆大小相同,(这样保证左边背景不变,中间的背景进

css+html应用实例1：滑动门技术的简单实现

关于滑动门,现在的页面中好多地方都会用到滑动门,一般用作于导航背景,它的官方解释如下: 滑动门:根据文本自适应大小,根据背景的层叠性制作,并允许他们在彼此之上进行滑动,以创造出一些特殊的效果. 为什么很多人喜欢用滑动门呢,因为有些时候导航的字体长度不一致,长长短短实在不好弄背景图片之类啥的,如果单独根据不同的长度调用不同的背景图片太麻烦不说服务器压力也太大,所以滑动门技术应运而生,它可以根据元素本身的长度而调节背景图片的长度,至始至终只用到两张图片,网页加载速度提高不说,程序员工作量也减少了.

Javascript学习笔记2.2 Javascript与DOM选项卡（滑动门）案例详解

学习了DOM的知识,今天开始做些练习,想到了一个网页滑动门的特效,见下图: 1.通过建立索引实现 <!doctype html> <html> <head> <meta charset="utf-8"> <title>js简单滑动门</title> <style type="text/css"> *{ padding:0; margin:0; font-size:14px;} li{

css背景图层叠滑动门特效原理

热门专题