标签： css

使用纯 CSS 实现超酷炫的粘性气泡效果

最近，在 CodePen 上看到这样一个非常有意思的效果： 这个效果的核心难点在于气泡的一种特殊融合效果。 其源代码在：CodePen Demo -- Goey footer，作者主要使用的是 SVG 滤镜完成的该效果，感兴趣的可以戳源码看看。 其中，要想灵活运用 SVG 中的 feGaussian ...

前端(二)-CSS

1、样式 1.1 行内样式 <h1 style="color:red;">行内样式</h1> 1.2 内部样式 CSS代码写在 <head> 的 <style> 标签中 <style> h1{color: green; } </style> 1.3 外部样式 <link rel="styleshee ...

如何用纯CSS绘制三角形

视频链接： 如何用纯CSS绘制三角形 - Web前端工程师面试题讲解 首先先看一下例子： 1.html： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" ...

sass的几种输出格式，你都知道吗

Sass编译输出的CSS格式可以自定义。
有4种输出格式：
- :nested – 嵌套格式
- :expanded – 展开格式
- :compact – 紧凑格式
- :compressed – 压缩格式 ...

CSS进阶内容——盒子和阴影详解

CSS进阶内容 在学习了CSS基本知识之后，我们需要进一步了解CSS，因此写下了这篇文章 当然如果没有学习之前的知识，可以到我的主页中查看之前的文章：秋落雨微凉 - 博客园 CSS三大特性 首先我们先来了解CSS的三大特点，以便于我们下面知识点的讲解 CSS三大特性包括： 层叠性 继承性 优先级 层 ...

JS 从屏幕上下左右滑入滑出效果

从屏幕上下左右滑入滑出效果，代码比较粗糙，但是效果已实现 需要注意的是，从屏幕右边和下边滑入的时候，需要给滑动的容器外面再加一个容器，加样式 position: fixed; 让它 固定定位，否则页面右边和底部会出现滚动条 主要使用了 css animate 属性 <!DOCTYPE html> < ...

HTML知识点概括——一篇文章带你完全掌握HTML

HTML知识点概括 前端三件套分别是HTML3，CSS5，JavaScript 稍微介绍一下W3C标准： 结构化标准语言（HTML） 表现标准语言（CSS） 行为标准（DOM，JavaScript） HTML是超文本标记语言，负责网页最基本信息的构造 HTML的优势： 市场需求量 跨平台使用 浏览器 ...

CSS元素水平垂直居中方式-最全

最全的CSS盒子(div)水平垂直居中布局，想不到水平垂直居中居然还有这种方式，对CSS 布局掌握程度决定你在 Web 开发中的开发页面速度。 ...

纯前端实现-tab卡片化样式切换

纯前端实现-tab卡片化样式切换 html内容 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>选项卡切换</title> <link rel="stylesheet" type="text/css" href="./css ...

Ant Design Vue 走马灯实现单页多张图片轮播

最近的项目有个需求是，这种单页多图一次滚动一张图片的轮播效果，项目组件库是antd 然而用了antd的走马灯是这样子的 我们可以看到官网给的api是没有这种功能，百度上也多是在css上动刀，那样也就毕竟繁琐了，我们是什么？我们是程序猿啊，程序猿就该有程序猿的样子，怎么能写繁琐的东西呢，那还怎么为公司 ...