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