Html/CSS动画效果个人练习（17）

最新推荐文章于 2023-03-16 20:18:11 发布

迷人滴巷子哥

最新推荐文章于 2023-03-16 20:18:11 发布

阅读量262

点赞数

分类专栏： CSS 文章标签： css html less js

本文链接：https://blog.csdn.net/weixin_47445023/article/details/106182207

版权

CSS 专栏收录该内容

20 篇文章 5 订阅

订阅专栏

本文分享了作者进行CSS动画效果个人练习的第十七天成果，包括HTML、CSS和JS源代码，展示了实现的具体效果图片。

摘要由CSDN通过智能技术生成

CSS动画效果个人练习第十七天

Html源代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>shopping</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700i" rel="stylesheet">
</head>
<body>
   <br><br><br>
    <!-- wrapper -->
<div class="wrapper">
     <h1>APPLE</h1>
 <span><i class="shopping-cart"></i></span>

    <div class="clear"></div>
    <!-- items -->
    <div class="items">
        <!-- single item -->
        <div class="item">
            <img src="../../u/html/iphone-se-family-select-2020.jpg" alt="item" />
            <br>
            <h2>iPhone SE</h2>
            <p>PRICE: $399</p>

            <button class="add-to-cart" type="button">Add to cart</button>
        </div>
        <!--/ single item -->
        <!-- single item -->
        <div class="item">
            <img src="../../u/html/ipad-pro-12-11-select-202003_GEO_CN.jpg" alt="item" />
            <br>
            <h2>iPad Pro</h2>
            <p>PRICE: $799</p>

            <button class="add-to-cart" type="button">Add to cart</button>
        </div>
        <!--/ single item -->
        <!-- single item -->
        <div class="item">
            <img src="../../u/html/iphone-11-pro-select-2019-family.jpg" alt="item" />
            <br>
            <h2>iPhone 11 Pro</h2>

            <p>PRICE: $699</p>
            
            <button class="add-to-cart" type="button">Add to cart</button>
            
        </div>
        <!--/ single item -->
    </div>
    <!--/ items -->
</div>
<!--/ wrapper -->
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="scripts.js"></script>
</body>
</html>

CSS源代码

*{
    margin: 0;
    padding: 0;
}
body {
    background-color:black;
    font: normal 13px/1.5;
    font-family: 'Roboto Condensed', sans-serif;
    color: #333;
}
.wrapper {
    width: 1000px;
    margin: 20px auto;
    padding: 20px;
}
h1 {
    display: inline-block;
    background-color: #fff;
    color: black;
    font-size: 16px;
    font-weight: normal;
    text-transform: uppercase;
    padding: 4px 20px;
    float: left;
    border-radius: 50px;
}
.clear {
    clear: both;
}
.items {
    display: block;
    margin: 20px 0;
}
.item {
    background-color: #fff;
    float: left;
    margin: 0 10px 10px 0;
    width: 300px;
    padding: 10px;
     
}
.item img {
    display:block;
    margin: auto;
	width: inherit;
	height: 400px;
	
}
h2 {
    font-size: 20px;
    display: block;
    border-bottom: 1px solid #ccc;
    margin: 0 0 10px 0;
    padding: 0 0 5px 0;
}
button {
    border: 1px solid #0C75E4;
    padding: 4px 14px;
    background-color:#0C75E4;
    color: #fff;
    text-transform: uppercase;
    float: right;
    margin: 5px 0;
    font-weight: 400;
    cursor: pointer;
    font-family: 'Roboto Condensed', sans-serif;
    border-radius: 50px;
    
}
button:focus {
    outline: none !important;
}
span {
    float: right;
}
        
p {
    font-size: 14px;
}
.shopping-cart {
    display: inline-block;
    background: url(../../u/html/cart.png) no-repeat 0 0;
    width: 24px;
    height: 24px;
    margin: 0 10px 0 0;
}

JS源代码

$('.add-to-cart').on('click', function () {
        var cart = $('.shopping-cart');
        var imgtodrag = $(this).parent('.item').find("img").eq(0);
        if (imgtodrag) {
            var imgclone = imgtodrag.clone()
                .offset({
                top: imgtodrag.offset().top,
                left: imgtodrag.offset().left
            })
                .css({
                'opacity': '0.8',
                    'position': 'absolute',
                    'height': '150px',
                    'width': '150px',
                    'z-index': '100'
            })
                .appendTo($('body'))
                .animate({
                'top': cart.offset().top + 10,
                    'left': cart.offset().left + 10,
                    'width': 75,
                    'height': 75
            }, 1000, 'easeInOutExpo');
            
            setTimeout(function () {
                cart.effect("shake", {
                    times: 2
                }, 200);
            }, 1500);

            imgclone.animate({
                'width': 0,
                    'height': 0
            }, function () {
                $(this).detach()
            });
        }
    });