皇家科目!将Union Jack彩旗添加到您的网站

主编Dan Oliver写道:“领主,女士们,尊敬的英联邦成员,以及其他人(可能是你们),我们很高兴能够在.net杂志的团队中赠送最优秀的礼物。

“四月二十九日看到我们自己的威廉王子与工人阶级的海报女孩凯特米德尔顿结婚了。为纪念这个特殊的日子,哪位权威人士认为这将是最大的庆祝活动,因为英国的每个人都发现4月29日是在国定假日,我们与CSS3和动画忍者合作安东尼卡尔扎迪拉。我们一起为您带来我们认为最好(唯一)动画,CSS3,联盟杰克彩旗,您可以在互联网上找到它。 (而且我们知道它在技术上应该被称为'联盟旗帜',但这听起来很垃圾!)

“所以,在你的网站上添加一些彩旗,并与我们一起庆祝盛大和仪式的这一天,因为我们希望Kate和Wills结婚时没有压力,压迫入侵和刺痛行动。让bunting慢慢摇摆,就像Anthony Calzadilla解释所有......“

Let's celebrate: Ops editor Tom May, buntmeister Anthony Calzadilla, editor-in-chief Dan Oliver & staff writer Tanya Combrinck

让我们庆祝一下:Ops编辑汤姆·梅,安东尼·卡尔扎迪利亚,主编Dan Oliver和职员作家Tanya Combrinck

HTML

我们从“庆祝皇家婚礼”开始,因为我们希望这个横幅具有一定的语义价值。然后我们将短语包装在h1标签中,因为嘿,这是我们正在讨论的版税!

为了使这段代码可移植,我们将它包装在ID为“union-jack-bunting”的div元素中。我们想要显示11个标志(对于数字11没有意义,它只是我认为看起来最好的标志数量)。

现在我们必须弄乱我们干净的HTML。我们在带有span标签的“Celebrating the Royal Wedding”短语中包含前11个字符。我们将使用这些span标签来显示我们的11个标志图像。然后,我们将剩下的元素包装在一个span标签中的“Celebrating the Royal Wedding”短语中。我们将这些最终的span标记设置为none,因此只有带有flag图像元素的前11个span标记才可见。

请注意:只要将span标记中的前11个字符和一个span标记中的剩余字符包装起来,就可以使用您喜欢的任何短语。

ÇE L- E B R A I N 皇家婚礼

CSS

我们首先添加一个字符串的PNG图像,该字符串将标志保存到div,其id为“union-jack-bunting”。现在我们想隐藏人眼球的“庆祝皇家婚礼”消息,因此我们将文本缩进设置为-9999px,将h1标签设置为'position:absolute'以从文档的'flow'中删除h1标签。现在,当我们放置标志时,我们不必处理任何跨浏览器定位问题。

接下来我们将跨度设置为'display:block',我们将标志图像添加到皇家婚礼消息中所有span标签的背景中,并将标志的变换原点设置为每个跨度的顶部/中心。这将允许我们的旗帜从该中间点稍微倾斜,使得效果非常可信。

使用':nth-child'属性允许单独定位前11个跨度并将每个跨度准确地放在屏幕上我们想要它的位置,而不向每个跨度添加类名(这会使我们的代码非常丑陋)。

使用相同的':nth-child'属性,我们可以告诉最后一个跨度为'display:none',我们就完成了!我们在网站顶部有一个漂亮的英国国旗旗布。

现在让我们添加一些动画。我们再次使用':nth-child(even)'属性将动画应用于所有偶数span标记。然后我们创建一个稍微不同的动画,我们使用':nth-child(odd)'属性将动画应用于所有奇数元素。这使得每个旗帜之间产生柔和的变化,这使得运动看起来更自然。

任何WebKit用户和任何拥有支持CSS3动画的Firefox 5 Beta的用户都可以看到动画(WOO!)

