css3
文章平均质量分 77
wukongk
执着,无耐心。
展开
-
css3中的部分属性
1、阴影box-shadow:x轴偏移量 y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]注意:inset(内阴影) 可以写在参数的第一个或最后一个,其它位置是无效的实例正值表示在对象的底部,负值表示在对象的顶部。.boxshadow-outset{ width:100px;height:100px; box-shadow:4px 4p原创 2016-05-30 20:42:12 · 5873 阅读 · 1 评论 -
css+js实现图片反转效果
一个图片,点击图片图片反转180deg后,出现图片的简介 html部分 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem aliquid laboriosam a ipsam ducimus ea nobis officiis dignissimos co原创 2016-07-16 12:23:11 · 5171 阅读 · 0 评论 -
lineheight使图片多行文字垂直居中
多行文字垂直居中html部分: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo voluptatum beatae officiis doloribus culpa et autem velit voluptatem quidem non, tempora, pariatur veritatis转载 2016-06-27 19:37:17 · 540 阅读 · 0 评论 -
CSS3实现炫酷进度条
看了一个进度条很漂亮,所以自己试试看html 0 css样式:* { margin: 0; padding: 0; font-family: 'microsoft yahei'; } html,body { width: 100%; height: 100%; background-color: #222; }原创 2016-06-10 13:32:28 · 2356 阅读 · 1 评论 -
css3中-webkit-text-size-adjust
1、当样式表里font-size2、-webkit-text-size-adjust放在body上会导致页面缩放失效3、body会继承定义在html的样式4、用-webkit-text-size-adjust不要定义成可继承的或全局的转载 2016-06-08 20:02:41 · 398 阅读 · 0 评论 -
CSS3中的display: box
今天看源码时,看到了display: -webkit-box;display: box; 似乎是第一次见,上网搜寻:display: box;的声明其实就是弹性盒子模型的声明,此声明下的子元素的行为与表现与CSS2中的传统盒子模型的表现是有显著的差异的。毕竟属于CSS3的东西,目前而言,仅Firefox/Chrome/Safari浏览器支持弹性盒子模型(IE9不详,Opera尚原创 2016-06-08 17:22:48 · 682 阅读 · 0 评论 -
CSS3实现二级菜单
今天看了一个demo,原demo虽说是CSS3实现,但其中也使用了js,再一个里面的代码有些地方,我觉得还可以优化 ,所以自己就尝试着用css3实现一下我想说: 不论写一个多么炫酷的demo,z-index的值都最好不要超过2下面是源码:html部分 Animated Menu Dashboard原创 2016-06-08 16:20:40 · 2196 阅读 · 0 评论 -
js点击列表的第一个元素,不起作用,最后一个元素起作用
在网上看到 手风琴菜单的demo,就想来模仿着做一个html内容如下: First Menu Home About Us Services原创 2016-06-06 20:46:28 · 1850 阅读 · 0 评论 -
offsetTop和offset().top
前段时间写了一个视觉差滚动的demo,是用js实现的。第二次看这个例子,我想封装一个jquery插件。首先demo中有两个button需要在jq中对它们进行定位,然而问题来了我先得到第一张图片的位置,对图片中的button的top进行定位时,想法是将css样式中的top设置成this.img.offset().top + this.img.height() / 2 - this原创 2016-06-01 16:34:09 · 7635 阅读 · 0 评论 -
CSS3实现立体菜单
html结构: Home About Servics Portfolio Blog Contact CSS3:* { margin:0; padding: 0; font-family: 'Microsoft原创 2016-05-31 19:55:15 · 628 阅读 · 0 评论 -
京东分类栏
今天把京东的分类栏给扒下来了,js部分是我自己写的,我不知道除了onmouseover和onmouseout之外,是否还有其他的方法,等以后遇到,会再来补充。html部分: 全部商品分类 家用电器 > 手机、数码、京东通信 >原创 2016-05-18 14:42:51 · 1594 阅读 · 0 评论 -
利用视觉差实现图片滑动
今天看了别人写的图片滑动,看起来很酷,读源码时,似乎有些困难,就模仿着写了一个,实现的效果与原网页相同,不过自己的js代码,逻辑简单,有待改进。ps:前两天写了旋转木马,那个兼容性不好,今天写这个网页的时候,也是按照这个思路,在谷歌浏览器上运行很好,火狐很多功能不能实现,由于wrap——panel使用了绝对定位,就将translate平移改为了left。改动后,各个浏览器运行的效果不错原创 2016-05-07 18:14:25 · 1153 阅读 · 0 评论 -
CSS3 transform实现图片旋转木马3D浏览效果
首先DOM结构: 舞台>容器>图片为舞台设置样式:perspective: 800px;为容器设置样式:transform-style: preserve-3d;position: relative;transition: transform .8s; 元素本身style属性设置为transform: rotateY(0deg);为后面容器旋转获得初始值为图片设置样式:positi原创 2016-04-24 11:38:20 · 3486 阅读 · 0 评论