用到了动画效果
@keyframes可将图片进行轮播
transform: translate(0, -5px);当鼠标放在图片上时可向上凸出
运用绝对定位将左侧位置一直固定,右侧使用相对运用top和left调整位置
BUG:轮播图也可以通过按键变化图片,多按几次后好像变化的图片为一张
效果图
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" type="text/css" href="./starbucks.css" />
<script src="./statbucks.js"></script>
</head>
<body>
<div class="left">
<!-- banner -->
<div class="banner">
<a href="#"
><img
class="img1"
src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/logo.svg"
alt=""
/></a>
<div>
<ul>
<li><a href="">门店</a></li>
<li><a href="">我的账户</a></li>
<li><a href="">菜单</a></li>
</ul>
</div>
<a href="#">
<img
class="img2"
src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/icons/icon-hamburger.svg"
alt=""
/></a>
</div>
<!-- 心情惬意 -->
<div class="title">
<span>心情惬意,来杯咖啡吧 ☕</span>
</div>
<!-- 登录注册 -->
<div class="register">
<a href="#">
<img
src=" https://www.starbucks.com.cn/assets/icons/icon-account.svg"
alt=""
/>
<span>登录</span>
</a>
<a href="#">
<span class="s1">注册</span>
</a>
</div>
</div>
<!-- banner图片 -->
<div class="right">
<div class="img">