【CSS动画】饿了么加入购物车抛物线动画实现

每次吃饭点外卖的时候（暴露了自己是个死肥宅，手动滑稽），或者在淘宝购物的时候，将商品加入购物车时会有一个很炫酷的动画，如下图饿了么点餐动画：

创新互联公司专业为企业提供察雅网站建设、察雅做网站、察雅网站设计、察雅网站制作等企业网站建设、网页设计与制作、察雅企业网站模板建站服务，10多年察雅做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

所以百度了一下前端使用css实现这个效果，然后就自己就照葫芦画瓢的写了一个小小的demo，完全当作学习了一把。

在界面上，我是参考了图片上的界面，写的css，然后在美团上面扒的数据。完成后的界面如下图：

开始想着只是做一个简单的实现效果，界面上只有div框，按钮什么的这些，反正想着很丑的界面，但是自己看到饿了么这么好看的界面，自己就忍不住模仿着写了一下下。

主要用到的是移动端适配方案：flexible.js + rem的方案

首先获取到页面上所有按钮，然后给按钮添加点击事件，获取到点击当前按钮的位置坐标信息

方案一：使用定位+transition的方式实现

方案二：使用transform + transition的方式实现

其实还可以使用css的animate来实现，只不过由于需要动态计算目标位置的坐标，实现起来比较困难，所以我就没有写，如果目标位置的坐标值固定，那么可以通过animate改变top、left或者translateX、translateY的值来实现这个效果，垂直方向的动画使用贝塞尔曲线的 function-timing 。

初识CSS抛物线动画

[img]

如何用html css javascript php制作购物车？

!DOCTYPE html

html

head

meta charset="utf-8"

title/title

link rel="stylesheet" href="---.css"

script src="---.js"/script

/head

body

div class="container"

div class="shop"

div class="header"

input type="checkbox" class="shop-checkbox"

span class="shop-icon"/span

span class="shop-name"---/span

span class="wangwang-icon"/span

/div

div class="items"

div class="item"

divinput class="item-checkbox" type="checkbox" name="" id=""/div

div

span class="item-img"/span

/div

div class="item-name"

div----/div

div class="promotion-icons"span/spanspan/spanspan/span/div

/div

div class="sku"---/div

div class="price"

div class="price-1"---/div

div class="price-2" data-price="---"----/div

/div

div class="num-control"

span class="num-minus"-/span

input class="num" type="text" value="1"

span class="num-plus"+/span

/div

div class="item-price-total"

span￥50.13/span

/div

div class="operation"

div---/div

div---/div

/div

/div

/div

/div

div class="shop"

div class="header"

input type="checkbox" class="shop-checkbox"

span class="shop-icon"/span

span class="shop-name"---/span

span class="wangwang-icon"/span

/div

div class="items"

div class="item"

divinput class="item-checkbox" type="checkbox" name="" id=""/div

div

span class="item-img"/span

/div

div class="item-name"

div----/div

div class="promotion-icons"span/spanspan/spanspan/span/div

/div

div class="sku"---/div

div class="price"

div class="price-1"---/div

div class="price-2" data-price="---"---/div

/div

div class="num-control"

span class="num-minus"-/span

input class="num" type="text" value="1"

span class="num-plus"+/span

/div

div class="item-price-total"

span￥9.90/span

/div

div class="operation"

div移入收藏夹/div

div删除/div

/div

/div

div class="item"

divinput class="item-checkbox" type="checkbox" name="" id=""/div

div

span class="item-img"/span

/div

div class="item-name"

div---/div

div class="promotion-icons"span/spanspan/spanspan/span/div

/div

div class="sku"---/div

div class="price"

div class="price-1"---/div

div class="price-2" data-price="---"---/div

/div

div class="num-control"

span class="num-minus"-/span

input class="num" type="text" value="1"

span class="num-plus"+/span

/div

div class="item-price-total"

span￥19.9/span

/div

div class="operation"

div移入收藏夹/div

div删除/div

/div

/div

/div

/body

/html

.container{

width: 1000px;

margin-left: auto;

margin-right: auto;

color: #444444;

}

.header{

margin: 8px;

}

.shop-icon, .wangwang-icon, .promotion-icons span{

display:inline-block;

width: 15px;

height: 15px;

background-color: rgb(117,192,241);

}

.promotion-icons span{

margin-right: 4px;

}

.items{

border: 1px solid #ebe9e9;

}

.item{

display: flex;

margin: 8px;

}

.item-img{

width:100px;

height: 100px;

display: inline-block;

background-color: aquamarine;

margin-left: 6px;

margin-right: 6px;

}

.item-name

{

display: flex;

flex-direction: column;

justify-content: space-between;

}

.sku, .price,.item-price-total,.operation,.num-control{

margin-left: 18px;

}

.num{

width: 18px;

height: 15px;

}

.num-control{

display: flex;

align-items: baseline;

}

.num-minus,.num-plus{

width: 18px;

height: 22px;

display: inline-block;

background-color: #ebe9e9;

}

.checkout{

display: flex;

justify-content: space-between;

}

.shop{

margin-bottom: 20px;

margin-top: 30px;

}

.goods,.freight,.checkout-button{

margin-left: 15px;

}

.price-1{

text-decoration: line-through;

color: gray;

}

.check-num ,.total-price{

font-size: large;

color: red;

margin-left: 3px;

margin-right: 3px;

}

