《HTML与CSS3共筑酷炫网页》詹密良心制作 附代码

一、简单介绍要做的内容

1.分享两个自己觉得还行的动画特效：

      （1）文章标题的特效。

      （2）增加网址色彩的酷炫特效(百叶窗效果)。

 

2.要用到： 开发软件：DW  谷歌浏览器：Google Chrome  前端开发框架： Bootstrap  jQuery脚本

 

二、接下来就是引入和构建框架

（1）引入的文件基本如下：

 

（2）搭建框架：

 

接着去浏览器里刷下新得到：

 

接下来就是CSS部分了。

 

三、CSS的设置和最终效果图：

 

   （1）给header里的id元素fire设置特效部分

主要是阴影的设置。

接着去刷新：

（完美❤）

（2）接下来就去设置 rightBtn部分了

 

.rightBtn{

   width: 140px;

   height: 448px;/*

   background: #ccc;*/

   position: fixed;

   top: 130px;

   right: 0px;

}

.rightBtn em,.leftBtn em{

   border-radius: 50%;

}

.rightBtn a,.leftBtn a{

   text-decoration: none;

   display: block;

   width: 140px;

   height: 30px;/*

   background:  #eee;*/

   margin-bottom: 2px;

   line-height: 30px;

   color:/* mediumaquamarine*/ aqua;

   font-size: 12px;

   transform: translateX(110px);

   transition: all 0.2s ease;

   border-radius: 5px;

}

.rightBtn a em{

   display: inline-block;

   width: 30px;

   height: 30px;

   background: #00DFB;

   text-align: center;

   color: white;

   font-size: 16px;

   padding-right: 10px;

}

.rightBtn a em:hover{

   background: #c6314e;

}

.rightBtn:hover a{

   transform: translateX(0px);

   background: #c6314e;

}

.rightBtn a:nth-of-type(1){

   transition-delay: 0.05s;

}

.rightBtn a:nth-of-type(2){

   transition-delay: 0.1s;

}

.rightBtn a:nth-of-type(3){

   transition-delay: 0.15s;

}

.rightBtn a:nth-of-type(4){

   transition-delay: 0.2s;

}

.rightBtn a:nth-of-type(5){

   transition-delay: 0.25s;

}

.rightBtn a:nth-of-type(6){

   transition-delay: 0.3s;

}

.rightBtn a:nth-of-type(7){

   transition-delay: 0.35s;

}

.rightBtn a:nth-of-type(8){

   transition-delay: 0.4s;

}

.rightBtn a:nth-of-type(9){

   transition-delay: 0.45s;

}

.rightBtn a:nth-of-type(10){

   transition-delay: 0.5s;

}

.rightBtn a:nth-of-type(11){

   transition-delay: 0.55s;

}

.rightBtn a:nth-of-type(12){

   transition-delay: 0.6s;

}

.rightBtn a:nth-of-type(13){

   transition-delay: 0.65s;

}

.rightBtn a:nth-of-type(14){

   transition-delay: 0.7s;

}

上面这些代码写到style标签里就好了。

别忘了刷新：

因为刚接触博客不会弄动图，有兴趣的就拿我刚介绍给你们的代码去网页里试试就好了。

 

（3）看了这么多还没看懂的话再看看这张图：

基本上就这些了