Question

我正在尝试将此动画制作动画http://www.instagib.dk/mainlinks.html动画为纯css。我不知道是否可能，但对于一些提示或帮助可能会很棒。

我有一个小提琴，我正试图这样做。

 "http://jsfiddle.net/MikkelMadsen/9KjL8/"

HTML：

    <div class="product-wrap">gå til varen
    <div class="produkt-img-bg">
        <div class="produkt-img"><img src="http://www.instagib.dk/anatomical_sole.png" width="300" height="140"/>
        </div>
    </div>
    <div class="produkt-text">Anatomical</div>
    <div class="slide">
        <div class="slide-hover"></div>
    </div>
</div>

CSS：

    product-wrap {
    width:300px;
    height:290px;
    display: table-cell;
    vertical-align: bottom; 

}


.produkt-img-bg {
    width:300px;
    height:155px;
    background:url(http://www.instagib.dk/anatomical_bg.png) no-repeat;
}

.produkt-img{
    width:300px;
    height:140px;  
}

.produkt-img:hover{
    -webkit-transition: opacity 1s linear;
  -moz-transition: all 0.5s linear;
  -ms-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  transition: all 0.5s linear;
  filter: alpha(opacity=30);
  opacity:0.5;
    background-color:#57b6dd;
}

.produkt-img img {
    width:300px;
    height:140px;
    -webkit-transition: all 0.5s ease; /* Safari and Chrome */
    -moz-transition: all 0.5s ease; /* Firefox */
    -ms-transition: all 0.5s ease; /* IE 9 */
    -o-transition: all 0.5s ease; /* Opera */
    transition: all 0.5s ease;
}

.produkt-img:hover img {
    width:300px;
    height:140px;
    -webkit-transform:scale(1.1); /* Safari and Chrome */
    -moz-transform:scale(1.1); /* Firefox */
    -ms-transform:scale(1.1); /* IE 9 */
    -o-transform:scale(1.1); /* Opera */
     transform:scale(1.1);

}

.produkt-text{
    width:300px;
    height:123px;
}

.slide{
    width:300px;
    height:12px;
    background-color:#B8B7B7;
}
.slide-hover{
    width:300px;
    height:12px;
}

.slide-hover:hover{
    -webkit-animation: slider 0.5s normal forwards linear;
    -moz-animation:    slider 0.5s normal forwards linear;
    -o-animation:      slider 0.5s normal forwards linear;
    animation:         slider 0.5s normal forwards linear;
    animation-iteration-count: 1;
    width:300px;
    height:12px;
    background-color:#000;

}
@-webkit-keyframes slider {
    from {
        width: 0%;
    }
    to {
        width: 100%;
    }
}

希望css向导帮助我：）

Answer 1

效果转换为css＆gt;＆gt; Hover Effect

<强> HTML

<div class="product-wrap">
<div class="image-wrap">
    <div class="img-container">
        <div class="produkt-img">
            <img src="http://www.instagib.dk/anatomical_sole.png" width="300" height="140">
            <div class="title">Arch Mid<br> <span class="subtitle">Subtitile</span>
            </div>
            <div class="overlay">Product Name</div>
        </div>
        <div class="pricetag">250,00 Kr.</div>
        <div class="graybar"></div>
        <div class="blackbar"></div>
    </div>
</div>

<强> CSS

    .product-wrap {
    background:url(http://www.instagib.dk/anatomical_bg.png) no-repeat;
    width:300px;
    height:290px;
    display: table-cell;
    vertical-align: bottom;
    position:relative;
    border:1px solid #ccc;
    transition:all 0.4s ease-out;
    font-family:sans-serif;
    transition:all 1s ease;
    cursor:pointer;
}
.product-wrap:hover img {
    transform:scale(1.1);
    transition:all 0.42s ease;
}
.product-wrap:hover .overlay {
    opacity:1;
}
.product-wrap:hover .blackbar {
    width:100%;
}
.image-wrap {
    width:300px;
    height:155px;
}
.produkt-img {
    position:absolute;
    top:0;
    transition:all 1s ease;
}
.product-wrap img {
    transition:all 0.42s ease;
}
.overlay {
    position:absolute;
    top:0;
    width:100%;
    height:98%;
    background:rgba(123, 217, 253, 0.6);
    opacity:0;
    transition:all 0.6s ease;
    color:#fff;
    font-size:28px;
    line-height:5;
    vertical-align:middle;
    text-align:center;
}
.graybar {
    position:absolute;
    bottom:0;
    right:0;
    height:13px;
    width:100%;
    background-color:#cecece;
}
.blackbar {
    position:absolute;
    bottom:0;
    left:0;
    height:13px;
    width:0%;
    background-color:#000;
    transition:all 0.3s ease-in;
}
.pricetag {
    padding-right:2px;
    position:absolute;
    bottom:13px;
    left:0;
    height:30px;
    width:100%;
    font-size:22px;
    text-align:right;
}
.title {
    padding-right:2px;
    position:absolute;
    bottom:13px;
    top:160px;
    left:0;
    height:30px;
    width:100%;
    font-size:35px;
    text-align:center;
}
.subtitle {
    color:#ccc;
    font-size:18px;
}

将Edge动画转换为CSS3

1 个答案: