只要五步就可以用HTML5CSS3快速制作特效Word文件下载.docx
- 文档编号:18836775
- 上传时间:2023-01-01
- 格式:DOCX
- 页数:9
- 大小:300.98KB
只要五步就可以用HTML5CSS3快速制作特效Word文件下载.docx
《只要五步就可以用HTML5CSS3快速制作特效Word文件下载.docx》由会员分享,可在线阅读,更多相关《只要五步就可以用HTML5CSS3快速制作特效Word文件下载.docx(9页珍藏版)》请在冰豆网上搜索。
#"
>
h2>
Dudu:
/h2>
p>
最近咋没有美女发帖呢?
我一定给个头条推荐,recommend!
recommend!
/p>
/a>
/li>
汤姆大叔:
Team的一个成员去了Microsoft做SDE3,又得hirenewmember了<
技术弟弟:
O2DS和我翻译的书是一样,我一定要比他翻得快,晚上加班翻,fast!
fast!
Artech:
WCF的帖子真是少,看来我得多发点帖子让大家学习呢<
吉日嘎拉:
将权限管理、工作流管理做到我能力的极致,一个人只能做好那么很少的几件事情<
某武林高手:
低于25000块的面试再也不去了,它grandma的<
/ul>
每个note都加一个href连接,主要是为了支持键盘访问,CSS代码如下:
*{
margin:
0;
padding:
}
body{
font-family:
arial,sans-serif;
font-size:
100%;
3em;
background:
#666;
color:
#fff;
h2,p{
font-weight:
normal;
ul,li{
list-style:
none;
ul{
overflow:
hidden;
ullia{
text-decoration:
#000;
#ffc;
display:
block;
height:
10em;
width:
1em;
ulli{
float:
left;
效果如下:
第二步:
阴影和手写草体字
这一步,是我们要实现正方形的阴影效果,并且将字体改为草体(仅限英文),由于google提供了FontAPI的支持,所以我们可以直接使用了,首先添加对GoogleAPI的调用:
linkhref="
rel="
stylesheet"
type="
text/css"
然后设置引用这个字体:
ullih2
{
140%;
bold;
padding-bottom:
10px;
ullip
"
ReenieBeanie"
arial,sans-serif,微软雅黑;
110%;
关于阴影,由于各个浏览器还都不完全支持,所以需要分别处理,代码如下:
ullia
none;
#000;
#ffc;
block;
10em;
1em;
/*Firefox*/
-moz-box-shadow:
5px5px7pxrgba(33,33,33,1);
/*Safari+Chrome*/
-webkit-box-shadow:
5px5px7pxrgba(33,33,33,.7);
/*Opera*/
box-shadow:
第三步:
倾斜正方形
为了让正方形倾斜,我们需要在li->
a里添加如下代码:
-webkit-transform:
rotate(-6deg);
-o-transform:
-moz-transform:
但是为了能让正方形随机倾斜,而不是全部都倾斜,我们需要使用新的CSS3选择器,让正方形在每2个倾斜4个deg,每3个倾斜负3个deg,每6个倾斜5个deg:
ulli:
nth-child(even)a{
rotate(4deg);
position:
relative;
top:
5px;
nth-child(3n)a{
rotate(-3deg);
-5px;
nth-child(5n)a{
rotate(5deg);
-10px;
第四步:
Hover上海凯迪财税http:
//101.1.20.46/和Focus时放缩正方形
想在hover和focus的时候达到缩放的效果,我们需要添加如下代码:
ullia:
hover,ullia:
focus{
10px10px7pxrgba(0,0,0,.7);
10px10px7pxrgba(0,0,0,.7);
scale(1.25);
z-index:
5;
设置z-index为5是为了让正方形在放大的时候盖住其它的正方形,同时因为也设置了focus,所以也支持Tab键切换访问,效果如下:
第五步:
平滑过渡和添加颜色
第四步的特效,看起来有些广州中维财税http:
//101.1.28.14/生硬,我们可以添加Transition来达到平滑动画的效果,另外颜色比较单一,我们可以设置一下不同的颜色,首先在ul->
li->
a里添加Transition:
-moz-transition:
-moz-transform.15slinear;
-o-transition:
-o-transform.15slinear;
-webkit-transition:
-webkit-transform.15slinear;
然后在even和3n里定义不同的颜色:
#cfc;
#ccf;
这样,就完成了我们最终的效果:
总结
至此,我们利用了HTML5和CSS3的基本特性做成了一个还不错的便签贴效果,HTML5/CSS3确实很强大,如果在加一些高级特性,比如和JavaScript结合起来,能实现更加牛逼的效果,从当耐特砖家给大家的HTML5实验室系列文章,就可以看出来了。
另:
图里的文字纯属杜撰,如有雷同,纯属巧合,谢谢!
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 只要 五步就 可以 HTML5CSS3 快速 制作 特效