CSS实现放大缩小关闭按钮(实例代码)
这种效果最常见是在我们的浏览器页面上，先给大家展示效果图：如上图所示，使用CSS 绘制上述三个按钮：<template> <div class="windowAction"> <button class="min">缩小</butt...
2020-10-16
如何用border-image实现文字气泡边框的示例代码
开发活动中，遇到了一个很简单的文字气泡效果，大概就是这样的。emmmm，看起来很简单。实现思路如下 主体是个div，加上渐变和边框还有圆角即可。 左侧元宝切图，用::before定位...
2020-10-16
CSS3动画特效在活动页中的应用
背景在不知不觉中，忙碌的一年将要结束，又到了一年一度的活动期了，为了展现喜庆的节日气氛，活动页面动态效果必不可少。先上效果图：一、整体分析从图中可 以看到主要的动态效果有...
2020-10-16
通过css3背景控制属性+使用颜色过渡实现渐变效果
css3背景图像相关兼容性：IE9+background-clip 背景图片绘制区域background-clip:border-box; 内容区<!DOCTYPE html><html lang="en" manifest="index.manifest"><head><meta...
2020-10-16
CSS3中新增的对文本和字体的设置
文字阴影text-shadow: 水平偏移 垂直偏移 模糊 颜色兼容性：IE10+<!DOCTYPE html><html lang="en" manifest="index.manifest"><head><meta charset="UTF-8"><title>Document<...
2020-10-16
Css和JS实现下划线动效的方法示例
本文主要讲述两种下划线动效效果，第一种悬停时 X轴由内向外展开实现动画效果，第二种为左右自动展示，由左向右，或由右向左！！实现的主要效果是利用伪类标签，以及hover,利用transfromm...
2020-10-16
css3使用animation属性实现炫酷效果(推荐)
animation-name 动画名称，可以有多个值，用逗号隔开，表示绑定了多个动画animation-name属性为动画指定一个名称animation-name兼容主流的浏览器，不过还是需要加前缀去兼容animati...
2020-10-16
css实现不同浏览器下兼容文本两端对齐
在 form 表单的前端布局中，我们经常需要将文本框的提示文本两端对齐，例如：比较粗暴的做法是在需要隔离边距的文本中加标签，然后分别控制每个文字的边距，这种方法比直接加空格或者...
2020-10-16
CSS中display flex整理（布局利器）
关于display：flex布局，有人了解颇深，我也是看着别人的东西学习的。display：flex的布局是什么、基本概念之类的我根本就不了解，只会用。每次看到概念之类的东西，我都是扫一眼就过去...
2020-10-16
CSS实现多层嵌套结构最外层旋转其它层不旋转效果
有这样一个场景：一个圆形容器，最外层容器的背景为圆弧，现在要将最外层的圆弧进行旋转，保证里面的容器里面的内容不进行旋转，接下来将跟大家分享一种解决方案，先看下最终实现的效果...
2020-10-16
CSS优先级的两种理解方式
方式一：值相加
我们先去MDN看看官方的解释：优先级是如何计算的？优先级就是分配给指定的 CSS 声明的一个权重，它由 匹配的选择器中的 每一种选择器类型的 数值 决定。而当优先级...
2020-10-16
css实现3d立体魔方的示例代码
今天来做一个简单的3d魔方先看效果图吧！把这个看会了，一些网上的3d的相册你就都会了一、我们先准备好们的html代码<!DOCTYPE html><html lang="zh-CN"> <head> <tit...
2020-10-16
css3翻牌翻数字的示例代码
今天接到公司一任务，效果图如下：没有具体说做什么效果，但是想着纯数字转换太简单了，然后就顺手做了一个翻牌的效果。效果预览，新窗口打开：https://codepen.io/andy-js/pen/ExaGxaL...
2020-10-16
纯CSS实现隐藏滚动条但仍具有滚动的效果（移动端和pc端）
移动端移动端页面只要兼容 Chrome 和 Safari 就够了，所以可以使用自定义滚动条的伪类选择器 ::-webkit-scrollbar 来隐藏滚动条。 .container::-webkit-scrollbar { disp...
2020-10-16
CSS 实现鼠标放在上面时整行变色效果
摘要:下文讲述css中实现鼠标放在指定行上面时，整行变色的方法分享，如下所示:实现思路:使用:hover伪类，实现当鼠标指向时，其背景色发生相应的变化，如下例所示:例：下文中的div，当鼠标...
2020-10-16
css中overflow:hidden失效问题的解决方法
失效原因今天在写轮播图的时候发现，overflow;hidden;竟然能失效，发现原因如下：父元素想要隐藏溢出的绝对定位的子元素，需要给父元素加一个定位;因为绝对定位的子元素会从内向外...
2020-10-16
css定位position引发的层级关系问题详解
position定位里的absolute，relative和fixed absolue：绝对定位，用top,bottom,left和right根据有定位的父级元素进行定位，如果无则相对body元素即整个页面文档进行定位。 re...
2020-10-16
css3实现圆锥渐变conic-gradient效果
语法：background-image: conic-gradient(from angle at position, start-color, ..., last-color )第一个参数：from angle ：起始的角度，可选，默认为从上到下position ：圆锥锥点的...
2020-10-16
border-radius IE8兼容处理的方法
根据canisue（http://caniuse.com/#search=border-radius），border-radius兼容性如下图所示：测试代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <me...
2020-10-16
css3针对移动端卡顿问题的解决(动画性能优化)
一、使用css，jquery，canvas制作动画1.Canvas优点：性能好，强大，支持多数浏览器（除了IE6、IE7、IE8），画出来的图形可以直接保存为 .png 或者 .jpg的图形；缺点：依赖于HTML，只能通过脚本绘...
2020-10-16
在Firefox浏览器中利用CSS窃取数据
0x00 前言几个月之前，我在Firefox中找到了一个漏洞（ CVE-2019-17016 ）。在研究过程中，我发现了在Firefox浏览器中利用CSS的一种数据窃取技术，可以通过单个注入点窃取数据，这里我想...
2020-10-16
纯CSS实现鼠标放上滑动出半透明效果的文字说明(新手小白 必看)
效果如下：实例1实例2以实例1【婚礼策划】为例HTML：<div class="itemInWorks" > 婚礼策划 <div class="mask"> 状态：待完成<br> 执行者：张三<br> 截止日期...
2020-10-16
css中有序无序列表项list样式设置方法
在无序列表ul>li中，无线列表的标志是出现在各列表前面的圆点。在有序列表ol>li中，前面默认带有数字，如何修改列表前面的项目符号，只需要通过list-style调整就好，常见的符号有（/*内...
2020-10-16
CSS网页响应式布局实现自动适配Pc/Pad/Phone设备
前言现在的设备很多，有PC、iPad、手机、智能手表、智能电视。如果没有响应式布局，那么电脑网页在手机或者ipad上显示，是体验非常差，操作不方便，视觉疲劳的，所以我们开发网页要做好...
2020-10-16
通过CSS向JS传参的方法
一、需要通过CSS传参的背景CSS中有很多媒体查询的用法，例如设备尺寸判别，是否支持鼠标行为，是否是黑暗模式，是否是省电模式等。比方说最近经常提到的黑暗模式，深色主题：@media (pr...
2020-10-16
css实现透明渐变特效的示例代码
知乎发现栏目上的标题图一般都是以下图方式展现的，很显然它是利用渐变去实现的。思路很有意思，主要是要有两方面的认知：这张图其实可以分成两部分，右边控制图形和渐变，左边就是一...
2020-10-16
css实现div内凹角样式的示例代码
平常的开发中我们一般使用到圆角都是外凸的，即border-radius属性。而如果有内凹角的情况，我们一般的考虑实现方法有2种。一种是直接使用背景图片，一种是使用css。用到的属性则...
2020-10-16
css常用样式font设置字体的多种变换(实例详解)
CSS 字体属性定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）font-family控制字体，由于各个电脑系统安装的字体不尽相同，但是基本装有黑体、宋体与微软雅黑...
2020-10-16
CSS3关于z-index不生效问题的解决
最近写CSS3和js结合，遇到了很多次z-index不生效的情况：1.在用z-index的时候，该元素没有定位（static定位除外）2.在有定位的情况下，该元素的z-index没有生效，是因为该元素的子元素后...
2020-10-16
常见的浏览器兼容性问题(小结)
浏览器的兼容性无非还是样式兼容性（css），交互兼容性（javascript），浏览器 hack 三个方面。样式兼容性（css）方面（1） 因为历史原因，不同的浏览器样式存在差异，可以通过 Normalize.css 抹平...
2020-10-16
CSS完美解决前端图片变形问题的方法
在头条IT学堂看到CSS完美解决前端图片变形问题的文章，就记录分享下：一、让图片的宽度或者高度等于容器的宽度或高度，多余的裁掉，然后让图片居中：<style type="text/css">div{...
2020-10-16
CSS控制网页背景颜色的代码
我想大家常常为一些比较合适于自己的网页背景的图片而发愁吧，这个我想也是有的，因为这些图片不是太大就是太小，或者太乱，那么有没有办法让图片能合自己的主页的胃口呢？答案是肯定...
2020-10-16
CSS 实现侧滑显示留言面板的网页组件功能
大家好，不知道你们是否和我一样存在这样的困惑呢，虽然css入门容易，但是其内容太多，好多属性看了似是而非，觉得自己看懂了，到自己用的时候又很犯难了，看到漂亮的效果还是无从下手，这...
2020-10-16
CSS实现ul和li横向排列的两种方法
因为li是块级元素，默认占一行的，要想实现横向排列，一般通过以下两个方法：float:left
这样设置有一个问题，li浮动以后则脱离了文本流，即不占位置，如果它的父级元素有具体的样式且没...
2020-10-16
css浮动 float属性详解
一、什么是浮动？浮动，顾名思义，就是漂浮的意思。指的是一个元素脱离文档流，悬浮在父元素之上的现象。二、如何产生浮动？给元素本身添加float属性float值：...
2020-10-16
CSS 有序或者无序列表的前面的标记 list-style-type 属性的实现
例子：<html><head><style type="text/css">ul.none{list-style-type:none}ul.circle {list-style-type:circle}ul.square {list-style-type:square}ol.upper-roman {list-sty...
2020-10-16
面试官提问之CSS如何实现固定宽高比
对于这个问题，你可能还没有过相关需求，或者还没有在面试的时候被问到过，但是歪马相信你终将有需要。这个问题说起来也是老生常谈，歪马今天再次提起也是希望有朝一日当你被问到的...
2020-10-16
CSS3标注引用的出处和来源的方法
疫情呆家里都快发霉了，打开电脑动动大脑，今天给大家分享一篇关于CSS3标注引用的出处和来源的方法。新技术的出现往往意味着新的生产力的提高。随着HTML5和CSS3的流行和普及，越...
2020-10-16
CSS中元素的显示模式
在CSS中，根据元素显示模式的不同元素标签被分为了两类:行内元素（inline-level）、块级元素（block-level）。1，首先介绍什么是行内元素，什么又是块级元素？ 1.1，行内元素就是...
2020-10-16
快速解决css使用@keyframes加载图片首次循环时出现白色间隙问题(闪屏)
问题解说:在使用css 的animations 属性时,首次加载循环会出现白色的间隙,看着有点像页面有刷新的感觉,后面每次循环就不会再有这个问题问题演示 //html <div class="contain...
2020-10-16
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
作为一个前端小猴子，不管是面试的时候还是工作中，我们都会或多或少的遇到“使用css居中”的效果，今天就写一篇关于css垂直水平居中的几种方法。栗子1：从最简单的水平...
2020-10-16
解决移动端1px边框问题的几种方法(5种)
本文介绍了解决移动端1px边框问题的5种方法。当然了，在这之前先整理了与这些方法相关的知识：物理像素、设备独立像素、设备像素比和viewport。物理像素、设备独立像素和设备像...
2020-10-16
CSS3实现文字浮雕效果，镂刻效果，火焰文字
要做出这个效果，首先必须知道css的一个属性：text-shadow:水平位置 垂直距离 模糊距离 阴影颜色;水平位置和垂直位置的值可以为负值可以使用两组值来实现凹凸效果，中间用逗号&ld...
2020-10-16
css样式层叠规则详解
CSS样式规则语法样式是CSS的基本单位，每个样式规则都是由选择器和声明块两个基本部分组成的。选择器（selector）决定为哪些元素应用样式；声明块定义相应的样式，它包含在一对花括号...
2020-10-16
解决CSS浏览器兼容性问题的4种方案
前端是一个苦逼的职业，不仅因为技术更新快，而且要会的东西实在太多了，更让人头疼的是，还要面临各种适配、兼容性问题。为什么会有浏览器兼容性问题？还不是因为浏览器厂商太多了！Ch...
2020-10-16
css sticky footer经典布局的实现
什么是sticky footer布局？我们常见的网页布局方式一般分为header（页头）部分,content（内容区）部分和footer（页脚）部分。当页头区和内容区的内容较少时，页脚区不是随着内容区排布而是...
2020-10-16
css实现两列固定与一列自适应的几种方法
本文介绍了css实现两列固定与一列自适应的几种方法，分享给大家，具体如下：1.flex布局Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提...
2020-10-16
border-radius给元素添加圆角边框的方法
border-radius:10px; /* 所有角都使用半径为10px的圆角 */border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */不要以为border-r...
2020-10-16
CSS实现QQ浏览器功能
代码知识点1.结合fullpage.js实现全屏滚动2.CSS中linear-gradient() 函数用于创建一个线性渐变的 “图像”。 background-image: linear-gradient(direction, c...
2020-10-16
js判断并告知支持css属性（值）的 情况分析
当我们想用某个css新特性时，总是会在意它的兼容性情况，或许我们会去搜索它的兼容性，哪些浏览器合适哪些不合适，在这些已知的情况下再选择是不是使用或如何使用，这是一个已知我们...
2020-10-16
