摘要:如何在HTML5中,使用CSS3的目标伪类:target来创建注册和登录两个表单、并实现它们在同一个页面中的显示转换。
【CSDN编译】导读:有开发者表示,HTML5将给个人开发者带来更多机遇。下面的稿件详细描述了一个唯美的动画效果,它实现了在同一个页面中进行登录表单和注册表单的转换。这些效果,完全由HTML5和CSS3实现。文章后面附上了三种不同风格的显示转换效果、以及源码下载。既可为网页瘦身,又可实现漂亮的网页效果,快快收藏吧。
这篇稿件将描述如何在HTML5中,使用CSS3的目标伪类“:target”来创建注册和登录两个表单、并实现它们在同一个页面中的显示转换。此演示目的是向用户展示从登录表单点击标注有“Join us”的按钮链接到注册表单的动画效果。我们将在文章末尾附上本实例的源码下载地址。
点击右下方Join us按钮,登录表单隐藏,注册表单显现
请注意,此实例只用于演示目的,它只能在支持“:target”伪类的浏览器中正常显示出来。HTML部分
在HTML中定义有两个表单,其中一个表单已用CSS隐藏使之不可见。来看看代码:1
可以看到在上面的代码中,使用了一些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图片切换特效 网上一直都是说,用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};
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个导航栏设计技巧 想要全面掌握UI设计技能,需要自己付出更多的努力,除了专业的学习,在平常还要多看书,多动手,进行一些实践训练,这样才能更好地提升自己的能力,在工作中游刃有余,推荐10个导航栏设计技巧,希望对学习UI的你有所帮助! 1、超大菜单栏 即使许多设计师不喜欢这样的设计,但是对于许多客户而言,它依然是一个客户反响很好的设计方案。 不过过大的导航栏可能还是存在一些可用性问题的。通常,超大的导航栏存在的主要原因在于,导航栏项目很多难以缩减。对于网站的运营者而言需要仔细考量这件事情,或者通过搜集来的数据来做设计决策的论据。 2、加入显眼的搜索框 用户常常使用搜索来筛选信息,更快更直接地获取重要的信息,所以,搜索框应该突出展示。它应该出现在每个页面上,应该和主导航栏一起存在,应该够大也易于访问。 用户对于搜索的需求是刚性的,不要试图打破这种客观存在的规律,尽量让搜索融入到主导航当中来吧。(确保输入框足够大,可以输入,并且足以一次显示常见的搜索内容) 3、限制导航内条目数量 作为设计师,你需要预测用户经常访问的内容,将最重要、最常用到的条目置于导航栏当中。值得一提的是,几乎每个网站的导航中都会包含搜索、关于我们、首页,而电商类网站则通常会包含购物车、购买的按钮。 但是无论如何,永远将最关键、最重要的导航类目让用户看到,才是导航所应该做到的事情,换句话来说,就是关键内容驱动导航分类。
4、更聪明的导航机制 好的导航设计,能让用户能在页面和页面之间合理快速切换,网站不同的内容和功能之间是有一定的自然逻辑的,这个自然逻辑可以作为导航设计的一个重要参考。 在这个用户体验高度个性化的时代,网页导航的玩法可以更加多样。以Amazon 为例,当你登录了之后,会发现导航开始围绕着你的信息进行了调整,导航栏从通用的条目变为更贴近你的个人情况的样式,其中包括最近的购买记录,信用额度和Amazon 的服务信息等。 5、正确地排布导航内的条目 导航内的元素的排布顺序和条目内容同样重要。导航栏两头的条目是最引人注意的,并且也通常是用户点击最多的,所以作为设计者,你需要特别注意这些条目的设计。 对于这一点,还有不少科学研究和理论支持。比如,序列位置效应指的就是人会更容易记住列表的开头和结尾的条目。新近效应说的是用户更容易记住最新看到的条目,而首位效应说的是,相比于列表中间的内容,用户更容易记住列表开头的几个条目。 6、垂直导航 垂直导航设计也是目前越来越流行的设计之一。最常见的是垂直导航,是侧边栏导航,它和许多软件的UI设计不谋而合。侧边栏导航对于如今的许多网站是个合理的选择,尤其是诸如长滚动式的页面。 侧边栏导航通常为常驻式的,让用户可以随时定位,快速跳转,并且其中所能承载的元素相对比顶部导航更多。垂直导航尤其要注意条目之间的空间间隔。 7、长滚动页面上使用悬浮导航 对于长滚动页面而言,导航设计是否可靠是一件颇为重要的事情,无论导航是在顶部、侧边栏还是在底部,它最好能够悬浮置顶,不论用户滚动到哪个
用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切换的三种方法 前面的话 导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局 buju 根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成。要实现上图所示的布局效果,有两种布局方法:语义布局和视觉布局【语义布局】 从语义布局的角度来看,每一个导航标题和其对应的导航内容应该是一个整体