当前位置: 首页 > Web前端 > HTML5

前端日常实践:159#视频演示如何使用CSS和原生JS制作展示苹果设备的交互动画

时间:2023-04-05 18:54:15 HTML5

效果预览在当前页面点击右侧的“点击预览”按钮进行预览,点击全屏预览链接。https://codepen.io/comehop??e/pen/gBKWdW互动视频本视频为互动视频,您可以随时暂停视频,编辑视频中的代码。请使用chrome、safari、edge打开观看。第1部分:https://scrimba.com/p/pEgDAM/cazRgcL第2部分:https://scrimba.com/p/pEgDAM/ceDK7cB源码下载每日前端实战系列的所有源码请下载自github:https://github.com/comehop??e/front-end-daily-challenges代码解读定义了dom,它包含5个子元素,分别代表iphone,mini,ipad,macbook,imac这5个设备:

中心显示:body{margin:0;高度:100vh;显示:弹性;对齐项目:居中;证明内容:居中;background-color:#aaa;}设置容器中子元素的布局:.container{position:relative;显示:弹性;弹性方向:列;align-items:center;}设置设备的通用属性,线性渐变图案将作为屏幕的背景:.device{box-sizing:border-box;位置:相对;显示:弹性;证明内容:居中;背景:线性渐变(120deg,#ddd30%,#ccc30%);}.device::before,.device::after{content:'';position:absolute;}iphone、mini、ipad外形相似,都有顶部摄像头、传感器开孔和底部按钮,所以可以将这些通用属性设置在一起,使用::before伪元素绘制顶部细节,以及用于绘制底部按钮的::after伪元素:.iphone::before,.mini::before,.ipad::before{width:2px;高度:2px;边框样式:实心;边框颜色:#a5adbe;border-width:012px02px;}.iphone::after,.mini::after,.ipad::after{width:8px;高度:8px;背景色:白色;border-radius:50%;}接下来把设备一一画出来先画出iphone的轮廓:.iphone{width:59px;高度:124px;边框:#484f5e实心;边框宽度:18px4px;border-radius:6px;}定位iphone的顶部和底部细节:.iphone::before{top:-10px;}.iphone::after{bottom:-13px;}同理绘制mini:.mini{width:93px;高度:138px;边框:#484f5e实心;边框宽度:14px5px;border-radius:10px;}.mini::before{top:-8px;}.mini::after{bottom:-11px;}然后绘制ipad:.ipad{width:134px;高度:176px;边框:#484f5e实心;边框宽度:18px13px;border-radius:12px;}.ipad::before{top:-10px;}.ipad::after{bottom:-13px;}接下来画macbook,先画屏幕:.macbook{width:234px;高度:155px;边框:8px实心#484f5e;border-radius:7px7px00;}使用::before伪元素绘制相机:.macbook::before{width:294px;高度:14px;背景色:#e8ebf0;顶部:计算(100%+8px);border-radius:0014px14px;}使用::after伪元素绘制宿主:.macbook::after{width:3px;身高:3像素;背景色:#a5adbe;顶部:-6px;border-radius:50%;}接下来画imac,先画屏幕,屏幕左上右的黑边不画border属性,因为border处会留一个斜角endpoint,所以使用box-shadow代替:.imac{width:360px;高度:215px;边界半径:10px;框阴影:插图014px#484f5e,插图14px0#484f5e,插图-14px0#484f5e;border-bottom:33pxsolid#e8ebf1;transform:translateY(14px);}使用::before伪元素绘制梯形的底部:.imac::before{width:90px;高度:0;顶部:计算(100%+33px);边框:实心透明;边框底部颜色:#e2e4e8;border-width:010px47px10px;}使用::after伪元素绘制顶部摄像头和屏幕底部的按钮,注意按钮是用box-shadow:.imac::after{width:4px;高度:4px;背景色:#a5adbe;顶部:5px;边界半径:50%;box-shadow:0191px04px#464e5d;}至此,所有设备绘制完成删除除iphone以外的其他设备的dom元素,只保留一个dom元素,后续的动画效果会在这个dom元素上发生变化:设置容器的大小,子元素垂直居中,设备高度占容器高度的75%:.container{width:360px;高度:350px;justify-content:center;}.device{transform:translateY(-25%);}在dom中添加2个button元素,分别用.left和.right表示:定位按钮位置:.buttons{位置:绝对;宽度:继承;字体大小:30px;高度:2em;底部:0;显示:弹性;证明内容:space-around;}.buttons>*{位置:相对;width:4em;}按钮是左右箭头:.buttons>*::before{position:absolute;}.buttons.left::before{content:'←';right:0;}.buttons.right::before{content:'→';}设置按钮样式为circle:.buttons>*::before{position:absolute;宽度:2em;高度:2em;背景色:#484f5e;颜色:银色;文本对齐:居中;行高:2em;边界半径:1em;cursor:pointer;}添加鼠标悬停效果:.buttons>*::before{transition:0.2s;}.buttons.left:hover::before{width:4em;内容:'?';}.buttons.right:hover::before{width:4em;content:'?';}添加按钮点击效果:.buttons>*:active{transform:scale(0.9);filter:brightness(0.8);}至此按钮制作完成,接下来创建交互脚本定义一个函数$来获取元素:const$=(className)=>document.getElementsByClassName(className)[0]定义一个数组来存储设备名称:letdevices=['iphone','mini','ipad','macbook','imac']定义了点击行为处理数据的方法。单击左键时,数组最左边的元素将移动到最右边。反之,当点击右键时,数组最右边的元素向最左边移动1个元素,这样就可以在两个方向遍历数组:letloop={'left':()=>devices.unshift(devices.pop()),'right':()=>devices.push(devices.shift())}定义点击事件,根据数组的变化切换设备:Array.from($('buttons').children).forEach(element=>element.addEventListener('click',function(e){loop[e.target.className]()$('device').className='device'+devices[0]}))最后设置设备切换的缓动效果:.device,.device::before,.device::after{transition:0.4scubic-bezier(0.5,1.7,0.5,1.2);}大功告成!