CSS3的开门效果
记得在2010年的时候，学了一下flex语言，看到一个示例是一个开门效果，那时感觉很高大上，虽然早已有了CSS3，但发现从网上找了一下类似这种效果的实现还是真的比较少，反正搜了一些相关的没有搜索到，点击图片查看效果，示例写的比较简单，右键源文件为相关代码。 运行结果 点击图片开门效果，门开了没关上，只能开一次 参考代码 <title>开门大吉-点击图片</title> <style type="text/css"> .imageBox{ margin: 10px auto; width: 300px; height: 300px; position: relative; overflow: hidden; } #bg_box{ width: 100%; height: 300px; position:absolute; top:0; left: 0; background:url("bg....
文章分类：前端技术 HTML/JS/CSS
简单的图片轮播效果实现（二）
背景描述 接着前面两篇轮播图片实现的文章，发现想要实现各种各样的效果都是可以的，这不再来奉上一篇从中间向周围扩散的实现。期初的构想是较为简单的，从一个5x5或7x7的矩阵中，先找出正中心点，然后再根据一个点分别向上、左、下、右的顺序逐步扩散去实现突破切换，实际上这种实现就束缚了必须是一个正方形的图像才能比较准确的从正中间向周围扩散，那就这样吧，等后期有机会了我再调整为能够满足长方形的实现，现在不是不能满足，得需要做一些兼容，并且如果是长方形的话，就无法从正中心点扩散了，先就这么着，你得信任这点我是可以做到的。如下几个图分别是5x5、7x7的分析图，其中椭圆形的框为最中间的一个点，放形中为以中心的斜下放开水旋转（构成一个圆形区域）的先后顺序，也就是将一个二维的数组转换为以这种结构包裹的新数组即可实现，参考如下： 参考代码 实现的Java代码为（示例的右键源文件中有同等的js的实现代码），其中...
文章分类：前端技术 HTML/JS/CSS
简单的图片轮播效果实现（一）
背景介绍 看了一下腾讯课堂这里的教程https://ke.qq.com/course/204364 （第22个小节） ，感觉这个效果值得拥有，于是就有了这个实例，目前实现的较为简单，从左到右和从右到左，理论上讲后期我会加上4个对角线和中心开始效果，转至实例页面：“/demo/simpleImageSwitch/index.html”，左右切换效果参考如下： （图片从左至右切换） 实现原理 实现原理比较简单，实际上就是把一个矩形划分成横向与纵向的坐标，再使用css的背景图坐标填充的方式定时轮询显示即可。所以基于此种方式的实现还可以有更多种的实现效果，比如从上至下、从下至上、从左上角至右下角、从右上角至左下角等一共9种方式的图片轮播切换。本篇文章共实现了从上至下、从左至右、左上至右下5中效果，其实搞清楚这个实例是如何写的之后“任何效果”都可以实现，以后有机会再继续丰富。其中左上至右下还是稍微复...
文章分类：前端技术 HTML/JS/CSS
CSS3画太极图
看了下兄弟连的CSS3视频讲解，觉得圆角边框处值得学习学习，就按照视频中的讲解也做了一份儿示例，算是加深印象吧。示例中有使用纯css画出一个太极图的效果，瞬间感觉好像很高大上的样子，东西比较简单，作为总结分享的一个知识点，特别需要注意的是视频中的示例存在一个小小的兼容性问题，由于视频中的运行示例在chrome下显示正常，放到IE10下时的运行效果为： 也就是说在IE10下面出现的效果是多出边框与背景共存的一个宽度X的像素，后经过查找资料找到添加 background-clip:content-box;样式即可，具体可以在IE10下或chrome等浏览器下运行查看示例效果。 参考代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>div的圆角学习</title> <style type="tex...
文章分类：前端技术 HTML/JS/CSS
使用CSS3山寨一款iPhone效果
一款渣防iPhone效果的实现，看了一下实现这种效果的视频教程，学着去做了一款，示例中的效果为黑色的iPhone，这里给换成白色的，审美和专业方面经不起推敲，大致看上去像那么回事儿就可以了，使用CSS3实现的。 运行效果 参考代码 <!DOCTYPE html> <html> <head> <title>山寨iPhone</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <style type="text/css"> body{ margin: 0; padding: 0; background-color: #1a1a1a; } #phone{ width:230px; height:450px; background-color: rgba(240,240,240 , 0.9); ...
文章分类：前端技术 HTML/JS/CSS
CSS3效果的幽灵按钮
前几天在腾讯课堂看了下幽灵按钮的实现，凭着感觉实现了一下，不知道这种效果是不是传说的幽灵按钮效果，只在Chrome与Firefox兼容较好，Chrome效果最佳，点击这里查看效果。 运行效果 参考代码 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>幽灵按钮,在Chrome与Firefox下运行</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style type="text/css"> body{ margin: 0; padding: 0; font-size: 12px; } #box{ width: 800px; height: 300px; margin: 100px ...
文章分类：前端技术 HTML/JS/CSS
CSS3的圆角属性学习及示例
参考示例 参考代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>div的圆角学习</title> <style type="text/css"> #div1{ width: 200px; height: 100px; border: 2px solid red; line-height: 100px; text-align: center; font-weight: bold; } #div2{ width: 200px; height: 100px; border: 2px solid red; line-height: 100px; text-align: center; font-weight: bold; border-radius: 20px; } #div3{ width: 200px; height:...
文章分类：前端技术 HTML/JS/CSS
仿Baidu百科中的内容链接
背景介绍 前一段项目中使用到了仿照百度百科中内容查看方式的实现，今天抽了点时间将其单独摘出来，分享一下，方便再使用。下面对于这个小功能的特点进行一下 页面右侧浮动显示快捷链接菜单 滚动条滚动到某个位置时自动选中当前位置的链接菜单 点击某个链接菜单滚动条定位到相关的位置 运行效果 相关下载 在线预览页面已取消，可见历史上的本站"/demo/scrollMenu/index.html" 注 上述许多内容已经过时和过期了，留存本篇文章仅为方便个人查看，原始文章的信息参考： 原始链接：https://www.chendd.cn/information/viewInformation/myLog/135.a 最后更新：2015-08-07 14:39:58 访问次数：278 评论次数：0 点赞个数：0...
文章分类：前端技术 HTML/JS/CSS
闲话一会儿ZDialog的皮肤吧
ZDialog是个看上去还不错的JS弹出框组件，最近项目里面用到了这个，使用起来挺简单的。前几天想到了看看网上能否找到它的其他皮肤样式，结果还真没有搜索到，想想我是不是也装有PS呢，于是就试了试的打开了将其图片的主题颜色给改了，于是就有了其他的颜色的皮肤了，呵呵。这里就说说换它的皮肤吧，运行起来它的例子后F12一下可以看到它总共使用了10张 png的小图片，使用PS将其图片的颜色给统一换掉就成了新的一套皮肤了。PS水平太渣呀，下面贴上几个图片。 1、自带的皮肤样式截图： 2、修改后的样式截图： 就这样吧，也好，罢了，咳咳咳咳。 注 上述许多内容已经过时和过期了，留存本篇文章仅为方便个人查看，原始文章的信息参考： 原始链接：https://www.chendd.cn/information/viewInformation/other/106.a 最后更新：2014-05-24 00:04:0...
文章分类：前端技术 HTML/JS/CSS
网页设计—仿QQ做的一个网页
前段时间看了下传智播客的html方面的视频讲解，确实有些收获，先感谢一下那些无私的讲师。这两天有点时间想想作个页面出来吧，正好检查一下水平看看，于是就开始做了，另外一个原因是想着开发人员写这种静态代码，可能会更好。外行人乍一眼看上去应该觉得挺像吧，在专业的设计师眼里应该觉得很糙吧。 QQ原网址：http://pc.qq.com/ 纯eclipse下手写，在FF下测试的，写完了之后发现支持IE8以上的浏览器，IE6-7下还是挺乱的，这个就不用管了。 页面中的所有图片都来自QQ网页中的，值得说的是它里面全是用的一张大背景图，然后使用坐标的形式来引用一个一个的小图标，虽然很早就知道这种方式，但一直没用到过，不会，页面预览效果图如下： html源码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.or...
文章分类：前端技术 HTML/JS/CSS
运营时间： 天
用户数量： 人
文章数量： 篇
评论数量： 条
点赞个数： 个
最后更新：