利用CSS变量实现炫酷的悬浮效果
1Deshun 发布于 6年前 (2018-07-02) 3324℃ 评论(0) 赞 (2)
最近,我从 Grover网站 上发现以一个好玩儿的悬停动画,这个动画是将鼠标移动到订阅按钮上移动光标,会跟随光标实现相应的彩色渐变。这个想法很简单,但是它能使这个按钮脱颖而出,人们一下子就注意到它了,增加了点击的概率。怎样才能达到这个效果,使我们的网站脱颖而出呢?其实,它并不像我...
Deshun 发布于 6年前 (2018-07-02) 3324℃ 评论(0) 赞 (2)
最近,我从 Grover网站 上发现以一个好玩儿的悬停动画,这个动画是将鼠标移动到订阅按钮上移动光标,会跟随光标实现相应的彩色渐变。这个想法很简单,但是它能使这个按钮脱颖而出,人们一下子就注意到它了,增加了点击的概率。怎样才能达到这个效果,使我们的网站脱颖而出呢?其实,它并不像我...
Deshun 发布于 6年前 (2018-06-22) 3077℃ 评论(0) 赞 (0)
关于使用 inline-block 来代替 float 的讨论也挺多的,最常见的就是使用 inline-block 来代替 float 进行布局。不过有一个问题,就是使用 inline-block 的元素之间会存在 4-5px 的空白间隙。今天就记录...
Deshun 发布于 6年前 (2018-06-07) 17377℃ 评论(0) 赞 (12)
尝试给元素添加伪类,但是一直不显示。HTML:<span class="before"> 我要前缀 </span> <p class="before"> 我要前缀 <...
Deshun 发布于 6年前 (2018-06-05) 10480℃ 评论(0) 赞 (25)
今天才发现,给文字设置 letter-spacing 再设置 text-align: center; ,文字会整体往左偏移,不能居中。 给文字嵌套了一个 span 标签,再选择文字可以看出,letter-spacing 给每个字的右边都加了一个间距。设置居中的...
Deshun 发布于 6年前 (2018-05-31) 6596℃ 评论(0) 赞 (3)
cursor 属性规定要显示的光标的类型(形状),该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状(不过 CSS2.1 没有定义由哪个边界确定这个范围)。默认值:auto;继承性:yes;版本:CSS2;JavaScript 语法:object.style.cursor="crosshair";所有主流浏览器都支持 cursor 属性。注释:Opera 9.3 和 S...
Deshun 发布于 6年前 (2018-05-26) 16583℃ 评论(0) 赞 (9)
在开发过程中,会碰到一些选择器的需求:例如使列表中的第一项或者最后一项显示不同的样式 、列表中的奇数或者偶数项显示不同的背景色 . . . 等等。我们可以通过 CSS 来实现这样的效果,CSS 给我们提供了几个样式参数:first-child、last-child、n...
Deshun 发布于 6年前 (2018-05-16) 11465℃ 评论(0) 赞 (6)
有的网站字体,用户电脑上没有,如果只是单纯的定义 font-family 是不起效的。我们可以将字体文件放置在网站目录,直接引入,这样即使用户电脑上没有该字体也能自动加载。设置方法如下:css 代码:自定义字体@font-face { font-family: 'MyFont'; /*字体名称*/ &...
Deshun 发布于 6年前 (2018-05-10) 10025℃ 评论(0) 赞 (2)
使用手机浏览页面的时候,有些浏览器内核的原因,点击 img 标签图片会自动放大,长按会弹出下载或者保存选项。在写页面时如何避免此类情况的发生呢?我们可以使用 CSS 来屏蔽图片的选中。我整理了两个方案:1、首先想到的是通过 JS 实现,对 touch 事件做处理。window.o...
Deshun 发布于 6年前 (2018-04-25) 33184℃ 评论(3) 赞 (29)
input 标签的 file 属性,在没有选择文件的情况下,默认显示一条文字“未选择任何文件”。在选择文件后,该条文字会变成路径和文件的名称。如何去掉其默认的“未选择任何文件”提示呢?查阅资料,没有发现可以直接修改的办法,但是我们可以通过其他方法,实现自定义提示文字的效果。我通过...
Deshun 发布于 6年前 (2018-04-17) 5803℃ 评论(0) 赞 (0)
CSS初始化可以简单快速的实现常用标签的属性设定,尽量减少各浏览器之间的兼容性问题。今天整理一下各大网站的CSS初始化代码:1、百度 CSS初始化 https://www.baidu.com统一初始化body, h1, h2, h3, h4, h5, h6, hr, p, blockquote,&n...