.checkout-button{

height: 30px;

width: 50px;

background-color: beige;

}

.checkout{

margin-top: 15px;

}

.item-name{

width: 25%;

}

.item-price-total{

width: 5%;

}

.sku{

width: 20%;

}

function updatePrice(){

let items = document.querySelectorAll('.item');

let totalNum = 0;

let totalPrice = 0;

items.forEach(function(item){

if(item.querySelector('.item-checkbox').checked){

let num = item.querySelector('.num').value;

totalNum = totalNum + parseInt(num);

let price = item.querySelector('.price-2').getAttribute('data-price');

totalPrice = totalPrice + parseFloat(price) * num;

}

});

document.querySelector('.check-num').innerText= totalNum;

document.querySelector('.total-price').innerText = totalPrice;

}

window.onload=function(){

let itemCheckboxes = document.querySelectorAll('.item-checkbox');

itemCheckboxes.forEach(function(itemCheckbox){

itemCheckbox.onchange = function(){

updatePrice();

}

});

let minuses = document.querySelectorAll('.num-minus');

minuses.forEach(function(minus){

minus.onclick = function(event){

let num=minus.parentElement.querySelector('.num').value;

if(parseInt(num)1)

{

minus.parentElement.querySelector('.num').value=parseInt(num)-1;

updatePrice();

}

};

});

let pluses = document.querySelectorAll('.num-plus');

pluses.forEach(function(plus){

plus.onclick = function(event){

let num=plus.parentElement.querySelector('.num').value;

plus.parentElement.querySelector('.num').value=parseInt(num)+1;

updatePrice();

}

});

}

css有什么办法可以做成这样。有白色的购物车图片只要加黑色的背景颜色就可以了

一般前端框架有这种，比如bootstrap这种，实际上它是把把个别字符设计成购物车图形，类似于另外设置了字体，把图片设计成字体。这种的优点是方便，可以随意在css中自定义大小颜色。缺点是用户浏览网页的时候需要预先加载这种字体，一般浏览器都加载特别慢或者不成功，网页上就会有个方框，并不友好。如果网页上类似图标很多的话可以用这种，如果不多不如直接用背景透明的矢量图片，也可以达到你的要求

ecshop购物车加减css样式代码怎么样添加

在style.css里添加下面样式

.goods_cut { 

background: url("../images/plus.gif") no-repeat scroll 0 0 transparent; 

border: 0 none; 

cursor: pointer; 

display: block; 

float: left; 

font-size: 0; 

height: 15px; 

line-height: 0;margin: 8px 3px 0; 

width: 15px; 

} 

input.goodsBuyBox, input.number { 

border: 1px solid #DDDDDD; 

float: left; 

font-size: 10px; 

height: 18px; 

line-height: 18px; 

margin: 5px 6px 0; 

padding: 0; 

text-align: center; 

width: 32px; 

} 

.goods_add { 

background: url("../images/plus.gif") no-repeat scroll 0 -15px transparent; 

border: 0 none; 

cursor: pointer; 

display: block; 

float: left; 

font-size: 0; 

height: 15px; 

line-height: 0; 

margin: 8px 3px 0; 

width: 15px; 

}

在flow.dwt里，看各自的模板去修改，总之要找到这串代码：

input type="text" name="goods_number[{$goods.rec_id}]"   ……

下面是脚本，放进flow.dwt里

script language="javascript" type="text/javascript" 

function goods_cut($val){ 

var num_val=document.getElementById('number'+$val); 

var new_num=num_val.value; 

if(isNaN(new_num)){alert('请输入数字');return false} 

var Num = parseInt(new_num); 

if(Num1)Num=Num-1; 

num_val.value=Num; 

document.getElementById('updatecart').click(); 

} 

function goods_add($val){ 

var num_val=document.getElementById('number'+$val); 

var new_num=num_val.value; 

if(isNaN(new_num)){alert('请输入数字');return false} 

var Num = parseInt(new_num); 

Num=Num+1; 

num_val.value=Num; 

document.getElementById('updatecart').click(); 

} 

/script

找到

input type="text" name="goods_number[{$goods.rec_id}]"

搜索不到你就搜goods_number就行了

替换为：

                       

span class="goods_cut" onclick="goods_cut('{$goods.rec_id}');"/span 

input type="text" name="goods_number[{$goods.rec_id}]" id="number{$goods.rec_id}" value="{$goods.goods_number}" size="4" class="number" onblur="if(isNaN(this.value)){alert('请输入数字');return false}else{document.getElementById('updatecart').click();}" title="{$lang.goods_number_tip}"/ 

span class="goods_add" onclick="goods_add('{$goods.rec_id}');"/span

找到

input name="submit" type="submit" value="{$lang.update_cart}" class="btn_s3"/

其实就是更新购物车的按钮

添加一个id=“updatecart”

input name="submit" type="submit" id="updatecart" value="{$lang.update_cart}" class="btn_s3"/

求助：用css写类似淘宝购物车步骤条

1、首先是计算一行的价格。这个功能在上篇博客里有提到，这里就不列举出来了。

2、遍历选中的几行，将每行的数值相加。

3、将值赋给总金额显示出来。当取消勾选或加减数量时，金额会相应改变。

分享文章：购物车css样式,html和css制作购物车
文章起源：http://csdahua.cn/article/dsohsjp.html