<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>CSS3卡通电子琴动画特效</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="main"> <div class="keyboard"> <div class="keyboard__front face-keyboard"> <div class="keyboard__f-top"> <div class="keyboard__speaker"></div> </div> <div class="keyboard__buttons"> <div class="keyboard__button"></div> <div class="keyboard__button"></div> <div class="keyboard__button"></div> <div class="keyboard__button"></div> <div class="keyboard__button"></div> <div class="keyboard__button"></div> </div> <div class="keyboard__speaker"></div> </div> <div class="keyboard__f-bottom"> <div class="key"> <div class="key__front face-key key__front-1"></div> <div class="key__back face-key"></div> <div class="key__right face-key"></div> <div class="key__left face-key"></div> <div class="key__top face-key"></div> <div class="key__bottom face-key"></div> </div> <div class="key"> <div class="key__front face-key key__front-2"></div> <div class="key__back face-key"></div> <div class="key__right face-key"></div> <div class="key__left face-key"></div> <div class="key__top face-key"></div> <div class="key__bottom face-key"></div> </div> <div class="key"> <div class="key__front face-key key__front-3"></div> <div class="key__back face-key"></div> <div class="key__right face-key"></div> <div class="key__left face-key"></div> <div class="key__top face-key"></div> <div class="key__bottom face-key"></div> </div> <div class="key"> <div class="key__front face-key key__front-4"></div> <div class="key__back face-key"></div> <div class="key__right face-key"></div> <div class="key__left face-key"></div> <div class="key__top face-key"></div> <div class="key__bottom face-key"></div> </div> <div class="key"> <div class="key__front face-key key__front-5"></div> <div class="key__back face-key"></div> <div class="key__right face-key"></div> <div class="key__left face-key"></div> <div class="key__top face-key"></div> <div class="key__bottom face-key"></div> </div> <div class="key"> <div class="key__front face-key key__front-6"></div> <div class="key__back face-key"></div> <div class="key__right face-key"></div> <div class="key__left face-key"></div> <div class="key__top face-key"></div> <div class="key__bottom face-key"></div> </div> <div class="key"> <div class="key__front face-key key__front-7"></div> <div class="key__back face-key"></div> <div class="key__right face-key"></div> <div class="key__left face-key"></div> <div class="key__top face-key"></div> <div class="key__bottom face-key"></div> </div> <div class="key"> <div class="key__front face-key key__front-8"></div> <div class="key__back face-key"></div> <div class="key__right face-key"></div> <div class="key__left face-key"></div> <div class="key__top face-key"></div> <div class="key__bottom face-key"></div> </div> <div class="key"> <div class="key__front face-key key__front-9"></div> <div class="key__back face-key"></div> <div class="key__right face-key"></div> <div class="key__left face-key"></div> <div class="key__top face-key"></div> <div class="key__bottom face-key"></div> </div> <div class="key"> <div class="key__front face-key key__front-10"></div> <div class="key__back face-key"></div> <div class="key__right face-key"></div> <div class="key__left face-key"></div> <div class="key__top face-key"></div> <div class="key__bottom face-key"></div> </div> <div class="key"> <div class="key__front face-key key__front-11"></div> <div class="key__back face-key"></div> <div class="key__right face-key"></div> <div class="key__left face-key"></div> <div class="key__top face-key"></div> <div class="key__bottom face-key"></div> </div> <div class="key"> <div class="key__front face-key key__front-12"></div> <div class="key__back face-key"></div> <div class="key__right face-key"></div> <div class="key__left face-key"></div> <div class="key__top face-key"></div> <div class="key__bottom face-key"></div> </div> <div class="key"> <div class="key__front face-key key__front-13"></div> <div class="key__back face-key"></div> <div class="key__right face-key"></div> <div class="key__left face-key"></div> <div class="key__top face-key"></div> <div class="key__bottom face-key"></div> </div> <div class="key"> <div class="key__front face-key key__front-14"></div> <div class="key__back face-key"></div> <div class="key__right face-key"></div> <div class="key__left face-key"></div> <div class="key__top face-key"></div> <div class="key__bottom face-key"></div> </div> <div class="key"> <div class="key__front face-key key__front-15"></div> <div class="key__back face-key"></div> <div class="key__right face-key"></div> <div class="key__left face-key"></div> <div class="key__top face-key"></div> <div class="key__bottom face-key"></div> </div> <div class="key"> <div class="key__front face-key key__front-16"></div> <div class="key__back face-key"></div> <div class="key__right face-key"></div> <div class="key__left face-key"></div> <div class="key__top face-key"></div> <div class="key__bottom face-key"></div> </div> <div class="key"> <div class="key__front face-key key__front-17"></div> <div class="key__back face-key"></div> <div class="key__right face-key"></div> <div class="key__left face-key"></div> <div class="key__top face-key"></div> <div class="key__bottom face-key"></div> </div> <div class="key"> <div class="key__front face-key key__front-18"></div> <div class="key__back face-key"></div> <div class="key__right face-key"></div> <div class="key__left face-key"></div> <div class="key__top face-key"></div> <div class="key__bottom face-key"></div> </div> <div class="key"> <div class="key__front face-key key__front-19"></div> <div class="key__back face-key"></div> <div class="key__right face-key"></div> <div class="key__left face-key"></div> <div class="key__top face-key"></div> <div class="key__bottom face-key"></div> </div> <div class="key"> <div class="key__front face-key key__front-20"></div> <div class="key__back face-key"></div> <div class="key__right face-key"></div> <div class="key__left face-key"></div> <div class="key__top face-key"></div> <div class="key__bottom face-key"></div> </div> <div class="key"> <div class="key__front face-key key__front-21"></div> <div class="key__back face-key"></div> <div class="key__right face-key"></div> <div class="key__left face-key"></div> <div class="key__top face-key"></div> <div class="key__bottom face-key"></div> </div> <div class="key key--black key--black-1"> <div class="key__front face-key"></div> <div class="key__back face-key"></div> <div class="key__right face-key"></div> <div class="key__left face-key"></div> <div class="key__top face-key"></div> <div class="key__bottom face-key"></div> </div> <div class="key key--black key--black-2"> <div class="key__front face-key"></div> <div class="key__back face-key"></div> <div class="key__right face-key"></div> <div class="key__left face-key"></div> <div class="key__top face-key"></div> <div class="key__bottom face-key"></div> </div> <div class="key key--black key--black-3"> <div class="key__front face-key"></div> <div class="key__back face-key"></div> <div class="key__right face-key"></div> <div class="key__left face-key"></div> <div class="key__top face-key"></div> <div class="key__bottom face-key"></div> </div> <div class="key key--black key--black-4"> <div class="key__front face-key"></div> <div class="key__back face-key"></div> <div class="key__right face-key"></div> <div class="key__left face-key"></div> <div class="key__top face-key"></div> <div class="key__bottom face-key"></div> </div> <div class="key key--black key--black-5"> <div class="key__front face-key"></div> <div class="key__back face-key"></div> <div class="key__right face-key"></div> <div class="key__left face-key"></div> <div class="key__top face-key"></div> <div class="key__bottom face-key"></div> </div> <div class="key key--black key--black-6"> <div class="key__front face-key"></div> <div class="key__back face-key"></div> <div class="key__right face-key"></div> <div class="key__left face-key"></div> <div class="key__top face-key"></div> <div class="key__bottom face-key"></div> </div> <div class="key key--black key--black-7"> <div class="key__front face-key"></div> <div class="key__back face-key"></div> <div class="key__right face-key"></div> <div class="key__left face-key"></div> <div class="key__top face-key"></div> <div class="key__bottom face-key"></div> </div> <div class="key key--black key--black-8"> <div class="key__front face-key"></div> <div class="key__back face-key"></div> <div class="key__right face-key"></div> <div class="key__left face-key"></div> <div class="key__top face-key"></div> <div class="key__bottom face-key"></div> </div> <div class="key key--black key--black-9"> <div class="key__front face-key"></div> <div class="key__back face-key"></div> <div class="key__right face-key"></div> <div class="key__left face-key"></div> <div class="key__top face-key"></div> <div class="key__bottom face-key"></div> </div> <div class="key key--black key--black-10"> <div class="key__front face-key"></div> <div class="key__back face-key"></div> <div class="key__right face-key"></div> <div class="key__left face-key"></div> <div class="key__top face-key"></div> <div class="key__bottom face-key"></div> </div> <div class="key key--black key--black-11"> <div class="key__front face-key"></div> <div class="key__back face-key"></div> <div class="key__right face-key"></div> <div class="key__left face-key"></div> <div class="key__top face-key"></div> <div class="key__bottom face-key"></div> </div> <div class="key key--black key--black-12"> <div class="key__front face-key"></div> <div class="key__back face-key"></div> <div class="key__right face-key"></div> <div class="key__left face-key"></div> <div class="key__top face-key"></div> <div class="key__bottom face-key"></div> </div> <div class="key key--black key--black-13"> <div class="key__front face-key"></div> <div class="key__back face-key"></div> <div class="key__right face-key"></div> <div class="key__left face-key"></div> <div class="key__top face-key"></div> <div class="key__bottom face-key"></div> </div> <div class="key key--black key--black-14"> <div class="key__front face-key"></div> <div class="key__back face-key"></div> <div class="key__right face-key"></div> <div class="key__left face-key"></div> <div class="key__top face-key"></div> <div class="key__bottom face-key"></div> </div> </div> </div> <div class="keyboard__back face-keyboard"></div> <div class="keyboard__right face-keyboard"></div> <div class="keyboard__left face-keyboard"></div> <div class="keyboard__top face-keyboard"></div> <div class="keyboard__bottom face-keyboard"></div> </div> </div> </body> </html>
CSS3卡通电子琴动画特效
标签：
评论者:[[ schemeInfo.user.username ]]
评论内容:[[ schemeInfo.pbody ]]
评论时间:[[ schemeInfo.ptime ]]
发表你的评论:
提交评论