最近更新

JavaScript案例3:鼠标经过方块消失出现图片

JavaScript案例3:鼠标经过方块消失出现图片
这个案例主要是练习for循环生成阵列。通过定位在图片上方摆满多个div,鼠标经过div消失。具体页面效果点击查看一、html代码<div id="wrap">...

JavaScript案例2:幻灯片切换效果(顺序切换和循环切换)

JavaScript案例2:幻灯片切换效果(顺序切换和循环切换)
幻灯片的切换是网站常用功能,这个案例包括了顺序切换和循环切换两种效果。1、循环切换就是点击下一张,到了最后一张,偷偷摸摸切换到第一张。点击上一张,到了第一张,再偷偷摸摸切换到最后一张, 让你觉得好像幻...

JavaScript案例1:模仿微信界面发送信息

JavaScript案例1:模仿微信界面发送信息
开始JavaScript的案例更新了。第一个案例是模仿微信界面发送信息。1、点击头像可以模拟切换用户。2、输入信息,点击发送可以显示在屏幕上。3、新信息在上方,旧信息在下方,方便有滚动条的时候能直接看...

checkbox复选框样式美化的问题

复选框,单选框都不好直接用css样式美化,总得用点奇思妙想才行。如果只考虑谷歌内核的浏览器的话,那么用appearance属性可以搞定大部分表单控件的样式。关键是这个appearance属性IE不支持,这就逼得大家另想办法了。利用label挂钩checkbox的特点来实现。当html代码中,labe...

select下拉菜单的兼容性问题,支持IE10以上的方法

对于表单控件的样式修改一直是个老大难的问题,如果不做大手术,还是很好兼容IE10和谷歌等现代浏览器的。有两种常规方法。第一种:直接干掉select旁边的小箭头,用图片或者border绘制三角形代替。chrome下面需要利用谷歌的私有属性-webkit-appearance完成。这个appearanc...

linear-gradient线性渐变的兼容性问题,有神器!

兼容性问题一直是让前端工程师脱发的主要罪魁祸首,所以,利用一些神器工具可以挽救你的发际线。先来一个兼容性全包括的代码片段,这是IE9不支持圆角的全系列:.gradient{ background: #d91915; /* Old browsers ...

杨雪果老师强大的Blur's good brush 7.0 pro,必须收藏!

看高高手的时候,无意间听到李涛老师说到杨雪果老师的这套画笔,于是下载下来一用,对于我这种绘画小白来说,太大材小用了,于是推荐给需要绘画的同学,必须收藏。下载地址:链接: https://pan.baidu.com/s/1_v8J6_XnJJbtMDBwDIJoiw 密码: mwjy有画笔和使用手册。...

CSS3第十三课: steps animation逐帧动画,你不应该错过的最详篇!

animation动画除了可以实现补间动画外,还可以完成逐帧动画。在animation的属性中,有个属性animation-timing-function一共具有如下这些值,来自于MDN。/* Keyword values */ animation-timing-fu...

steps animation,极光下奔跑的熊!

steps animation,极光下奔跑的熊!
有次无意间看到了百度浏览器的动画效果,一直恋恋不忘,终于抽了点空仿了一个场景,感觉steps animation逐帧动画还是很强大呀。点击查看效果一、案例分析1、星空背景的运动和三层山的运动需要掌握背...

oat the goat,一个温暖的故事,一个超酷的网站

今天逛awwwards的时候,被一个网站吸引了,简直刷新了我对网站的认知啊,太美好了,让我有忍不住必须推荐的冲动,为此我专门开设了一个新的子栏目“酷站推荐”,把以后看到的好网站推荐给大家。看这样的网站,真的是眼睛一直冒星星,故事温暖,交互很强,很像游戏,可是这是一个货真价实的网站哦,使用了canva...

transform变形在网页上的效果

transform变形在网页上的效果
这是一个小案例,展示了transform在网页上常见的几个效果。比如translate位置的移动,scale缩放,skew倾斜等。当然还应用了box-shadow投影,linear-gradient线...

预科班纯CSS仿站练习作业

预科班纯CSS仿站练习作业
预科班两个星期的html+css的课程快接近尾声,学员们零基础下还是很努力的完成了这个仿站作业。因为是零基础的授课,所以这个仿站案例有些代码写的不够精简,没有考虑更多的兼容性问题,在IE9以上应该是没...
Top