码迷,mamicode.com
首页 > Web开发 > 详细

HTML5+CSS3实现春节贺卡

时间:2018-01-30 23:04:56      阅读:765      评论:0      收藏:0      [点我收藏+]

标签:适应   enter   image   ros   style   nbsp   gpo   结构   技术   

HTML5+CSS3实现春节贺卡

切图——>重构——>前端——>优化

技术分享图片

知道原生的JS代码,了解Html5API,了解WampServer。

结构层为index.html

 

因为需要点击光盘让音乐开始和停止,又使用id获取元素要比class容易一些,所以我们将音乐改为 id="music"

表示层为style.css

 

px就是像素值,em就是根据基准来缩放字体的大小。em是相对于父元素的属性而计算的,rem是相对于根元素

box-sizing 属性允许你以某种方式定义某些元素,以适应指定区域。

技术分享图片

animation动画

特效

使用animation和keyframes

效果1-1、光盘转动

效果1-2、红灯笼闪烁

效果2-3、三个圈转

HTML5+CSS3实现春节贺卡

标签:适应   enter   image   ros   style   nbsp   gpo   结构   技术   

原文地址:https://www.cnblogs.com/CiMing/p/8387267.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!