前端学习（380）：新春贺卡制作3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>新春贺卡</title>
    <link rel="stylesheet" href="./mooccss/style.css">
</head>
<body>
    <div id="music">
        <img src="./moocimg/music_pointer.png" alt="">
        <img src="./moocimg/music_disc.png" alt="">
    </div>
    <div class="page" id="page1">
        <div class="bg"></div>
        <div class="p1_lantern">点击屏幕<br>开启好运2020</div>
        <div class="p1_imooc"></div>
        <div class="p1_words">2020年歌谣新年特写</div>
    </div>
    <div class="page" id="page2">
        <div class="bg"></div>
        <div class="p2_circle"></div>
        <div class="p2_2016"></div>
    </div>
    <div class="page" id="page2">
        <div class="bg"></div>
        <div class="p3_logo"></div>
        <div class="p3_title"></div>
        <div class="p3_second"></div>
        <div class="p3_first"></div>
        <div class="p3_blessing"></div>
    </div>
</body>
</html>

style.css

*{margin: 0;padding: 0;border: none;font-size: 1.5625vw;font-family: "Microsoft Yahei";}
#music{position: fixed;top:3vh;right: 4vh; width: 15vw;height: 15vw;border: 4px solid #ef1639;z-index: 5;background: #fff;border-radius: 50%;}

#music > img:first-of-type{position: absolute;top: 24%;right: 2.5%;width: 28.421%;}
#music > img:last-of-type{position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;width: 79%;}

运行结果

站内首发文章

你知道歌谣吗？

发布了1577 篇原创文章 · 获赞 704 · 访问量 4万+

他的留言板关注

前端学习（380）：新春贺卡制作3

猜你喜欢