九天翔龙的技术博客

自己的学习心得

CSS3干货7:CSS中的not选择器

not 选择器用的少。 这天写资料的时候,看到别人写了一个例子有意思。 特此记录下,表示自己每天也算进步了一点。 not,就是“非,不是” 的意思。所以,not 选择器就是选择 “非xxx” 的标签。 一般格式如下: .xxx:not( 非的条件 ) .xxx:not(:nth-ch...

2019-08-14 22:20:11

阅读数 13

评论数 2

CSS3干货6:CSS中3D运用-3

前面的文章: CSS3干货4:CSS中3D运用 CSS3干货5:CSS中3D运用-2 今天做一个3D的box,能动的哦,还有鼠标交互的哦。 在抖音上看的一个效果。有45w+的点赞,还有n多人在求源码。 觉得有意思,自己也做了一个。 鼠标放上去前: 鼠标移动上去后: 主要知识...

2019-08-13 20:38:22

阅读数 44

评论数 2

如何调整Typora中的图片大小

今天用Typora 记笔记。 插入了一个图片。挖槽了呢,图片默认宽度 100%。太大了。 直接使用 菜单栏的插入图片就是个坑~! 好在 MD 文件本身就是基于HTML的。 可以直接使用 img 标签:<img src=“url” /> url中填写图片的路径...

2019-08-08 21:15:00

阅读数 79

评论数 3

妙用SVG,给自己暗恋的人表白吧~

七夕节,到了,各位同学,有没有暗恋的人啊 ,趁这个机会表白啊~ what?不好意思开口? 没关系,我们来用SVG做个表白动画,让对方知道我们在想她(他)。 啥?还不知道SVG是啥? 简单来讲,是在页面中使用矢量图形。它的英文全称为Scalable Vector Graphics,意思为可缩放...

2019-08-04 01:05:08

阅读数 533

评论数 5

CSS3干货5:CSS中3D运用-2

最近突然( ̄︶ ̄)↗ 涨了20几个粉丝,开心。 加上今天把重(gai)要(si)的工作完成了,更开心了。 就继续写篇有关CSS 3D的文章。算是上一篇的补充吧。>>戳这里看上一篇<< 先看效果: 对,就是做一个类似翻牌的效果。有没...

2019-08-01 00:21:23

阅读数 64

评论数 1

CSS3干货4:CSS中3D运用

这个假期,一直窝在屋里写东西,写的要奔溃了。写个博文,就当散心了~ T..T 3D功能,是CSS3增加的非常有意思的东西。当然,绝对不可能是真3D,CSS3只是模拟3D的视觉效果。 要玩转css3的3d,就必须了解几个词汇:3D坐标系,透视(perspective)、变换(transform)...

2019-07-29 17:55:11

阅读数 51

评论数 2

JavaScript页面打字效果--适合表白,展现程序员的浪漫

为了更好的给同学们讲解课程内容,今天在整理笔记(突然发现我特么太敬业了,放暑假都不忘工作,哭个先...)。 为了演示某个案例,做了一个页面打字效果,觉得甚为有趣,就记录下吧。 html结构如下: <div id="main"> ...

2019-07-21 18:41:04

阅读数 128

评论数 9

CSS3中伪元素::before和::after的经典用法

::before 和 ::after其实就是附着在元素前后的伪元素。 说他是“伪”元素的意思就是,元素不是在DOM中生成的,而是在浏览器渲染引擎渲染CSS的时候添加上去的。 如果百度它们,会发现有双冒号(::)和单冒号(:)两种写法。那是因为一开始伪元素用的是单冒号(:),后面有人觉得单冒号(:...

2019-07-18 01:23:44

阅读数 49

评论数 4

CSS干货3:另类投影效果

一天上午,刚下课,某同学兴致勃勃跑到办公室问问题。被一个投影效果难道了,问我怎么做。我看了眼说,切图。 如下所示: 但是,居然固执的问怎么用CSS写? 没办法,我忍住讲了半天课的嗓子疼,还是拿出了压箱底的CSS秘籍,写了个demo。 HTML结构如下: <div cl...

2019-06-26 01:13:39

阅读数 48

评论数 2

JavaScript+CSS3写一个自定义的响应式导航

这天中午,下午居然有两个同学在问我响应式导航的问题。怎么做,是个问题。但是,也没有大家想的那么复杂。 Bootstrap是个很不错的响应式框架,但是要想自定义样式还比较麻烦。 还是自己动手写一个最好~,想怎么改样式就怎么改。 整体思路: 1、响应式结合CSS3的@media 代码来做。判断...

2019-06-14 18:08:55

阅读数 83

评论数 0

仿3D效果的图片轮播

在网上看到了一个仿3D的轮播效果。很有意思,就模仿做了一下。 原示例可以参考http://www.jq22.com/jquery-info20579 jq22这个例子是用jQuery写的。我这里就用原生态JS写一次。采用面向对象的思路来写。 整体思路就是: 1、结合CSS3实现两边图片的倾...

2019-06-10 20:10:48

阅读数 134

评论数 3

SASS/SCSS环境的安装,以及webstorm配置SASS/SCSS

1.SASS安装 一、安装Ruby  SASS是用Ruby语言写的,必须先安装Ruby,然后再安装SASS。 不过,SASS的学习不用了解Ruby,只需要装好环境就是了。 安装Ruby点击这里,选择自己合适的版本就OK。 二、更新Ruby的源 安装SASS之前,请更新Ruby的源。因为国外...

2019-06-07 20:27:41

阅读数 133

评论数 2

如何从前端的角度去优化网页,提高网页的加载效率

一、减少文件数量,减少HTTP请求 图片个数: 可以采用“图片精灵”。把图片,尤其是雷打不动的图标,整合在一张图上。利用CSS背景背景的方式把各自的图标添加到对应的标签中。就像这样: 应用: <span class="icon icon-weixin&quo...

2019-06-06 13:03:30

阅读数 61

评论数 1

如何把数字转为大写的汉字

今天在财务跑账。财务的妹纸让我填大写的数字,瞬间不知道怎么填,对比着提示单,一个字一个字写了下来。 看着财务妹纸微笑着迷妹一般的望着我,我不仅陷入了沉思.......干脆写个JavaScript代码,来转换数字为大写的汉字吧。 说干就干~! 第一步:构造数据。雷打不同的数据,自然使用cons...

2019-05-27 17:56:39

阅读数 66

评论数 2

如何用JS判断标签是否含有某个类

(好久没更新了。有同学在催更了,看完毕业班辣眼睛的论文,眼睛痛,写个博文,就当休息吧。T..T) 有时候,我们需要判断标签是否含有某个类,以便采取对应的操作,比如隐藏这些标签之类的。 有如下结构: <div id="mydiv" class="h...

2019-05-10 23:07:56

阅读数 298

评论数 0

DOM:标签的classList属性

标签的classList属性,一看这个名字就是操作class类的。 这样,在className基础上,有多了一个可以操作类的方式。以前看书看的不够深入,了解的不多 !!!-_-,今天一个同学做日历作业用到了这个方法。遂看了看相关资料。记录下学习心得,新技能 get+1 。 看来,人是需要相互学...

2019-04-22 15:46:57

阅读数 71

评论数 0

CSS3神奇的样式 pointer-events: none;解决JS鼠标事件穿透到子标签

最近做一个案例演示的时候,遇到个小问题。要获取鼠标相对标签(为了方便称呼,我们叫它parent标签)的坐标,当然要用到event.offsetX和event.offsetY。 不过,如果鼠标移动到(也可以是点击)parent的子标签(称呼它child)后,就尴尬了,event.offsetX 和...

2019-04-11 19:07:51

阅读数 308

评论数 3

JavaScript事件捕获与冒泡

JavaScript的事件是个很神奇的东西,具有穿透功能。 举个例子,桌子上有一本书,用手拍书,其实也是在拍桌子。拍击书本的动作,“穿透”到了桌子上了。 不过JavaScript事件是怎么运作的? 一图看懂。 由此可以知道   1、一个完整的JS事件流是从window开始,最后回到wi...

2019-04-01 23:59:12

阅读数 35

评论数 0

DOM:超强的选择标签方法 querySelector 和 querySelectorAll

今天听课,看到上课的朋友在用querySelector和 querySelectorAll 。以前知道它们,但是用的很少。看朋友的写法很新奇,随整理下笔记,备忘。 个人觉得querySelector 和 querySelectorAll 是DOM中超强的选择标签的方式,因为他们接受的参数是类CS...

2019-03-28 22:30:50

阅读数 289

评论数 0

DOM:JavaScript如何获取标签所有的兄弟节点

JavaScript可以通过previousSibling和previousElementSibling,nextSibling和nextElementSibling获取紧邻的上一个,下一个兄弟(标签)节点。 但是这么做只能获取一个兄弟节点。如果要获取所有的兄弟节点呢? 方法一:原生态的JS方...

2019-03-23 17:38:46

阅读数 235

评论数 1

提示
确定要删除当前文章?
取消 删除