栏目: CSS/HTML

CSS自定义滚动条样式案例详解

当内容超出容器时,容器会出现滚动条,其自带的滚动条有时无法满足我们审美要求,那么我们可以通过css伪类来实现对滚动条的自定义。首先我们要了解滚动条。滚动条从外观来看是由两部分组成:1,可以滑动的部分,我们叫它滑块2,滚动条的轨道,即滑块的轨道,一般来说滑块的颜色比轨道的颜色深。滚动条的css样式主要...

2021-08-24 118 0 0 阅读全文

通过CSS数学函数实现动画特效

大家好,这里是CSS兼WebGL魔法使——alphardex。之前一直在玩three.js,接触了很多数学函数,用它们创造过很多特效。于是我思考:能否在CSS中也用上这些数学函数,但发现CSS目前还没有,据说以后的新规范会纳入,估计也要等很久。然而,我们可以通过一些小技巧,来创作出一些属于自己的CS...

2021-08-24 156 0 0 阅读全文

ClientX、OffsetX、ScreenX、PageX区别

开发中我们是离不开事件的,有关鼠标的事件就会牵扯到event对象,其中就包括了各种X、Y的值,区别他们最直接的就是看图。screenX、screenYscreenX设置或获取获取鼠标指针位置相对于电脑屏幕的x坐标screenY设置或获取鼠标指针位置相对于电脑屏幕的y坐标offsetX、offsetY...

2021-09-15 97 0 0 阅读全文

微信小程序 获取用户信息并保存登录状态

、微信小程序的运行环境不是在浏览器下运行的。所以不能以cookie来维护登录态。下面我就来说说我根据官方给出的方法来写出的维护登录态的方法吧。一、登录态维护官方的文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-login.html#wxl...

2021-06-19 121 0 0 阅读全文

HTML5 Canvas平铺的几种方法

最近在做个网站项目,用到很多canvas,有个需求是drawImage把图片画在canvas里面,图片比较小,需要平铺效果,当背景图。PS(背景图高宽10px,需要画的画布高宽200px)由于一开始是drawImage出来的,所以采用了方法onevarcanvas=document.getEleme...

2021-06-13 206 0 0 阅读全文

CSS变形Transform(2d)

前面的话CSS变形transform是一些效果的集合,主要是移动、旋转、缩放和倾斜这四种基本操作,还可以通过设置matrix矩阵来实现更复杂的效果。变形transform可以实现2D和3D两种效果。2D变形涉及的属性主要有transform变形函数和transform-origin变形原点。本文将详...

2021-08-31 120 0 0 阅读全文

深入理解CSS弹性盒模型Flex

前面的话CSS3引入了一种新的布局模型——flex布局。flex是flexiblebox的缩写,一般称之为弹性盒模型。和CSS3其他属性不一样,flexbox并不是一个属性,而是一个模块,包括多个CSS3属性。flex布局提供一种更加有效的方式来进行容器内的项目布局,以适应各种类型的显示设备和各种尺...

2021-08-31 118 0 0 阅读全文

OpenLayers基础教程—点要素图层的聚合显示

1、在很多情况下,点要素图层中的要素数量可能会成百上千,这时候如果不做任何处理直接加载到地图上不仅会使用户视觉体验下降,而且也会造成地图界面的卡顿。下面这段代码创建了1000个随机点进行显示:OpenLayershtml,body,#map{width:100%;height:100%;margin...

2021-09-15 103 0 0 阅读全文

理解CSS视觉格式化

前面的话CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了。实际上,盒模型只是CSS视觉格式化的一部分。视觉格式化分为块级和行内两种处理方式。理解视觉格式化,可以确定得到的效果是应该显示的正确效果,还是浏览器兼容性的bug。下面将详细介绍CSS视觉格式化术语解释了解CSS视觉格式化之前...

2021-08-31 99 0 0 阅读全文

理解CSS前景色和透明度

前面的话颜色的出现让网页不再只是黑白,运用好颜色设计,能让网页增色不少。一个网页给人们留下的第一印象实际上就是它的整体颜色。关于如何设置颜色,请移步CSS的6种颜色模式。实际上,颜色的应用主要分为前景色、背景色和透明三个部分。本文主要介绍前景色和透明度。colorcolor前景色值:|inherit...

