记得收藏【国际动画教程网】,赶快注册吧!
注册

合作站点账号登陆

QQ登录

只需一步,快速开始

扫一扫,访问微社区

快捷导航
查看: 6685|回复: 0
收起左侧

[HTML5/CSS3] Metro UI For Block[含1P]

[复制链接]
发表于 2017-6-21 23:49:28 | 显示全部楼层 |阅读模式
这个DEMO是一个区块的展示效果,在Web中经常可见,你也可以简单的理解成是一个三列展示区块,在这个DEMO中,整体风格是采用的Metro UI设计,但是我们在效果中添加了一些CSS3的动画效果,让整个DEMO看起来更大生动。





HTML CODE
<div class="item clearfix">
  <ul class="item-list">
    <li>
      <div class="item-1">
        <h2><span>BasicBasic</span></h2>
        <h3>$ <span>5</span>.99 <em>/</em> Month</h3>
        <p>Lorem ...</p>
      </div>
    </li>
    ...
  </ul>
</div>



CSS CODE


先进行布局样式的处理,此处采用的是float来让他们排列在一行:

body {
  background-color: #dbdbdb;
}       
.demo {
  margin: 40px auto 0;
  width: 960px;
}
.item-list li {
  float: left;
  width: 33%;
  text-align: center;
  overflow: hidden;
}
/*使用CSS的属性选择器,选择了类名以“item”开头的Div元素*/
div[class^="item-"] {
  margin-left: 10px;
  background-color: #fff;
}


接下来对每个区块内部的元素进行美化效果:

.item-list h2 {
  color: #fff;
  font-size: 30px;
  line-height: 60px;
  background-color: #00aec7;
  transition: all 200ms linear;
}
.item-list h3 {
  font-size: 24px;
  line-height: 100px;
}
.item-list h3 span {
  font-size: 48px;
  transition: all 300ms linear;
}
.item-list em {
  color: #00aec7;
  transition: all 200ms linear;
}
.item-list p {
  color: #969696;
  padding: 0 20px 40px;
  transition: all 200ms linear;
}
.item-list div:hover h2 {
  background-color: #006675;
  transition: all 2s linear;
}


第二步中最关键的是使用了transition属性对每个元素做了一个动画过渡效果,你可以发现当页面加载的时候,会有一些动画效果。

transition: all 200ms linear; /*我们案例中用了perfixfree.min.js,所以css3的属性只写了一个*/


接下来是最关键的一步了,在鼠标经过每个div区块时,里面的每个元素会有一个动画效果,实现在这三个动画效果,我们需要使用@keyframes来创建三个不动的动画:

/*元素从左向右移进*/
@keyframes moveF_Left {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0%);
  }
}
/*元素从右向左移进*/
@keyframes moveF_Right {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0%);
  }
}
/*元素从下向上移进*/
@keyframes moveF_Bottom {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0%);
  }
}


动画创建好了以后,需要事件触发其效果,在这里使用的是“:hover”来触发动画:

.item-list div:hover h2 span {
  display: inline-block;
  animation: moveF_Left 500ms ease;
}
.item-list div:hover h3 {
  animation: moveF_Right 500ms ease;
}
.item-list div:hover h3 span {
  font-size: 60px;
}
.item-list div:hover p {
  animation: moveF_Bottom 500ms ease;
  color: #00aec7;
}
.item-list div:hover p em {
  color: #969696;
}


通过使用animation属性调用了当初创建的动画。这样一来就完成了整个DEMO的效果,详细的CSS代码如下所示:

body {
  background-color: #dbdbdb;
}       
.demo {
  margin: 40px auto 0;
  width: 960px;
}
.item-list li {
  float: left;
  width: 33%;
  text-align: center;
  overflow: hidden;
}
/*使用CSS的属性选择器,选择了类名以“item”开头的Div元素*/
div[class^="item-"] {
  margin-left: 10px;
  background-color: #fff;
}
.item-list h2 {
  color: #fff;
  font-size: 30px;
  line-height: 60px;
  background-color: #00aec7;
  transition: all 200ms linear;
}
.item-list h3 {
  font-size: 24px;
  line-height: 100px;
}
.item-list h3 span {
  font-size: 48px;
  transition: all 300ms linear;
}
.item-list em {
  color: #00aec7;
  transition: all 200ms linear;
}
.item-list p {
  color: #969696;
  padding: 0 20px 40px;
  transition: all 200ms linear;
}
.item-list div:hover h2 {
  background-color: #006675;
  transition: all 2s linear;
}
.item-list div:hover h2 span {
  display: inline-block;
  animation: moveF_Left 500ms ease;
}
.item-list div:hover h3 {
  animation: moveF_Right 500ms ease;
}
.item-list div:hover h3 span {
  font-size: 60px;
}
.item-list div:hover p {
  animation: moveF_Bottom 500ms ease;
  color: #00aec7;
}
.item-list div:hover p em {
  color: #969696;
}
/*元素从左向右移进*/
@keyframes moveF_Left {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0%);
  }
}
/*元素从右向左移进*/
@keyframes moveF_Right {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0%);
  }
}
/*元素从下向上移进*/
@keyframes moveF_Bottom {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0%);
  }
}


演示:http://www.w3cplus.com/demo/css3/MetrostyleWebUIBlock/index.html


下载:MetrostyleWebUIBlock.zip




上一篇:Metro Login Form
下一篇:11个技巧让那些程序员对你刮目相看
一起共享资源,共建精品资源平台。记得一定要收藏我们网站。www.gjdhjc.com ||||| 还有我们的网址导航:www.58q8.com【链接失效可以留言看到第一时间补帖,如果懒的回复我也是没办法了】

QQ|QQ群:133515734|站长博客|百度网盘|许进龙|手机触屏版|国际动画教程网 ( ICP13037175 )