当前位置:文档之家› HTML5+CSS3构建同页面表单间的动画切换

HTML5+CSS3构建同页面表单间的动画切换

HTML5+CSS3构建同页面表单间的动画切换
HTML5+CSS3构建同页面表单间的动画切换

摘要:如何在HTML5中,使用CSS3的目标伪类:target来创建注册和登录两个表单、并实现它们在同一个页面中的显示转换。

【CSDN编译】导读:有开发者表示,HTML5将给个人开发者带来更多机遇。下面的稿件详细描述了一个唯美的动画效果,它实现了在同一个页面中进行登录表单和注册表单的转换。这些效果,完全由HTML5和CSS3实现。文章后面附上了三种不同风格的显示转换效果、以及源码下载。既可为网页瘦身,又可实现漂亮的网页效果,快快收藏吧。

这篇稿件将描述如何在HTML5中,使用CSS3的目标伪类“:target”来创建注册和登录两个表单、并实现它们在同一个页面中的显示转换。此演示目的是向用户展示从登录表单点击标注有“Join us”的按钮链接到注册表单的动画效果。我们将在文章末尾附上本实例的源码下载地址。

点击右下方Join us按钮,登录表单隐藏,注册表单显现

请注意,此实例只用于演示目的,它只能在支持“:target”伪类的浏览器中正常显示出来。HTML部分

在HTML中定义有两个表单,其中一个表单已用CSS隐藏使之不可见。来看看代码:1

2

3

4

5

6

7

8

Log in

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25Not a member yet ?

26Join us

27

28

29

30

31

32

33

Sign up

34

35

36

37

38

39

40

41

42

43

data-icon="p">Y our password

44

required="required" type="password" placeholder="eg. X8df!90EO"/>

45

46

47

data-icon="p">Please confirm your password

48

name="passwordsignup_confirm" required="required" type="password" placeholder="eg.

X8df!90EO"/>

49

50

51

52

53

54Already a member ?

55 Go and log in

56

57

58

59

60

61

可以看到在上面的代码中,使用了一些HTML5不错的新功能。比如在input type方面,实现密码自动隐藏用户键入点替换(当然这取决于浏览器是否支持)。用浏览器检查输入类型的电子邮件是否是正确格式等。

有两个环节要记住。你可能已经注意到表单项部的两个链接。当我们点击并触发目标伪类时,我们就能通过“锚”标记(HTML中一种跳转定位方式,一般用于长网页)在原网页中跳到合适的位置,而不用另打开一个新网页。第二个动作与所用图标、字体相关。我们为显示的图标使用一个数据属性。在HTML中通过设置“icon_character”,就可以选择一个CSS来控制所有的图标风格样式。(这里对于锚标记的使用可能会有些糊涂,但看到后面就会明白了。)

CSS部分

这里将会出现一些CSS3的技巧代码,请注意,可能有的浏览器目前还不支持CSS3而无法正常显示。

两个CSS定义。(后面会说明为什么要定义两个CSS的原因。)

首先,为需要显示的区域定义一个外观。

62#subscribe,

63#login{

64position: absolute;

65top: 0px;

66width: 88%;

67padding: 18px 6% 60px 6%;

68margin: 0 0 35px 0;

69background: rgb(247, 247, 247);

70border: 1px solid rgba(147, 184, 189,0.8);

71box-shadow:

720pt 2px 5px rgba(105, 108, 109, 0.7),

730px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;

74border-radius: 5px;

75}

76#login{

77z-index: 22;

78}

这里定义了投影,以及如文章开始的那张图上所示的蓝色辉光。并赋值z-index为22。下面是关于背景图片样式的代码:

79/**** general text styling ****/

80#wrapper h1{

81font-size: 48px;

82color: rgb(6, 106, 117);

83padding: 2px 0 10px 0;

84font-family: 'FranchiseRegular','Arial Narrow',Arial,sans-serif;

85font-weight: bold;

86text-align: center;

87padding-bottom: 30px;

88}

89

90/** For the moment only webkit supports the background-clip:text; */

91#wrapper h1{

92background:

93-webkit-repeating-linear-gradient(-45deg,

94rgb(18, 83, 93) ,

95rgb(18, 83, 93) 20px,

96rgb(64, 111, 118) 20px,

97rgb(64, 111, 118) 40px,

98rgb(18, 83, 93) 40px);

