css布局实现购物卡片效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现购物卡片效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <!--图标库--> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <style> @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Bree+Serif&family=EB+Garamond:ital,wght@0,500;1,800&display=swap'); 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: 5px; overflow: hidden; margin: 5em auto; height: 350px; width: 700px; } .product-details { position: relative; text-align: left; overflow: hidden; padding: 30px; height: 100%; float: left; width: 40%; } #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: 20%; left: 22.8%; } .btn { transform: translateY(0px); transition: 0.3s linear; background: #809fff; border-radius: 5px; 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%);} .produc.........完整代码请登录后点击上方下载按钮下载查看
网友评论0