这个演示只是一个js微信音乐相册案例大概思路,具体还需要根据情况来进行
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,user-scalable=不,初始=1.0,最大范围=1.0,最小规模=1.0”比;
& lt; title> Document
& lt;链接rel="样式表" href=" https://www.yisu.com/zixun/reset.css " rel=巴獠縩ofollow”比;
& lt;链接rel="样式表" href=" https://www.yisu.com/zixun/swiper.min.css " rel=巴獠縩ofollow”比;
& lt;链接rel="样式表" type=" text/css " href=" https://www.yisu.com/zixun/animate.css " rel=巴獠縩ofollow”比;
& lt; style>
html,身体{
宽度:100%;
高度:100%;
溢出:隐藏;
}
html {
字体大小:100 px;/*设计稿640 * 960 */}
.main、.swiper-container .swiper-slide {
宽度:100%;
高度:100%;
溢出:隐藏;
}
.page1 {
位置:相对;
背景:url (. ./img/偷窃者/bg1.jpg”)不再重演;
background-size:封面;
}
.page1 img {
位置:绝对的;
透明度:0;
}
.page1 img: nth-child (1) {
左:2快速眼动;
上图:.28rem;
宽度:.96rem;
高度:2.32快速眼动;
}
.page1 img: nth-child (2) {
右:0;
上图:.28rem;
宽度:3.7快速眼动;
身高:6眼动;
}
.page1 img: nth-child (3) {
左:.5rem;
底部:.8rem;
宽度:5.5快速眼动;
高度:5.12快速眼动;
}
.page1 img: nth-child (4) {
左:-1.6快速眼动;
底部:0;
宽度:7.86快速眼动;
高度:5.88快速眼动;
}/*实现切换完成后页面中的元素在开始运动的思想:开始的时候当前的这个区域没有对应的ID,当切换到这个区域的时候,我们为其增加ID,在css中我们把所有的动画效果都放在指定的ID下,这样的话只需要让区域有ID,里面的子元素就有动画了*/# page1 img: nth-child (1) {/*注意移动端的样式写两套并且不加webkit的在后*/-webkit-animation: bounceInLeft 1线性0 - 1;
动画:bounceInLeft 1线性0 - 1;
}
# page1 img: nth-child (2) {/*注意移动端的样式写两套并且不加webkit的在后*/-webkit-animation: bounceInRight 1 s线性。3 1;
动画:bounceInRight 1 s线性。3 1;
}
# page1 img: nth-child (3) {/*注意移动端的样式写两套并且不加webkit的在后*/-webkit-animation: bounceInUp 1 s线性。6 1;
动画:bounceInUp 1 s线性。6 1;
}
# page1 img: nth-child (4) {/*注意移动端的样式写两套并且不加webkit的在后*/-webkit-animation: bounceInUp 1 s线性。9 1;
动画:bounceInUp 1 s线性。9 1;
}
.page2 {
位置:相对;
背景:url (. ./img/偷窃者/bg2.jpg”)不再重演;
background-size:封面;
}
.page2 img {
位置:绝对的;
上图:2.5快速眼动;
透明度:0;
}
.page2 img: nth-child (1) {
上图:0;
左:0;
宽度:3.4快速眼动;
高度:1.74快速眼动;
}
.page2 img: nth-child (2) {
左:1.48快速眼动;
}
.page2 img: nth-child (3) {
左:3.2快速眼动;
}
.page2 img: nth-child (4) {
左:4.7快速眼动;
}
#所以page2 img: nth-child (1) {
-webkit-animation: bounceInLeft 1线性0 - 1;
动画:bounceInLeft 1线性0 - 1;
}
#所以page2 img: nth-child (2) {
-webkit-animation: zoomIn 1 s线性。3 1;
动画:zoomIn 1 s线性。3 1;
}
#所以page2 img: nth-child (3) {
-webkit-animation: zoomIn 1 s线性。6 1;
动画:zoomIn 1 s线性。6 1;
}
#所以page2 img: nth-child (4) {
-webkit-animation: zoomIn 1 s线性。9 1;
动画:zoomIn 1 s线性。9 1;
}
.arrow {
位置:绝对的;
左:50%;
底部:.2rem;
z - index: 10;
margin-left: -.24rem;
宽度:.48rem;
高度:.36rem;
背景:url (. ./img/偷窃者/web-swipe-tip.png”)不再重演;
background-size: 100% - 100%;
-webkit-animation:反弹1线性0无限;
动画:反弹1线性0无限;
}
音乐的{
显示:没有;
位置:绝对的;
上图:.2rem;
右:.2rem;
z - index: 10;
宽度:.6rem;
高度:.6rem;
背景:url(. ./音频/music.svg)不再重演;
background-size: 100% - 100%;
}
.music.move {
-webkit-animation: musicMove 1线性0无限;
动画:musicMove 1线性0无限;
}
音乐的音频{
显示:没有;
}
@-webkit-keyframes musicMove {
0% {
-webkit-transform:旋转(0度);
变换:旋转(0度);
}
100% {
-webkit-transform:旋转(360度);
变换:旋转(360度);
}
}
@keyframes musicMove {
0% {
-webkit-transform:旋转(0度);
变换:旋转(0度);
}
100% {
-webkit-transform:旋转(360度);
变换:旋转(360度);
}
}
& lt;/style>
& lt;/head>
& lt; body>
& lt;部分类=爸饕北?
& lt; !——音乐在
& lt; div类='音乐' id=癿usicMenu”比;
& lt;音频src=" https://www.yisu.com/zixun/beyond.mp3 "预加载='没有'循环autoplay> & lt;/音频id=癿usicAudio”比;
& lt; !- & lt; audio>
& lt;源src=" https://www.yisu.com/zixun/beyond.mp3 " type='音频/mpeg/比;
& lt;源src=" https://www.yisu.com/zixun/beyond.wav " type='音频/wav/比;
& lt;源src=" https://www.yisu.com/zixun/beyond.ogg " type='音频/ogg/比;
& lt;/audio>——比;
& lt;/div>
& lt; !——容器——比;
& lt; div类=皊wiper-container”比;
& lt; div类=皊wiper-wrapper”比;
& lt; div类=swiper-slide所述的祝辞
& lt; img src=" https://www.yisu.com/zixun/img/swiper/page1-text1.png " alt="比;
& lt; img src=" https://www.yisu.com/zixun/img/swiper/page1-text2.png " alt="比;
& lt; img src=" https://www.yisu.com/zixun/img/swiper/page1-text3.png " alt="比;
& lt; img src=" https://www.yisu.com/zixun/img/swiper/page1-text4.png " alt="比;
& lt;/div>
& lt; div类='所以page2 swiper-slide '比;
& lt; img src=" https://www.yisu.com/zixun/img/swiper/page2-text1.png " alt="比;
& lt; img src=" https://www.yisu.com/zixun/img/swiper/page2-text2.png " alt="比;
& lt; img src=" https://www.yisu.com/zixun/img/swiper/page2-text3.png " alt="比;
& lt; img src=" https://www.yisu.com/zixun/img/swiper/page2-text4.png " alt="比;
& lt;/div>
& lt;/div>
& lt;/div>
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