99-webkit-text-fill-color: transparent;

100-webkit-background-clip: text;

101}

102

103#wrapper h1:after{

104content:' ';

105display:block;

106width:100%;

107height:2px;

108margin-top:10px;

109background:

110linear-gradient(left,

111rgba(147,184,189,0) 0%,

112rgba(147,184,189,0.8) 20%,

113rgba(147,184,189,1) 53%,

114rgba(147,184,189,0.8) 79%,

115rgba(147,184,189,0) 100%);

116}

注意,由于目前只有WebKit浏览器支持background-clip: text,为了在适应不同浏览器,还要创建一个H1标题样式:带条纹背景的文本样式。由于background-clip: text只适用于WebKit,所以这里用WebKit作前缀,这也是为什么要把CSS分成两部分,并只使用来定义的原因。用WebKit作前缀是不太好的做法,仅用于这种演示示例。现在,WebKit的文本颜色透明度属性可以派上用场了:它可以实现透明效果的背景样式。

表单上,标题下方那条水平线的样式也由一个after伪类控制。这里使用了一个2px的高度和两边淡出的效果。

现在,接着进行样式定义。

117/**** advanced input styling ****/

118/* placeholder */

119::-webkit-input-placeholder {

120color: rgb(190, 188, 188);

121font-style: italic;

122}

123input:-moz-placeholder,

124textarea:-moz-placeholder{

125color: rgb(190, 188, 188);

126font-style: italic;

127}

128input {

129outline: none;

130}

为输入样式定义outline属性,以便用户能迅速输入正确信息。如果你不打算定义outline,那也应该使用:active 和:focus来定义这些输入样式的状态。

131/* all the input except submit and checkbox */

132#wrapper input:not([type="checkbox"]){

133width: 92%;

134margin-top: 4px;

135padding: 10px 5px 10px 32px;

136border: 1px solid rgb(178, 178, 178);

137box-sizing : content-box;

138border-radius: 3px;

139box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;

140transition: all 0.2s linear;

141}

142#wrapper input:not([type="checkbox"]):active,

143#wrapper input:not([type="checkbox"]):focus{

144border: 1px solid rgba(91, 90, 90, 0.7);

145background: rgba(238, 236, 240, 0.2);

146box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;

147}

这里我们并不全是用伪类去定义输入样式,除了checkbox。因为删除了outline属性,所以这里使用了 a :focus 和:active 状态定义。自从不再为输入样式使用:before 和:after伪类后,就使用图标的label标签进行设置。这里使用了fontomas库中的一些漂亮图标。还记得data-icon 的属性吗?要把信息传递到正确的地方。这里使用data-icon=?u? 来表示用户,…e? 表示email, …p? 表示密码。一旦确定的信件,下载字体,用fontsquirrel字体引擎将这些信息转换成@font-face兼容格式。

148@font-face {

149font-family: 'FontomasCustomRegular';

150src: url('fonts/fontomas-webfont.eot');

151src: url('fonts/fontomas-webfont.eot?#iefix') format('embedded-opentype'),

152url('fonts/fontomas-webfont.woff') format('woff'),

153url('fonts/fontomas-webfont.ttf') format('truetype'),

154url('fonts/fontomas-webfont.svg#FontomasCustomRegular') format('svg');

155font-weight: normal;

156font-style: normal;

157}

158

159/** the magic icon trick ! **/

160[data-icon]:after {

161content: attr(data-icon);

162font-family: 'FontomasCustomRegular';

163color: rgb(106, 159, 171);

164position: absolute;

165left: 10px;

166top: 35px;

167width: 30px;

168}

不用为每个图标指定一个类,而是使用content: attr(data-icon) 来检查data-icon属性信息。所以只需要定义字体、颜色和位置。

现在,为两个表单中的提交按钮定义样式。

169/*styling both submit buttons */

170#wrapper p.button input{

171width: 30%;

172cursor: pointer;

173background: rgb(61, 157, 179);

174padding: 8px 5px;

175font-family: 'BebasNeueRegular','Arial Narrow',Arial,sans-serif;

176color: #fff;

177font-size: 24px;

178border: 1px solid rgb(28, 108, 122);

179margin-bottom: 10px;

180text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);

181border-radius: 3px;

182box-shadow:

1830px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,

