Welcome, Old Sport!

CSS3 Banner鼠标悬停的动画效果

by ilikecss ON 2016/05/04 2786

CSS3 Banner鼠标划过效果的动画效果最近又在寻找各种用户体验的UI设计方案了,无疑中发现了一款很简单实用性强的CSS3动画,可以给站点的各种尺寸的banner增强用户体验性。点击下面看美女模特LYNN演示:

HTML

<div class="c-content-navi__item c-content-navi__item--wide">
    <a href="#">
        <div class="c-content-navi__overlay">
            <p class="c-content-navi__overlay-text c-content-navi__overlay-contents-name"><span class="c-content-navi__overlay-contents-name-in">LYNN</span></p>
            <div class="c-content-navi__overlay-line"></div>
            <p class="c-content-navi__overlay-text c-content-navi__overlay-readmore"><span class="c-content-navi__overlay-readmore-in">READ MORE</span></p>
            <div class="c-content-navi__overlay-bg"></div>
        </div>
        <p class="c-content-navi__label c-content-navi__label--lynn">TOP BANNER</p>
        <div class="c-content-navi__bg c-content-navi__bg--lynn c-content-navi__under"></div>
    </a>
</div>

CSS

.c-content-navi__bg--lynn {
    background-image: url("../imgs/lynn_main.jpg"); /* 指定背景图片 */
}
.c-content-navi__item--wide {
    width: 100%;  /* 指定BANNER尺寸 100% */
}
.c-content-navi__item--wide a {
    padding-top: 25%;
}
.c-content-navi__item--half {
    float: left;
    width: 50%; /* 指定BANNER尺寸 50% */
}
.c-content-navi__item--half a {
    padding-top: 50%;
}
.c-content-navi__label--lynn {
    height: 82px;  /* 指定BANNER标题的大小区域 100% */
    width: 215px;
    color: #000;
}
.c-content-navi__label--lynn--half {
    height: 45px;  /* 指定BANNER标题的大小区域 50% */
    width: 245px;
    color: #FFF;
}

浏览器兼容性:

Chrome Safari Firefox Opera IE
1+ 1+ 1+ 3.6+ 9+

参考来源: http://weekend-sendai.com

2条评论
  1. #1

    鹿鹿鹿说道:

    :oops: 确实是美女,不过这class命名也太长




TOP