一直以来，使用纯 CSS 实现波浪效果都是十分困难的。 因为实现波浪的曲线需要借助贝塞尔曲线。 而使用纯 CSS 的方式，实现贝塞尔曲线，额，暂时是没有很好的方法。 当然，借助其他...

抖音，人气也是非常高，据说拥有7亿用户。 今天我们就来研究研究抖音的logo，蹭蹭热度。 效果预览： 主要用css3新增属性 mix-blend-mode ，组成，然后有3种颜色，白色、红色、和天蓝色...

要【来源：http://www.nextecloud.cn/hk.html 转载请保留连接】写一个下拉菜单点击按钮 菜单入口就是是点击一个图标按钮 之前都是随便用个图片代替 今天突然想用CSS写个效果 主要参考澎湃移...

在码代码的时候会发现，很多东西都是殊途同归的，方法千千万，能解决问题的都是好办法，不一定非要把代码写的特别高深，这样反而后来的人看不懂，维护根据头疼。 所以用最简单...

前言 这是个老掉牙的需求啦，不过仍然有很多人在网上找解决方案，特别是搜索结果排名靠前的那些，都是些只会介绍兼容性不好的使用 -webkit-line-clamp 的方案。 如果你看到这篇文章，...

margin 的不正交 margin实用时会产生合并的现象 以下属性会阻断 margin 合并 border display: table display: flex 以上内容为结果 详解在下方 阻断合并【详解】 /* CSS */ .box{ border:1px solid red; height:...

玩过王者的应该都熟悉，这个页面的效果。为什么要实现这个效果了？ 第一：王者这么火，电竞这么火。 第二：主要还是来学习 CSS3 的线性、径向渐变、旋转、缩放以及动画。 图形解...

CSS transformations虽然很酷，但还没有应用于背景图像。这篇文章提供了一个很好的解决方法，当您确实想要旋转背景图像时，或者在容器元素旋转时保持背景图像不变。 使用css3转换属性...

CSS3中的box-sizing（content-box与border-box） CSS3中的box-sizing 属性允许以特定的方式来指定盒模型，有两种方式： content-box：标准盒模型，又叫做 W3C盒模型，一般在现代浏览器中使用的都是这...

目标：实现一个正方形，这个正方形边长等于 方法一：使用单位vw， （ps我觉得这个是最简单的方法） ht【文章出处:防御服务器 】ml结构也很简单，只有一个div即可 htmlbody div class=squ...

实现思路： 通过css中的 text-shadow 来实现文字的发光效果 效果图： 代码如下： /head style body{ background-color:#000; } .textArea{ font-size:100px; color:#fff; text-shadow:0【文章转自：http://www.nextecloud....

前言 移动端 rem 适配方案回顾总结 如何使用 rem rem 单位的计算参考 html 的根节点 font-size进行计算，根节点的字体变化，布局参考的 rem 页面也会相应进行缩放，此为 rem 布局的本质。...

有一次我们说到掷骰子那个游戏，当时是用了一个steps属性+雪碧图来制作帧动画，这当然颇为不错，但其实一开始我想的不是这样的，我想的是用真的3d和动画去做，这个方案涉及到不...

最近，我从 Grover网站上发现以一个好玩儿的悬停动画，也有了些自己的灵感。这个动画是将鼠标移动到订阅按钮上移动光标会显示相应的彩色渐变。这个想法很简单，但是它能使这个按...

上一篇我们介绍了如何利用before和after伪元素来做Material Design风格的按钮，里头关键的技术就在于活用边框宽度和div本体宽高，因此这篇再加码一个效果，就是纯粹利用CSS，让单一个d...

SASS 中定义的变量，后设置的值会覆盖旧的值。 $color: red;$color: blue;.btn { color: $color;} 编译后为： .btn { color: blue; } 如果你编写了一个 UI 库提供 SASS 文件，可能会提供一些参数供用户使用...

什么是文字左右环绕图片？就是下图的效果： 效果的CSS代码可以点击这里 查看 在CSS中，并没有float: center这种设置，但是我们可以通过一些小技巧来模拟出类似的效果。 经常会有小伙...

今天我们来折纸飞机（可以飞出去的那种哦） 基本全用css来实现，只有一小部分的js 首先看一下飞机的构造 灰色区域为可折叠区域 白色区域为机身 三角形由border画出来的再经过各种平...

我们在编辑一个版面，通常都会用到水平居中和垂直居中来设计，而水平居中很好处理，不外乎就是设定margin:0 auto；或是text-align:center；，就可以轻松解决掉水平居中的问题，但一直以...

will-change通过告知浏览器该元素会有哪些变化，使浏览器提前做好优化准备，增强页面渲染性能。 属性的取值： 1、auto: 实行标准浏览器优化。 2、scroll-position: 表示开发者希望在不久后...

主要用到知识点： css3 3d转换 原生js鼠标拖动事件 display:grid 布局 实现的功能 3d魔方 可点击，可拖动 直接看效果 html： div class=container div class=box defaul div class=picimg src=./img/cat.jpg alt=/di...

当我们写css的时候，有时候会忘记设计里面存在的临界情况。举个例子来说吧，当内容的长度超过了我们的期望值，我们也无法解释其中的可能性，页面的设计很可能会因此而崩掉。我...

心属性 opacity: .999 使元素产生一个层叠上下文，这样按钮6和8的动画就不会被背景遮盖住了 left/top: -1px 使伪元素与按钮的位置重合，原因在下方 transition-delay 横向与纵向边框动画产生细...

在开发中，一个好的用户操作界面，总会夹杂着一些动画。css用对少的代码，来给用户最佳的体验感，下面我总结了一些css动画属性的使用方法及用例代码供大家参考，在不对的地方，...

由于自己公司产品里头，有个按钮在点击之后，会有一两秒的等待时间（寄认证信），因此为了避免点击后一两秒的加载时间空窗，就做个loading动画来强化使用者体验，原本想说直接用...

随着用户越来越关注隐私并越来越注意防止在线跟踪，用户开始使用广告拦截器和脚本拦截器来阻止JavaScript跟踪脚本。目前，研究人员已经发现了一种新方法，利用HTML和CSS来跟踪网站...

1，显示效果： 2,html结构 div class=process_list-lpu div class=process_line/div div class=content_list ul lia href=javascipt:;End customer get productb1/b/a /li lia href=javascipt:;Log in EFOSE website and present installation or mai...

这是一个纯粹利用CSS所做出来的效果，这个效果说穿了就是一个图像处理的原理，做法跟Photoshop里头的几乎一模一样，只是一个用图层和色版来制作，一个则是用CSS（把div当成图层思考...

在前端布局过程中，我们实现水平居中比较简单，一般通过margin:0 auto;和父元素 text-align: center;就能实现。但要实现垂直居中就没有那么容易，下面向大家分享下我工作中实现垂直居中的...

一、起因 需求要求展示两行，多余的文字用三个点替代，于是用了这几个不太规范的属性 display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical; 后来发现代码里写的好好的，一到页面...

一、css实现左侧宽度固定右侧宽度自适应 1、定位 !DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 title自适应/title style *{ padding: 0; margin: 0; } .left{ b【文章来自：http://www.yidunidc.com/gfcdn.html 欢迎留下...

动态rem 1. 首先我们先介绍当下的长度单位 px 像素 em 一个M的宽度 / 一个汉字的宽度 1em == 自身的 font-size rem 全称 root em 是根元素（html)的 font-size vh 全称 viewport height 100vh == 视口高度 vw...

drop-shadow与box-shadow都是阴影效果（光晕效果）的css属性，二者最大的不同点在于：box-shadow只能制作矩形的阴影，而drop-shadow则可以制作和物件不透明区域完全相同形状的阴影。底下是二...

一、Scroll Snap是前端必备技能 CSS Scroll Snap是个非常好用的特性，可以让网页容器滚动停止的时候，无需任何JS代码的参与，浏览器可以自动平滑定位到指定元素的指定位置。类似幻灯片...

今天我们学习如何使用CSS创建一个炫酷的图片轮播组件。它的原理简单的说就是通过单击标签元素（label）来切换背景图像和动画效果。核心是使用与标签关联的单选按钮和使用通用兄...

响应式布局系统，在现在流行的 CSS 框架中已经非常常见了。它主要由容器类和约定一行列数的栅格系统组成，组成了一个框架的骨架。 在流行的前端框架 Bootstrap 和 Bulma CSS 中，就有体...

最外层boxF旋转120度、第二层boxS旋转-60度、第三层boxT再旋转-60度，此时刚好回正，然后把图片就放在第3层的div背景中。因为前两层div中没有东西，纯粹就是用来旋转得到6边形的，所以...

CSS3 分类菜单效果如下所述： HTML htmlhead title/title style type=text/css #bg { width: 1270px; height: 751px; margin: 0 auto; background: url(images/bg.jpg) no-repeat; } .sblock { width: 800px; height: 250px; margin: 0 auto;} /*....

前言 我们有时候会遇到 hover 伪类给元素添加边框的时候，元素中的内容发生位移，虽然我们设置了 box-sizing: border-box 并且规定了元素的宽高，但是内容依然被边框挤开了。如下面这种...

问题背景 很多网站设计一般是两个部分，content + footer，content里面装的是网站主体内容，footer里面展示网站的注册信息等等，因为网站内容高度不定的原因，会出现下面两种情况： 1.内...

问题记录 今天本打算要完成一个类似于进度条的小组件， 原型是这样的(这里长200px, 高28px) 我一看， 很简单嘛， 抛开那个数字1样式不谈， 整体父级样式就是一个左边半圆形， 右边带...

预览地址： https://ovsexia.gitee.io/leftfixed/ html: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=http://www.w3.org/1999/xhtmlheadmeta http-equiv=Content-...

以下以数字开头的 CSS 类名不会生效： .1st{ color: red;} 一个合法的 CSS 类名必需以下面其中之一作为开头： 下划线 _ 短横线 - 字母 a - z 然后紧跟其他 _ ， - 数字或字母。 用正则表示，一...

此前写的那个太复杂了，来点简单的核心 htmlhead title/title style type=text/css * { margin: 0; padding: 0; border: none; } .Bl { width: 600px; height: 540px; margin: 0 auto; position: relative; top: 50%; transform: translate...

等高布局的方式 指在同一个父容器中,子元素高度相等的布局. 从等高布局实现方式来说,又分为两类 伪等高 子元素高度差依然存在,只是视觉上给人感觉就是等高. 真等高 子元素高度相...

什么是 Sticky Footer 所谓 Sticky Footer，并不是什么新的前端概念和技术，它指的就是一种网页效果： 如果页面内容不足够长时，页脚固定在浏览器窗口的底部；如果内容足够长时，页脚固...

css3语法: （750px设计图的1rem = 100px） @media only screen and (min-width: 320px) and (max-width: 479px){ html { font-size: 42.67px !important; }}@media only screen and (min-width: 480px) and (max-width: 639px){ html { font-size: 64...

首先来看一看我之前写的一个CSS轮播动画效果，为了让切换时动画的过渡更加的平滑我在animation-timing-function属性中并没有使用CSS提供的各种关键词，而使用了cubic-bezier（贝塞尔）函数。...

css中有很多选择器,那在多个选择器都作用于同一个元素的情况下会出现什么效果呢? 代码 !DOCTYPE htmlhtml lang=en head meta charset=utf-8 title/title style type=text/css p{ color:red; font-size: 10px; } #wrap{...

在这篇文章中，我们将使用:placeholder-shown伪类创建一个浮动的问题标签效果，使用纯CSS实现。 浮动的文字标签 【文章出处:国内服务器】当我们处理输入框时，会想方设法提供给用户更...