2021-08-31 100 0 0 阅读全文

CSS混合模式

前面的话深入理解CSS定位中的堆叠Z-Index只是解决两个元素覆盖,谁离用户更近的问题。而CSS混合模式,则是处理两个元素覆盖部分如何混合的问题。如果了解photoshop的话,对这种现象应该不陌生。CSS3有两个与混合模式相关的属性:mix-blend-mode和background-blend...

2021-08-31 83 0 0 阅读全文

CSS滤镜

前面的话CSS滤镜filter用于模糊、锐化、元素变色等操作,通常适用于图片、背景等。本文将详细介绍CSS滤镜filter语法filter初始值:none应用于:所有元素继承性:无值:none|blur()|brightness()|contrast()|drop-shadow()|grayscal...

2021-08-31 142 0 0 阅读全文

CSS页面渲染优化属性Will-Change

##前面的话当我们通过某些行为(点击、移动或滚动)触发页面进行大面积绘制的时候,浏览器往往是没有准备的,只能被动使用CPU去计算与重绘,由于没有事先准备,应付渲染够呛,于是掉帧卡顿。而CSS属性will-change为web开发者提供了一种告知浏览器该元素会有哪些变化的方法,这样浏览器可以在元素属性...

2021-08-31 127 0 0 阅读全文

微信小程序开发之选项卡(窗口底部TabBar)页面切换

微信小程序开发中窗口底部tab栏切换页面很简单很方便.代码:1.app.json//app.json{"pages":["pages/index/index","pages/logs/logs"],"window":{&...

2021-06-15 105 0 0 阅读全文

20分钟让你学会Canvas,Canvas详细教程

下面就让我们一同走入canvas的神奇世界!?1.初级阶段——师傅领进门~?(1)canvas是什么?我们翻译一下这个单词,会发现它有「画布」的意思。画布画布不就是绘制图形的么?不过不同的是canvas元素是在网页上绘制图形!其实canvas元素就是使用JavaScript在网页上绘制图像。而绘制的...

2021-08-27 147 0 0 阅读全文

深入理解CSS溢出Overflow

前面的话当一个元素固定为某个特定大小,但内容在元素中放不下。此时就可以利用overflow属性来控制这种情况定义overflow溢出值:visible|hidden|scroll|auto|inherit初始值:visible应用于:块级元素、替换元素、表单元格继承性:无[注意]除了IE7-浏览器外...

2021-08-25 140 0 0 阅读全文

深入理解CSS定位中的偏移

前面的话CSS有三种基本的布局机制:普通流、深入理解CSS浮动和绝对定位。利用定位,可以准确地定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。但元素究竟如何定位,定位到什么位置,主要依靠top/right/bottom/left这四个偏移属性。本文就定...

2021-08-25 138 0 0 阅读全文

通过CSS实现逼真水滴动效

哈喽哈喽!CSS真的好好玩啊,哈哈,反正我是爱了,空闲写着玩。画画不好的我乐了,下面就是一个用CSS3动画完成的模仿水珠的动效,其中主要就是会使用CSS设置阴影效果以及@keyframes关键帧和一些选择器的技术,快来学习吧!!!?实现效果:就很nice你也通过一下网址进行访问水滴点击进入灵感:看到...

2021-08-18 118 0 0 阅读全文

Js+Css+Html实现代码雨

先看看效果:HTML代码:codeby-zhenyu.shajs代码:(function(){varlastTime=0;varvendors=['ms','moz','webkit','o'];for(varx=0;x<vendors.length&&!window.requ...

2021-06-19 112 0 0 阅读全文

深入理解CSS定位中的堆叠Z-Index

前面的话对于所有定位,最后都不免遇到两个元素试图放在同一位置上的情况。显然,其中一个必须盖住另一个。但,如何控制哪个元素放在上层,这就引入了属性z-index定义利用z-index,可以改变元素相互覆盖的顺序。这个属性的名字由坐标系统得来,其中从左向右是x轴,从上到下是y轴。从屏幕到用户是z轴。在这...

2021-08-25 154 0 0 阅读全文