ALLstudydaydayup-优快云博客

原创原生js具体实现Ajax请求的四个步骤

什么是Ajax 全称：Asynchronous JavaScript and XML 大概实现步骤：创建 XMLHttpRequest 对象发出 HTTP 请求发出 HTTP 请求更新网页数据

2020-08-12 09:11:56 1429

来look look效果原作者是油管上的Online Tutorials，做了些改变。现在就来实现它 1、准备知识主要是js，添加元素节点、类名、样式，事件监听，css的配合使用。 2、HTML结构只需要一个标签，来装方块，和展示图片，自己随意用section，div都可以 3、CSS样式这里的主要工作是展示默认时（打开页面）的样子，span就是方块，它将铺满整个容器，盖住背景图。 body { height: 100vh; margin: 0; p

2020-07-19 22:55:27 549

原创 CSS3做一个3D展示相册

先来康康效果（录不好，就只能是图片了）原作者是油管上的Online Tutorials 现在就来实现它 1、准备知识 transform-style: preserve-3d;对3D变换有空间概念，其次就是perspective()；这个属性的理解了，想了解更多可以去MDN,相关博客文章，详细了解（主要我也理解不到位） 2、HTML结构这里有个需要说下style="–i:1"，这个是css的原生变量，这了就声明了一个变量并赋值，在这里用变量，主要是方便后面样式的添加，当然变量还有高级的用法，就去查相关

2020-07-12 23:58:47 457

原创用CSS3做个炫酷的图标hover3D效果

来分享个图标效果，康康效果相当炫酷的3D效果，原作者是油管上的CodingNepat. 准备知识：该案例主要运用了css3的transform属性，和神奇的想法。 1、先来搭建HTML骨架这里就只展示一个图标的结构，其他两个都是一样的，还有记得引入font-awesome哦 2、写下这三个图标的基本样式这里让图标在整个屏幕的居中，这里的hover效果是整个图标的，可以感受下，是怎么变化的。 3、接下来就是体现3d效果的了给每个i都加个边框再来利用transform让他向右上方移动一点，

2020-06-21 15:48:46 701

原创用CSS3做个文字聚光灯效果

来分享个聚光灯动画，先看看效果先来准备下知识点：主要是background-clip: text;和clip-path，这两个遮罩属性 1、先来搭建一下HTML结构吧 HMTL这侧很简单，只需要一段文字。 2、再来写下基本样式让整个文字处于屏幕中间，背景黑色。 3、再来就是关键部分了（这里我用了伪元素让他于父元素完全重合，如果不想看文字有个底色的话，可以不用伪元素，直接写在p身上就可以，我这是因为最先是做了底色的，所以用的伪元素。）首先给一个背景颜色，这里是用的渐变，好看些，然后让文字的颜

2020-06-07 23:09:29 700

原创用CSS3做一个图片翻牌效果

效果展示思路分析首先是两张图片应该是叠在一起的，然后要让他旋转的时候展示另一张图片。知识准备： transform变形，定位，还有backface-visibility，这后面说什么用的。 1、先来搭建HTML结构需要两张图片，可以用自己喜欢的，结构也可以写的简单些。 2、然后再来写下基础样式把父容器放在中间点的位置，方便看，这里说下perspective这个属性，视域，通俗来讲就是值越大，效果也扁平化，取决于盒子大小而异，这就需要去调下值，到一个合适的位置。 3、再来就是如何让一个旋转时显

2020-06-01 00:14:36 941

原创 CSS3做一个气泡的动画效果

来学习分享一下用CSS3做一个简单的气泡飘飘的动画效果 1、首先来搭建一个基本HTML结构先来个10个div，这也就是我们的泡泡了。 2、接下来进入css样式设置设置一下body，并给他一个合适的背景颜色，撑满整个屏幕，然后再来设置一下泡泡的样式了。给泡泡个固定定位，方便跑来跑去，预备一个泡泡动画 3、再来就是写个泡泡飘飘的动画了我们用固定定位来控制垂直方向的移动，水平方向用transform的translate来控制，大概写三个关键帧，想要复杂写也可多写些。现在泡泡已经能动起来了，但是

2020-05-20 23:53:00 5988