前端特效学习2

用户7162790

发布于 2022-03-23 14:32:49

3300

发布于 2022-03-23 14:32:49

文章被收录于专栏：森屿暖树

效果图

HTML代码

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>小鱼干商品</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">    
    <div class="product-details">
        <h1>香辣小鱼干</h1>
        <span class="hint-star star">
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
        </span>
        <p class="information">“劲仔小鱼仔40包盒装香辣麻辣零食大礼包小鱼干20包毛毛鱼肉干独立小包装湖南即食海味休闲食品”</p>
        <div class="control">
            <button class="btn">
                <span class="price">￥35.90</span>
                <span class="shopping-cart"><i class="fa fa-shopping-cart" aria-hidden="true"></i></span>
                <span class="buy">加入购物车</span>
            </button>
        </div>
    </div>
    <div class="product-image">
        <img src="http://img.aibizhi.adesk.com/596dc9e4e7bce77b95a59782?imageMogr2/thumbnail/!350x540r/gravity/Center/crop/350x540" alt="">
        <div class="info">
            <h2>商品介绍</h2>
            <ul>
                <li><strong>名称 : </strong>劲仔小鱼仔40包盒装</li>
                <li><strong>店铺 : </strong>麦麦食品专营店</li>
                <li><strong>包装 : </strong>盒装</li>
                <li><strong>净含量 : </strong>300g</li>
                <li><strong>保质期 : </strong>12个月</li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>

css代码

body{
        background: #DFC2F2;
    background-image: linear-gradient( to right, #ffffb3,#ffe6e6);
    background-attachment: fixed;    
    background-size: cover;
}

#container{
    box-shadow: 0 15px 30px 1px grey;
    background: rgba(255, 255, 255, 0.90);
    text-align: center;
    border-radius: 15px;
    overflow: hidden;
    margin: 14em auto;
    height: 450px;
    width: 700px;
}

.product-details {
    position: relative;
    text-align: left;
    overflow: hidden;
    padding: 30px;
    height: 390px;
    float: left;
    width: 325px;

}

#container .product-details h1{
    font-family: 'Bebas Neue', cursive;
    display: inline-block;
    position: relative;
    font-size: 30px;
    color: #344055;
    margin: 0;
    
}

#container .product-details h1:before{
    position: absolute;
    content: '';
    right: 0%; 
    top: 0%;
    transform: translate(25px, -15px);
    font-family: 'Bree Serif', serif;
    display: inline-block;
    background: #ffe6e6;
    border-radius: 5px;
    font-size: 14px;
    padding: 5px;
    color: white;
    margin: 0;
    animation: chan-sh 6s ease infinite;
}

.hint-star {
    display: inline-block;
    margin-left: 0.5em;
    color: gold;
    width: 50%;
}

#container .product-details > p {
font-family: 'EB Garamond', serif;
    text-align: center;
    font-size: 18px;
    color: #7d7d7d;
}

.control{
    position: absolute;
    bottom: 10%;
    left: 22.8%;
}

.btn {
    transform: translateY(0px);
    transition: 0.3s linear;
    background:  #809fff;
    border-radius: 10px;
        position: relative;
        overflow: hidden;
    cursor: pointer;
    outline: none;
    border: none;
    color: #eee;
    padding: 0;
    margin: 0;
}

.btn:hover{transform: translateY(-6px);
    background: #1a66ff;
}

.btn span {
    font-family: 'Farsan', cursive;
    transition: transform 0.3s;
    display: inline-block;
        padding: 10px 20px;
    font-size: 1.2em;
    margin:0;
    
}
.btn .price, .shopping-cart{
    background: #333;
    border: 0;
    margin: 0;
}

.btn .price {
    transform: translateX(-10%); padding-right: 15px;
}

.btn .shopping-cart {
    transform: translateX(-100%);
        position: absolute;
    background: #333;
    z-index: 1;
        left: 0;
        top: 0;
}

.btn .buy {z-index: 3; font-weight: bolder;}

.btn:hover .price {transform: translateX(-110%);}

.btn:hover .shopping-cart {transform: translateX(0%);}

.product-image {
    transition: all 0.3s ease-out;
    display: inline-block;
    position: relative;
    overflow: hidden;
    height: 100%;
    float: right;
    width: 45%;
    display: inline-block;
}

#container img {width: 100%;height: 100%;}

.info {
    background: rgba(0, 0, 0, 0.45);
    transition: all 0.3s ease-out;
    transform: translateX(-100%);
    position: absolute;
    line-height: 1.8;
    text-align: left;
    font-size: 105%;
    cursor: no-drop;
    color: #FFF;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
}

.info h2 {text-align: center}
.product-image:hover .info{transform: translateX(0);}

.info ul li{transition: 0.3s ease;}
.info ul li:hover{transform: translateX(50px) scale(1.3);}

.product-image:hover img {transition: all 0.3s ease-out;}
.product-image:hover img {transform: scale(1.2, 1.2);}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

css