1840px 0px 0px 3px rgb(254, 254, 254),

1850px 5px 3px 3px rgb(210, 210, 210);

186transition: all 0.2s linear;

187}

188#wrapper p.button input:hover{

189background: rgb(74, 179, 198);

190}

191#wrapper p.button input:active,

192#wrapper p.button input:focus{

193background: rgb(40, 137, 154);

194position: relative;

195top: 1px;

196border: 1px solid rgb(12, 76, 87);

197box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;

198}

199p.login.button,

200p.signin.button{

201text-align: right;

202margin: 5px 0;

203}

这里是一个创建边框投影的技巧,你可以随意设置一条或多条边框投影。这里使用length value来创建一个“假”的第二条边框,宽度为3px,无模糊效果。接着定义复选框的样式:204/* styling the checkbox "keep me logged in"*/

205.keeplogin{

206margin-top: -5px;

207}

208.keeplogin input,

209.keeplogin label{

210display: inline-block;

211font-size: 12px;

212font-style: italic;

213}

214.keeplogin input#loginkeeping{

215margin-right: 5px;

216}

217.keeplogin label{

218width: 80%;

219}

为表单使用重复线性渐变的样式,以实现条纹背景效果。

220p.change_link{

221position: absolute;

222color: rgb(127, 124, 124);

223left: 0px;

224height: 20px;

225width: 440px;

226padding: 17px 30px 20px 30px;

227font-size: 16px ;

228text-align: right;

229border-top: 1px solid rgb(219, 229, 232);

230border-radius: 0 0 5px 5px;

231background: rgb(225, 234, 235);

232background: repeating-linear-gradient(-45deg,

233rgb(247, 247, 247) ,

234rgb(247, 247, 247) 15px,

235rgb(225, 234, 235) 15px,

236rgb(225, 234, 235) 30px,

237rgb(247, 247, 247) 30px

238);

239}

240#wrapper p.change_link a {

241display: inline-block;

242font-weight: bold;

243background: rgb(247, 248, 241);

244padding: 2px 6px;

245color: rgb(29, 162, 193);

246margin-left: 10px;

247text-decoration: none;

248border-radius: 4px;

249border: 1px solid rgb(203, 213, 214);

250transition: all 0.4s linear;

251}

252#wrapper p.change_link a:hover {

253color: rgb(57, 191, 215);

254background: rgb(247, 247, 247);

255border: 1px solid rgb(74, 179, 198);

256}

257#wrapper p.change_link a:active{

258position: relative;

259top: 1px;

260}

现在,我们已经定义了两个漂亮的样式了,但在一个时间段里,只需要显示一个。所以,现

在用动画效果来实现。

创建切换动画

首先是将不透明度设为0以隐藏表单:

261#register{

262z-index: 21;

263opacity: 0;

264}

还记得吗?前面登录表单中z-index的值为22。上面这段代码的动作是把z-index的值定义为21,让它可以处在登录表单的上一层(指显示顺序,数字小的显示在前面)。

重点部分:target目标伪类。这里将使用“锚”进行两个表单间的显示过渡。“锚”链接的一般用法,是在页面上的两处实现跳转。但这里并不希望跳转到别处,只需要表单显示的切换。这里的诀窍在于表单顶部的两个小环节中,当点击“锚”标记时,触发第一个表单的显示设置“none”。这样,就避免了任何的页面跳转。

265#toregister:target ~ #wrapper #register,

266#tologin:target ~ #wrapper #login{

267z-index: 22;

268animation-name: fadeInLeft;

269animation-delay: .1s;

270}

当点击登录表单上的“Join us”按钮时,就会触发#toregister,然后通过选择找到#register,激活动画fadeInLeft。使隐藏的表单慢慢显现出来,并同时改变其z-index值,让这个表单出现在其它表单的上面。

下面是实现这种动画样式的代码。

271.animate{

272animation-duration: 0.5s;

273animation-timing-function: ease;

274animation-fill-mode: both;

275}

276@keyframes fadeInLeft {

2770% {

278opacity: 0;

279transform: translateX(-20px);

280}

281

282100% {

283opacity: 1;

284transform: translateX(0);

285}

286}

表单用“disappearing”的动画形式从左边淡出:

287#toregister:target ~ #wrapper #login,

288#tologin:target ~ #wrapper #register{

