我用 CSS3 实现了一个超炫的 3D 加载动画
今天给大家带来一个非常炫酷的CSS3加载Loading动画，它的特别之处在于，整个Loading动画呈现出了3D的视觉效果。这个Loading加载动画由12个3D圆柱体围成一个椭圆形，同时这12个圆柱体依次波浪式地起伏，从而传递给用户“正在加载”的信息。 效果预览 代码实现 HTML代码 HTML代 ...
Amazing！巧用 CSS 视差实现酷炫交互动效
本文将介绍利用 CSS 实现滚动视差效果的一个小技巧，并且，利用这个技巧来制作一些有意思的交互特效。 关于使用 CSS 实现滚动视差效果，在之前有一篇文章详细描述过具体方案 - CSS 实现视差效果，感兴趣的同学可以先看看这篇文章。 这里，会运用上这样一种纯 CSS 的视差技巧： 使用 transf ...
HTTP：聊一聊HTTP中的强制缓存
http响应response headers中会有一个cache-control，这个参数就是用来做强制缓存的 一、什么是强制缓存 强制缓存就是服务端告诉客户端某些资源（JS CSS IMG）需要按照某种方法存在客户端本地，下次请求时直接从本地缓存中获取资源，不用再通过服务器，提高了网页加载速度。 ...
CSS阶段试手作品——CYTUS Ⅱ官网制作
网页Cytus Ⅱ的制作 整体布局 单栏布局，整体按顺序分为以下几个板块： 页首下载、新闻表单、角色轮播图、视频、页尾以及侧边栏 要尽可能把自己的所有知识用上，所以可能会有和原网页写法不同，但基本样式差不多 页首下载 背景图片 .head { width: 100%; height: 960px; ...
SVG 和 CSS3 实现一个超酷爱心 Like 按钮
在现代网页中，我们经常可以在一些文章、视频和图片页面上找到”Like”按钮，并且通过点击该按钮来表示自己对该内容的喜欢或者不喜欢。大部分”Like”按钮是纯文本按钮或者图片按钮，如果你想让它们具有特别的动画特效，那么我们就需要用到CSS3或者JavaScript了。本文给大家带来一个带有爱心散列动画 ...
24张图攻克border-image
大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 👍 加我微信：frontendpicker，一起学习交流前端，成为更优秀的工程师～关注公众号：搞前端的半夏,了解更多前端知识! 点我探索新世界！ 原文链接 ==>http://sylblog.xin/archi ...
用css制作旋转的立方体
作者：安小轩 原文链接：https://juejin.cn/post/7086272341994536974 实现一个旋转的立方体，只需要用css的基本属性就可以实现。我们一起看看吧~ 一：transform 基本属性 transform可以实现元素的2D或3D转换，可以对元素进行旋转，缩放，移动， ...
浅谈前端性能优化
前端性能优化主要分两块： 一是资源加载 1.多使用内存、缓存和其他方法 2.减少CPU计算量，减少网络加载耗时。 以上适用所有编程的性能优化-空间换时间 3.减少资源体积：压缩代码，图片精灵 4.减少访问次数：合并代码（js模块化，最后打包成一个JS）、SSR服务器端渲染，缓存 5.使用更快的CDN ...
浏览器的渲染过程
一、从用户请求到浏览器渲染的过程大致如下 1.用户输入域名，然后DNS解析成IP地址 2.浏览器根据IP地址请求服务器 3.服务器响应http请求，并返回给浏览器 4.浏览开始渲染： 。根据html，生成DOM TREE 。根据css，生成CSS TREE 。将DOM TREE和CSS TREE结合 ...
关于 background-image 渐变gradient()那些事！
大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 👍 加我微信：frontendpicker，一起学习交流前端，成为更优秀的工程师～关注公众号：搞前端的半夏,了解更多前端知识! 点我探索新世界！ 原文链接 ==>http://sylblog.xin/archi ...
当顶部导航栏遮挡住链接对象部分内容怎么办
想必大部分做顶部导航栏（position: fixed;）的都遇见过导航栏遮住链接链接对象部分内容这种情况吧，如下图所示，我的顶部导航栏的高度为9vh，video元素是“本店快递流程”（锚链接）跳转的元素 当我点击该链接时，video元素被遮去了9vh的高度，这是为什么呢？ 我查看了一下源代码（vi ...
css文字垂直展示的方法
一、使用writing-mode（推荐使用） writing-mode：翻译过来是“写字 — 模式”，文本在水平或垂直方向上如何排布 有以下几个属性值： horizontal-tb: 水平展示，也就是横着展示文字，最平常默认的样式 vertical-rl：垂直展示，也就是上面图片上实现的样式 ver ...