#union-jack-bunting {background:url(“img / string.png”)no-repeat scroll left top transparent;身高:12px;保证金:0;填充:0;上:-3px;宽度:995px; position:relative}#union-jack-bunting h1 {position:absolute; text-indent:-9999px;}#union-jack-bunting h1 span {background:url(“img / union-jack.png”)no-repeat scroll left top transparent;显示:块;身高:30px;左:0;保证金:0;填充:0;位置:绝对;宽度:30px; -moz-transform-origin:50%0; -webkit-transform-origin:50%0;}#union-jack-bunting h1 span:nth-child(1){-moz-transform:rotate(5deg); -webkit-transform:rotate(5deg);顶部:3px;左:0; }#union-jack-bunting h1 span:nth-child(2){ -  moz-transform:rotate(2deg); -webkit-transform:rotate(2deg);左:80px;上:6px; }#union-jack-bunting h1 span:nth-child(3){ -  moz-transform:rotate(2deg); -webkit-transform:rotate(2deg);左:160px; top:8px}#union-jack-bunting h1 span:nth-child(4){ -  moz-transform:rotate(-2deg); -webkit-transform:rotate(-2deg);左:240px;上:9px; }#union-jack-bunting h1 span:nth-child(5){ -  moz-transform:rotate(-2deg); -webkit-transform:rotate(-2deg);左:320px;上:8px; }#union-jack-bunting h1 span:nth-child(6){ -  moz-transform:rotate(-3deg); -webkit-transform:rotate(-3deg);左:400px;上:6px; }#union-jack-bunting h1 span:nth-child(7){ -  moz-transform:rotate(0deg); -webkit-transform:rotate(0deg);顶部:3px;左:480px; }#union-jack-bunting h1 span:nth-child(8){ -  moz-transform:rotate(0deg); -webkit-transform:rotate(0deg);左:560px;上:6px; }#union-jack-bunting h1 span:nth-child(9){ -  moz-transform:rotate(1deg); -webkit-transform:rotate(1deg);左:640px;上:8px; }#union-jack-bunting h1 span:nth-child(10){ -  moz-transform:rotate(-1deg); -webkit-transform:rotate(-1deg);左:720px;上:9px; }#union-jack-bunting h1 span:nth-child(11){ -  moz-transform:rotate(-2deg); -webkit-transform:rotate(-2deg);左:800px;上:8px; }#union-jack-bunting h1 span:nth-child(12),#union-jack-bunting h1 span:nth-child(13),#union-jack-bunting h1 span:nth-child(14),# union-jack-bunting h1 span:nth-child(15),#union-jack-bunting h1 span:nth-child(16),#union-jack-bunting h1 span:nth-child(17),#union- jack-bunting h1 span:nth-child(18),#union-jack-bunting h1 span:nth-child(19),#union-jack-bunting h1 span:nth-child(20){display:none; } / ** /#union-jack-bunting h1 span:nth-child(odd){-webkit-animation:breeze-01 7s infinite; -webkit-animation-fill-mode:both; -moz-animation:breeze-01 7s无限; -moz-animation-fill-mode:both; }#union-jack-bunting h1 span:nth-child(even){-webkit-animation:breeze-02 7s infinite; -webkit-animation-fill-mode:both; -moz-animation:breeze-02 7s无限; -moz-animation-fill-mode:both; } @  -  webkit-keyframes breeze-01 {0%{-webkit-transform:skew(0deg,0deg);  -  webkit-animation-timing-function:ease-out; 30%{-webkit-transform:skew(10deg,0deg);  -  webkit-animation-timing-function:ease-in; 60%{-webkit-transform:skew(-5deg,0deg);  -  webkit-animation-timing-function:ease-out; } 100%{-webkit-transform:skew(0deg,0deg);  -  webkit-animation-timing-function:ease-in; @  -  webkit-keyframes breeze-02 {0%{-webkit-transform:skew(0deg,0deg); 10%{-webkit-transform:skew(0deg,0deg);  -  webkit-animation-timing-function:ease-out; } 40%{-webkit-transform:skew(15deg,0deg);  -  webkit-animation-timing-function:ease-in; 70%{-webkit-transform:skew(-4deg,0deg);  -  webkit-animation-timing-function:ease-out; } 100%{-webkit-transform:skew(0deg,0deg);  -  webkit-animation-timing-function:ease-in; @  -  moz-keyframes breeze-01 {0%{-moz-transform:skew(0deg,0deg);  -  moz-animation-timing-function:ease-out; } 30%{-moz-transform:skew(10deg,0deg);  -  moz-animation-timing-function:ease-in; } 60%{-moz-transform:skew(-5deg,0deg);  -  moz-animation-timing-function:ease-out; } 100%{-moz-transform:skew(0deg,0deg);  -  moz-animation-timing-function:ease-in; @  -  moz-keyframes breeze-02 {0%{-moz-transform:skew(0deg,0deg); } 10%{-moz-transform:skew(0deg,0deg);  -  moz-animation-timing-function:ease-out; } 40%{-moz-transform:skew(15deg,0deg);  -  moz-animation-timing-function:ease-in; } 70%{-moz-transform:skew(-4deg,0deg);  -  moz-animation-timing-function:ease-out; } 100%{-moz-transform:skew(0deg,0deg);  -  moz-animation-timing-function:ease-in; }}


翻译字数超限