289animation-name: fadeOutLeftBig;

290}

291

292@keyframes fadeOutLeft {

2930% {

294opacity: 1;

295transform: translateX(0);

296}

297

298100% {

299opacity: 0;

300transform: translateX(-20px);

301}

302}

上面的动画实现代码来自Dan Eden的animate.css,把其中的动画名称修改为自己的表单对象就可以实现。里面还有一些其他的自定义动画。

(需要注意的是,有些浏览器还不支持background-clip: text。IE9中,过渡和动画效果就无法显示,IE8及更低版本的浏览器还不支持CSS3中的伪类。)

英文原址:https://www.doczj.com/doc/2a18250479.html,

实例演示地址:

从左开始渐变显示的动画效果

https://www.doczj.com/doc/2a18250479.html,/Tutorials/LoginRegistrationForm/index.html

从左滑动呈现的动画效果

https://www.doczj.com/doc/2a18250479.html,/Tutorials/LoginRegistrationForm/index2.html

从小放大的动画效果

https://www.doczj.com/doc/2a18250479.html,/Tutorials/LoginRegistrationForm/index3.html

点击开始源代码下载

https://www.doczj.com/doc/2a18250479.html,/Tutorials/LoginRegistrationForm/LoginRegistrationForm.zip

方便调用27种FLASH图片切换特效代码

方便调用27种FLASH图片切换特效 网上一直都是说,用flash做的课件功能比PPT强大些,但是用flash做课件时,其实面临着一个尴尬的问题,就是遇上课件中需要切换显示大量图片时,做起来相当麻烦,至少比在PPT中做时要麻烦许多,网上也流传着用transitions 及tween类切换图片,但要么不实用,要么效果单调,经过慢慢分析这两种类的用法后,牺牲一个下午终于在flash中把flash中切换显示图片这个另人头痛的问给解决了,共27种图片切换特效,以后做课件又可以省不少力了,直接准备好图像文件调用即可,代码帖出如下: //首先准备十四张图片在 .fla 文件相同目录下,文件名分别为: 1.jpg ,2.jpg,...,14.jpg //该段代码在第一个关键帧复制过去即可 //该段代码在理解时,要弄清flash as 中的数组时面向对象的,否则该段程序可能有些不好懂的哦 import mx.transitions.*; import mx.transitions.easing.*; fscommand("fullscreen", true); //全屏 var showID:Number = 0; //特效类型代码 var mc_array = new Array(14);//定义数组准备存储14个mc对象,其中每个mc对象在后面将加载图片 //定义数组存储27种图片切换参数,其中各特效具体参数还可直接在其中更改 var str_array = new Array(27); //flash 中的数组是面向对象的,大家学了C后这点变通应该没有问题吧 //遮帘(纵向、横向) str_array[0] = {type:Blinds, direction:Transition.IN, duration:2, easing:None.easeNone, numStrips:20, dimension:0}; str_array[1] = {type:Blinds, direction:Transition.IN, duration:2, easing:None.easeNone, numStrips:20, dimension:1}; //淡化过渡(淡入、淡出) str_array[2] = {type:Fade, direction:Transition.IN, duration:3, easing:None.easeNone}; str_array[3] = {type:Fade, direction:Transition.OUT, duration:3, easing:None.easeNone}; //飞行过渡(九个不同的方向) str_array[4] = {type:Fly, direction:Transition.IN, duration:3, easing:Elastic.easeOut, startPoint:1}; str_array[5] = {type:Fly, direction:Transition.IN, duration:3, easing:Elastic.easeOut, startPoint:2}; str_array[6] = {type:Fly, direction:Transition.IN, duration:3, easing:Elastic.easeOut, startPoint:3}; str_array[7] = {type:Fly, direction:Transition.IN, duration:3, easing:Elastic.easeOut, startPoint:4};

如何把flash动画转换为gif格式动态图片

