css
文章平均质量分 68
夏末终秋凉
你寻求的幸福,其实不在远处,它就是你现在一直走的路
展开
-
css 伪类选择器相关
伪类选择器主要是用于修改a标签的样式,一共有四种,分别是link(默认样式)、visited(访问过后的样式)、hover(鼠标悬浮的样式)、active(鼠标长按的样式);举例说明: Title a:link{color:blue} a:visited{color:pink} a:hover{color:de原创 2016-12-12 13:35:54 · 292 阅读 · 0 评论 -
苹果底部菜单效果实现
关于苹果底部效果,一般人肯定不会陌生,由于该效果不止在苹果电脑上出现,在很多网站都运用到了该效果.效果看起来还是比较酷炫的,当鼠标移动过去时,会发现对应的菜单会出现放大的效果.图片展示:说下原理:1.确认事件源:对应的菜单按钮,为img实现2.确认事件属性:onmousemove,这里会出现误区,因为很多人认为是当鼠标悬浮在对应菜单项上时,该菜单才会发生变化,其实不然,原创 2016-12-29 19:59:20 · 1700 阅读 · 0 评论 -
3D轮播图
之前看了一次公开课,讲的是3d轮播图,效果挺酷炫的。代码奉上:原创 2016-12-13 11:47:10 · 700 阅读 · 0 评论 -
3d照片效果实现
3D球形 *{ padding: 0; margin: 0; } div{ width: 300px; height: 300px; /*border:1px solid #00aa00;*/ pe原创 2016-12-16 09:54:11 · 473 阅读 · 0 评论 -
关于button按钮设置padding失效的原因
因为button浏览器已经自己设置了box-sizing:border-box,所以无效。另外还有 input[type="submit"], input[type="reset"], input[type="file"]参考资料:点击打开链接原创 2016-12-15 18:45:36 · 3560 阅读 · 0 评论 -
css3画一个运动的钟表
思路如下1.定义一个盒子,然后通过border-radius变为圆2.画6条线,然后通过定位,把这6条线设置到大盒子里,作为钟表刻度3.画一个小圆,通过定位将中间部分的线条遮住4.画中心点和时分秒针5.最后在设置运动一圈时分秒针的动画,大功告成上代码: 钟表border-radius *{padding:0;margi原创 2016-12-13 16:00:21 · 3270 阅读 · 0 评论 -
css3模块之动画animation
在animation出来之前,动画效果需要通过js实现,但是animation的诞生可以说是css3中非常独特的属性之一基本用法,这里我用连写属性来说明(其实吧,单独属性我记不住)----animation:动画名 动画所需时间 动画曲线 延迟时间 动画重复次数 是否往复。一般来说,动画名可以随意指定,这个属于用户自定义;动画曲线以匀速运动最为常见(line原创 2016-12-13 14:03:49 · 773 阅读 · 0 评论 -
css3过渡transition
css3标志属性之一的transition,可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。原创 2016-12-12 19:26:03 · 443 阅读 · 0 评论 -
js实现左右轮播图效果
一般轮播图为左右、上下、3D或者渐变轮播,忙里偷闲写了一个左右轮播,该效果比较常见,但是实用性比较强。 Title *{ padding: 0; margin: 0;} div{ width: 520px; height: 280px; border:1px原创 2016-12-13 10:39:38 · 9826 阅读 · 0 评论 -
css3transform--2D篇--rotate
说起css3,不得不提css3的维度模块(字我也不晓得写错没),维度比较简单,就是一个transform,但是呢,该属性对应的值却不少。 首当其冲的是rotate(XXdeg) ,该值表示元素在平面旋转的度数,也就是定义2D旋转。原创 2016-12-13 09:18:22 · 666 阅读 · 0 评论 -
css3-2D-transform之translate平移
translate平移应该也算是transform中用的比较多的属性之一了,用法:transform:translate(x轴平移,y轴平移),也可以单独设置:transform:translateX(),transform:translateY()。如果只设置transform:translate(值),那么只会在X轴进行平移。后期在transform-3D还会有transform:transl原创 2016-12-13 10:56:16 · 51074 阅读 · 0 评论 -
关于对同一个盒子同时设置相对定位和浮动或者绝对定位和浮动的问题
可能细心的朋友在查看某些网页的时候发现,某些盒子或是图片既设置了相对定位又设置了浮动,觉得很奇怪,其实呢,这个设置是非常的正常。 比如,在布局页面的时候,我希望导航和轮播图一左一右的进行显示,就可以对导航设置左浮动float。轮播图右浮动。但是呢、如果导航里面有些小图标之类的东西要进行绝对定位absolute操作时,那么就可以对该导航设置相对定位relative了,相当于小图标的已定位的祖原创 2016-12-13 09:45:05 · 9715 阅读 · 0 评论 -
css3 2D--transform--scale缩放
再来说说css3 2Dtransform之scale, 该属性理解也很简单,可以让元素在水平和垂直方向进行缩放,请注意缩放这个词语,说明它是既可以将元素方法,也可以将元素缩小的。该属性的用法如下: transform:scale(水平缩放比例,垂直缩放比例)//注意是缩放比例,是不用带单位的,表示元素的宽高*对应的比例即为缩放的具体值。 直接上代码:原创 2016-12-13 09:32:26 · 2677 阅读 · 0 评论 -
伪类选择器hover应用
伪类选择器hover 主要是当鼠标悬停在某个元素上时,其样式会根据设定的属性进行变化,一般用于文字或是背景图片的修改; 说多了都是眼泪,直接上代码! Eg: a-day1 *{ padding: 0; margin: 0; } ul{原创 2016-12-12 14:07:51 · 2219 阅读 · 0 评论 -
js运动(2)----缓冲运动
匀速运动1.关于匀速运动,百度的解释是这样的 初中物理规定速度大小不变的运动机械运动叫做匀速运动。初中物理教学中速度即速率,不考虑速度的方向。 高中物理规定任意相同时间内通过相同的位移的运动叫做匀速运动。即:速度大小和方向都不改变的运动,或者是加速度为零的运动。百度的解释确实通俗易懂,其实在js中我们的关注点也差不多: 运动过程中速度需要始终保持一致方向需固定2.形象的说明一下Cre原创 2017-01-13 20:33:46 · 618 阅读 · 0 评论