HTML和CSS
文章平均质量分 75
laiqi_luckyboy
这个作者很懒,什么都没留下…
展开
-
CSS3过渡动画实现hover人物弹出炫酷效果案例
目标我们要实现的目标效果如下过渡如何使用可以清楚地看出效果图中的效果用到了css3中的过渡transition,先来了解一下transitionCSS3 过渡是元素从一种样式逐渐改变为另一种的效果过渡共有四个属性,分别是:transition-property: 规定应用过渡的 CSS 属性的名称transition-duration: 定义过渡效果花费的时间。默认是 0transition-timing-function: 规定过渡效果的时间曲线。默认是 “ease”transi原创 2021-06-18 15:04:56 · 1922 阅读 · 0 评论 -
canvas实现简单的刮刮乐功能
canvas实现刮刮乐效果平时浏览一些购物网站常常有一些抽奖的环节它们就会使用一种刮刮乐的形式给用户发一些优惠券或者其它的一些奖品,对此突然产生了些许兴趣于是就琢磨着该如何实现,最终还是选择了canvas来实现这个效果思路思路很简单,无非就是绘制一个用来刮的蒙版矩形,给画布添加鼠标移动事件,在鼠标移动是不断绘制以鼠标为圆心的圆形闭合路径,图形合成globalCompositeOperation 属性使用‘destination-out’,用来抹除重叠的部分ctx.globalCompositeOp原创 2021-06-15 17:33:00 · 1415 阅读 · 0 评论 -
flex布局练习——实现骰子的各个点数
效果图如下实现上面效果主要依赖flex布局,话不多说,直接上代码骰子html结构 <ul> <li> <span></span> </li> <li> <span></span> <span></span> </li>原创 2021-04-12 19:44:34 · 764 阅读 · 0 评论 -
个性课表静态网页的制作
个性课表静态网页的制作效果图:主要运用知识:html ,css这里是把主页面分成三个div区块:一个是课表头部;一个是课表月份以及课的节数;还有一个是星期,日期和课名;第二个和第三个星期日期是用表格第三个课名用列表来做内容比较简单,所以没有添加注释html 代码:<!doctype html><html><head><meta...原创 2019-03-14 13:19:30 · 1805 阅读 · 0 评论