Magic Swf2Gif不但可以快速高效地将SWF格式的Flash动画转换为GIF 动画图片,而且在转换之后还能完整地保持原Flash动画中的动画帧数 和分辨率。 第一步:导入SWF 动画文件 点击软件界面中的“Add Files”按钮,在弹出的对话框中选择需要转换的Flash动画文件,在添加文件时可以一次选择多个Flash动画文件批量导入,当然也可以点击“Add DIR”按钮将某个目录下的SWF文件全部 导入。 在导入文件时有一个特色,那就是除了可以添加文件和目录之外,还可以在点击“IE Cache”按钮后直接将IE缓存中的SWF文件添加进列表中。 第二步:截取要转换的动画片段 在SWF文件列表中,选择一个Flash动画。这时我们可以看到原来的“文件信息”按钮已经显示为“W:500,H:400,T:2496,R:25”字样,如图所示,这是什么意思呢?点一下按钮你就知道了。原来,这表示该Flash动画的宽度为500像素,高度为400像素,总帧数为2496帧,帧频为25 帧/秒。 现在需要设置欲转换动画的起止点,以去掉自己不想要的开始或结尾片段。在右边的播放框中,拖动下方滑块或者用播放按钮将Flash动画停留在转换部分的起始处(如第1000帧),随后点击动画下方的“[”按钮在 此处做上起始标记。

同样,拖动滑块或者用播放按钮将Flash动画停留在转换部分的结尾处(如第1500帧),并点击“]”按钮在此处做上结束标记。 第三步:GIF动画的输出设置 点击“Options”按钮,先在“Resize”选项卡中选择生成GIF动画的图片尺寸大小,既可以选择预设的大小(默认为原始大小),也可以自定义大小,然后在“GIF Frame Rate”选项卡中设置GIF动画的帧率。 注意:当减少帧频的时候,软件将不会更改电影的播放速度,只是放弃一些帧以减小GIF文件的体积。最后切换到“目录”选项卡设置好转换后 的GIF文件的输出目录。 当一切准备完毕,我们就可以点击“Convert GIF”按钮,很快即可将所选定的Flash动画片段转换为GIF格式的动画文件。

10个导航栏的设计技巧

10个导航栏设计技巧 想要全面掌握UI设计技能,需要自己付出更多的努力,除了专业的学习,在平常还要多看书,多动手,进行一些实践训练,这样才能更好地提升自己的能力,在工作中游刃有余,推荐10个导航栏设计技巧,希望对学习UI的你有所帮助! 1、超大菜单栏 即使许多设计师不喜欢这样的设计,但是对于许多客户而言,它依然是一个客户反响很好的设计方案。 不过过大的导航栏可能还是存在一些可用性问题的。通常,超大的导航栏存在的主要原因在于,导航栏项目很多难以缩减。对于网站的运营者而言需要仔细考量这件事情,或者通过搜集来的数据来做设计决策的论据。 2、加入显眼的搜索框 用户常常使用搜索来筛选信息,更快更直接地获取重要的信息,所以,搜索框应该突出展示。它应该出现在每个页面上,应该和主导航栏一起存在,应该够大也易于访问。 用户对于搜索的需求是刚性的,不要试图打破这种客观存在的规律,尽量让搜索融入到主导航当中来吧。(确保输入框足够大,可以输入,并且足以一次显示常见的搜索内容) 3、限制导航内条目数量 作为设计师,你需要预测用户经常访问的内容,将最重要、最常用到的条目置于导航栏当中。值得一提的是,几乎每个网站的导航中都会包含搜索、关于我们、首页,而电商类网站则通常会包含购物车、购买的按钮。 但是无论如何,永远将最关键、最重要的导航类目让用户看到,才是导航所应该做到的事情,换句话来说,就是关键内容驱动导航分类。

4、更聪明的导航机制 好的导航设计,能让用户能在页面和页面之间合理快速切换,网站不同的内容和功能之间是有一定的自然逻辑的,这个自然逻辑可以作为导航设计的一个重要参考。 在这个用户体验高度个性化的时代,网页导航的玩法可以更加多样。以Amazon 为例,当你登录了之后,会发现导航开始围绕着你的信息进行了调整,导航栏从通用的条目变为更贴近你的个人情况的样式,其中包括最近的购买记录,信用额度和Amazon 的服务信息等。 5、正确地排布导航内的条目 导航内的元素的排布顺序和条目内容同样重要。导航栏两头的条目是最引人注意的,并且也通常是用户点击最多的,所以作为设计者,你需要特别注意这些条目的设计。 对于这一点,还有不少科学研究和理论支持。比如,序列位置效应指的就是人会更容易记住列表的开头和结尾的条目。新近效应说的是用户更容易记住最新看到的条目,而首位效应说的是,相比于列表中间的内容,用户更容易记住列表开头的几个条目。 6、垂直导航 垂直导航设计也是目前越来越流行的设计之一。最常见的是垂直导航,是侧边栏导航,它和许多软件的UI设计不谋而合。侧边栏导航对于如今的许多网站是个合理的选择,尤其是诸如长滚动式的页面。 侧边栏导航通常为常驻式的,让用户可以随时定位,快速跳转,并且其中所能承载的元素相对比顶部导航更多。垂直导航尤其要注意条目之间的空间间隔。 7、长滚动页面上使用悬浮导航 对于长滚动页面而言,导航设计是否可靠是一件颇为重要的事情,无论导航是在顶部、侧边栏还是在底部,它最好能够悬浮置顶,不论用户滚动到哪个

