CSS3教程

当前位置: HTML5技术网 > CSS3教程 > jQuery+CSS3动画的水平组合布局

jQuery+CSS3动画的水平组合布局

CSS3教程  手机阅读

      点击进入详细教程及源码下载    在线演示
         今天在本教程中,我们要创建水平的组合布局网站酷悬停效果。使用CSS3动画和过渡效果,以及一些jQuery来复制图像平移效果上悬停闪存悬停效果。
The Markup
<ul class="portfolio-items">  <li class="item">    <figure>      <div class="view">       <img src="images/1.jpg">      </div>      <figcaption>        <p><span><a href="http://www.vladstudio.com/wallpaper/?thetwoandthebubbles">The Two and The Bubbles</a></span></p>        <p><span>By Vlad Gerasimov</span></p>      </figcaption>    </figure>    <div class="date">2005</div>  </li>  <li>    <!-- second item -->  </li>  <li>    <!-- third item -->  </li>  <!-- and so forth --></ul>
The CSS

.portfolio-items {  height: 400px;  overflow-x: scroll;  overflow-y: hidden;  white-space: nowrap;  margin-bottom: 30px;  position: relative;}.portfolio-items > li {  display: inline-block;  /*aligning items by top baseline makes sure the baseline doesn't change once the hover  effect is fired and therefore the other items stay put*/  vertical-align: top;}.item {  width: 300px;  height: 202px;  margin: 150px 20px 0;  padding: 5px;  border-radius:2px;  box-shadow: 0px 10px 10px -5px rgba(0,0,0,0.5);  background-color: white;  font-size: 14px;  /*initially all items are moved 300px up and faded out and rotated, they will fade  into view and back to position later via javascript*/  opacity: 0;  position: relative;  top: -300px;  transform: rotate(-135deg);  transition: all .3s ease, opacity 2s ease,  top 1s ease;}/*even items will be 100px lower than their siblings*/.item:nth-child(even) {  margin-top: 100px;}

【jQuery+CSS3动画的水平组合布局】相关文章

1. jQuery+CSS3动画的水平组合布局

2. jQuery+CSS3动画的水平组合布局

3. 16款创建CSS3动画的jQuery插件

4. phonegap教程第8讲 Jquery Mobile中流式布局,网格布局以及响应式布局教程 ...

5. jQuery+CSS3动画框架magic

6. jQuery+CSS3动画框架magic

7. 10款jQuery/CSS3动画应用 超实用

8. 5款基于jQuery实现的动画的源码

9. jQuery可自动播放动画的焦点图插件

10. CSS3动画效果-animate.css

本文来源:https://www.51html5.com/a978.html

点击展开全部
上一篇:CSS伪类的动画和过渡效果应用 下一篇:jQuery+CSS3动画框架magic

﹝jQuery+CSS3动画的水平组合布局﹞相关内容

复制网址 收藏网址 分享到微信 分享到微博 分享到QQ

其它栏目

HTML5教程 CSS3教程 JQUERY教程

也许您还喜欢