知识分享

网页设计中纯CSS3动画区块代码书写方法。

发表日期:2020-9-11 17:34:38 文章编辑: 浏览次数:60

纯CSS3动画区块代码书写方法。

纯CSS3动画区块

今天小编来介绍网站设计中如何使用纯CSS3制作,动画特色区块,当滑鼠滑道区块时,会呈现动画效果,让你的网页设计得更活泼吧!

不啰嗦先来看完成的CSS3动画区块DEMO

制作方法:

步骤一:HTML结构如下

<div class="one_fourth">
<div class = "boxImage"><img src = "images/01.png"></div>
<h2>標題</h2>
<div class = "boxDescription">說明文字</div>
</div>
<div class="one_fourth">
<div class = "boxImage"><img src = "images/01.png"></div>
<h2>標題</h2>
<div class = "boxDescription">說明文字</div>
</div>
...其他方塊

步骤二:利用CSS设定区块的外观

  CSS的设定如下,记得要将overflow设hidden属性,不然当动画在做动的过程中,你会看到图片从区块的上方进入,背景的部分,可以参考之前的css3渐层背景教学,自订自己需要的背景,最后加上transition属性,设定等下要加上的动画效果变化的是背景(background)。

.one_fourth
text-align: center;
overflow: hidden;
float: left;
background-image: linear-gradient(bottom, #F3F3F3 100%, #FAFAFA 0%);
background-image: -o-linear-gradient(bottom, #F3F3F3 100%, #FAFAFA 0%);
background-image: -moz-linear-gradient(bottom, #F3F3F3 100%, #FAFAFA 0%);
background-image: -webkit-linear-gradient(bottom, #F3F3F3 100%, #FAFAFA 0%);
background-image: -ms-linear-gradient(bottom, #F3F3F3 100%, #FAFAFA 0%); |
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(1, #F3F3F3), color-stop(0, #FAFAFA) );
border: 1px solid #E1E1E1;
-moz-box-shadow: 0px 1px 0px #ecebeb;
-webkit-box-shadow: 0px 1px 0px #ecebeb;
height: 228px;
width: 228px;
margin-right: 10px;
-webkit-transition: background 0.5s linear;
-moz-transition: background 0.5s linear;
-o-transition: background 0.5s linear;
transition: background 0.5s linear;
}

加上当滑鼠滑上区块后,背景要变成什么颜色

.one_fourth:hover{
background:#252525;
}

步骤三:设定动画效果

  下面这边只有写图片的css动画效果,标题及说明文字的css也是一样使用这个方式即可。

.homeBox .one_fourth .boxImage {
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.homeBox .one_fourth:hover .boxImage {
position: relative;
-webkit-animation: moveFromTop 350ms ease;
-moz-animation: moveFromTop 350ms ease;
-ms-animation: moveFromTop 350ms ease;
}

步骤四:自订CSS3动画

  如果你有注意看上面的code的话,会发现animation套用的是个moveFromTop的属性,这是css3可自订的动画属性,请把下面的code,复制贴在CSS的最后,即可使用了,而说明文字的动画效果,也是把握一样的原则,因此我就不另外写出来,请点选以下的下载连结,观看css的source就看的到了。

@-webkit-keyframes moveFromTop {
from { top: -600px; }
to { top: auto; }
}
@-moz-keyframes moveFromTop {
from { -moz-transform: translateY(-600%); }
to { -moz-transform: translateY(0%); }
}
@-ms-keyframes moveFromTop {
from { -ms-transform: translateY(-600%); }
to { -ms-transform: translateY(0%); }
}

原始档下载


标签: 网站设计 CSS
将文章分享到..
相关新闻
全新新闻
随机新闻
最新网站设计案例
Hi,我来帮您!