Flash制作图片切换特效

用Flash制作图片切换特效 图片切换是网页中最为常见的效果,一般的广告牌都是通过图片切换制作的。在这里我向大家介绍常见的图片切换方式:百叶窗的图片切换效果。 在本文中主要学习到的内容有:两层上不同图片的导入和精细的控制;遮罩和形状变化组合的应用。 操作步骤: 1、按Ctrl N新建一个flash文件,执行“File/Import”命令(快捷键为:Ctrl R),然后从弹出的对话框中选择你要引用的图片文件,单击OK按钮确认,按Ctrl Alt I键调出Info面板,将宽(W)设为:285,高(H)设为:220。 2、按Ctrl B将导入的图片打碎,选择工具栏中的椭圆形工具,设置好Stroke面板的参数后,按住Shift键,在工作区中拖动鼠标,画一个图形,选中该图形,按Ctrl Alt I键在Info面板中将宽(W)设为:240,高(H)设为:216,将圆形移动图片中央,选中图形及图形外边的图片,按delete键,将其删除。 3、单击时间线窗口左下解的“ ”按钮,新建一个层:Layer2,用一面的方法制作另一个图形,使得Layer2上的图片刚好遮掩在Layer1上。 4、再新建一个层Layer3,选择工具栏中的矩形工具,将其属性区中的线框设置成“无线框”,填充颜色设置为“黑色”,在工作区中拖动鼠标画一个长方形。 5、用箭头工具选中该长方形,然后然后执行

“Insert/converttosymbol”命令(快捷键为F8键)把它转换为:Graphics 符号,命名为:百叶;按Ctrl F8键再新建一个符号,符号类型为:Graphics,命名为:百叶2,进入其编辑环境,按Ctrl L键打开符号库,将符号百叶拖入工作区,并适当调整其位置,分别在第15、25、40帧处按F6插入一关键帧,分别选择第15帧和第25帧,在Info 面板中将高度设置为1,按照建立路径。 时间轴上窗口左上角上的Scene1回到主场景,并删除长方形图片,按Ctrl L打开符号库,将符号百叶1拖入场景中,将其移动到图片最下方,调整其位置,用鼠标右键单击Layer3层的名称,从弹出的菜单中选择Mask项,这时Layer3层变成了遮罩层,遮罩区域之外的Layer2层中的图片将显示不出来。 7、新增8个层,按住Shift键,选中Layer2和Layer3,用鼠标右键单击被选中的任意一帧,从弹菜单中选择CopyFrames,用鼠标右键单击Layer4层的第1帧,从弹出的菜单中选择PasteFrames,这时Layer4将变成了复制后的Layer2和Layer3遮罩层, 8、单击复制后的遮罩层,按键盘上的向上箭头键,移动选区,移动后的位置 9、用同样的方法,依次在Layer5至Layer11中分别复制Layer2和Layer3图层,将各个遮罩层中的百叶1向上移动,并顺次向上连接,按住Shift键,选中所的层中的第42帧,并用鼠标右键单击它在弹出的菜单中选择InsertFrame项(快捷键为:F5),使所有层的帧都增加42帧,然后单击时间轴窗口层名称上方的按钮,锁住所有的

CSS实现导航条Tab切换的三种方法

CSS实现导航条Tab切换的三种方法 前面的话 导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局 buju 根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成。要实现上图所示的布局效果,有两种布局方法:语义布局和视觉布局【语义布局】 从语义布局的角度来看,每一个导航标题和其对应的导航内容应该是一个整体

相关文档 最新文档