CSS - 教程之家

87浏览

0评论

CSS理解块级格式上下文（BFC）

1.BFC 定义BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box（块级元素）参与，它规定了内部的Block-level Box如何布局，并且...

2020-11-01

70浏览

0评论

css中引入svg来兼容部分安卓机显示0.5px边框的示例

相信大家昨天打开某 404 搜索引擎的时候应该都看到这张图片了，不得不说，后人会以这么一种方式来纪念前人，而且还是一个伟大的公司，挺感动的。前言在开发 H5 页面的时候发现，部分...

2020-11-01

236浏览

0评论

css3 实现圆形旋转倒计时

很多答题的H5界面上有旋转倒计时的效果，一个不断旋转减少的动画，类似于下图的这样。今天研究了下，可以通过border旋转得到。一般我们可以通过border得到一个四段圆。See the Pe...

2020-11-01

75浏览

0评论

CSS3 @keyframes简单动画实现

CSS3 @keyframes简单动画实现定义：通过 @keyframes 规则，能够创建动画。创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。在动画过程中，可以多次改变这套 CSS 样式。以...

2020-11-01

93浏览

0评论

css设置body背景图片满屏的实例代码

废话不多说了，直接给大家贴代码了，具体代码如下所示：@{ Layout = null; ViewBag.Title = "Login Page";}<!DOCTYPE html><html><head> <meta name="viewport" content...

2020-11-01

84浏览

0评论

css制作收缩圆环旋转效果实例代码

效果如下所示：收缩旋转圆环css代码：<style>body { background: #372940;}.demo { position: relative; margin: 120px auto; width: 150px;}.loader { position: absolu...

2020-11-01

116浏览

0评论

css制作超萌吃豆豆加载动画效果

豆豆加载效果 point_down:html代码：<div class="demo"> <div class="pacman"></div><div class="dot"></div>point_down:css代码：<style>@-webkit-keyframes up { 0%, 100% {...

2020-11-01

102浏览

0评论

css 使用relative设置top为百分比值的方法(仿百度首页)

前言：最近在学习HTML、CSS的过程中，想模仿一下百度首页。发现搜索框这一部分与上下其它元素的空白距离可以随着窗口大小变化（效果如下图所示），于是自己研究了一下并记录下来。效...

2020-11-01

190浏览

0评论

纯CSS实现红绿灯效果(面试常见)

先看题，别看答案试下吧 ~_~1、下面的代码输出的内容是什么？function O(name){ this.name=name||'world';}O.prototype.hello=function(){ return function(){ co...

2020-11-01

97浏览

0评论

css自定义属性和聚光灯效果的实现

神秘巨星来了吗？快，打追光，快，快给她镜头。 ------《神秘巨星》神秘巨星是谁？它就是 CSS Variables 。简介CSS Variables，一个并不是那么新的东西，但对css来说绝对是一场革命。之...

2020-11-01

64浏览

0评论

CSS3下的渐变文字效果实现示例

一、方法一：借助mask-image属性如果您手头上的浏览器是Chrome或是Safari，则您可以在demo页面中看到类似下面的效果：方法一下的文字渐变效果相应的HTML代码如下：<h2 class="text-...

2020-11-01

76浏览

0评论

前端css实现最基本的时间轴的示例代码

本文介绍了前端css实现最基本的时间轴的示例代码，分享给大家，具体如下：原型：代码：
<!DOCTYPE html ><html> <head> <link rel="stylesheet" href="http://cdn.static....

2020-11-01

92浏览

0评论

详解css布局实现左中右布局的5种方式

本文介绍了详解css布局实现左中右布局的5种方式，分享给大家，具体如下：效果如下：左中右布局<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="v...

2020-11-01

102浏览

0评论

css3编写浏览器背景渐变背景色的方法

本文介绍了css3编写浏览器背景渐变背景色的方法，分享给大家，具体如下：效果如下：知识点：rgb全色循环算法，HEX与RGB颜色转换算法、CSS3颜色渐变，CSS3渐变色兼容ie方法，定时器与循环，函...

2020-11-01

54浏览

0评论

CSS实现卡片3D翻转效果的示例代码

本文介绍了CSS实现卡片3D翻转效果的示例代码，分享给大家，具体如下：效果：代码：html：<div class="main"> <div class="box b1"></div> <div class="box b2"></div></div>css：.main...

2020-11-01

84浏览

0评论

CSS 记录用户密码的方法

简单的CSS代码，甚至不符合图灵完备的语言，但是也能成为一些攻击者的工具，下面简单介绍一下如何使用CSS去记录用户的密码。但是这些CSS脚本会出现在第三方CSS库中，所以使用第三方...

2020-11-01

102浏览

0评论

纯css实现背景图片半透明内容不透明的方法

前言最近做一个登陆界面的，突然想使用这种背景图片透明，而内容不透明的效果，这里我就说一说我的两个思路吧。效果展示半透明不透明常见的失败做法最常见的做法事设置元素的opac...

2020-11-01

106浏览

0评论

CSS宽高等比布局的方法

宽度是高度的两倍(等比缩放)实现思路: 以父级元素为基准, 子级 width:100%; (也就是父级宽度的100%), padding-top:50% (也就是父级宽度的50%,根据css规范, padding用百分比...

2020-11-01

142浏览

0评论

CSS清除浮动float的三种方法小结

一、浮动的定义使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。ps:文档流：文档流是文档中可显示对象在排列时所占用的位置。语法float常跟...

2020-11-01

81浏览

0评论

CSS布局方案小结

居中布局水平居中1）使用inline-block+text-align原理：先将子框由块级元素改变为行内块元素，再通过设置行内块元素居中以达到水平居中。用法：对子框设置display:inline-block，对父...

2020-11-01

85浏览

0评论

CSS3 :default伪类选择器使用简介

一、CSS3 :default伪类选择器简介CSS3 :default 伪类选择器只能作用在表单元素上，表示默认状态的表单元素。举个例子，一个下拉框，可能有多个选项，我们默认会让某个 <option> 处...

2020-11-01

83浏览

0评论

用CSS实现Tab页切换效果的示例代码

最近切一个页面的时候涉及到了一个tab切换的部分，因为不想用js想着能不能用纯CSS的选择器来实现切换效果。搜了一下大致有下面三种写法。1、利用 :hover 选择器缺点：只有鼠标...

2020-11-01

52浏览

0评论

css3 矩阵的使用详解

css3 矩阵变化. 应用格式为:transform: matrix(a,b,c,d,e,f);对应于就是:实际应用中的转换就是:其中:ax+cy+e = 横坐标bx+dy+f = 纵坐标为什么会多出 0 0 1呢？因为, 为了凑...

2020-11-01

75浏览

0评论

利用CSS3 动画绘画圆形动态时钟

什么是动画？这是我们应该先了解的问题。按照百度百科的解释动画是采用逐帧拍摄对象并连续播放而形成运动的影像技术。不论拍摄对象是什么，只要它的拍摄方式是采用的逐格方式，...

2020-11-01

51浏览

0评论

css实现多边形和梯形盒阴影技巧

一般情况下，我们给块状元素（四边形）添加阴影样式，直接用css box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);就可以了，但是总有一些需求是那么的特别，例如下图：要求给这样的梯形盒外...

2020-11-01

64浏览

0评论

css3 边框、背景、文本效果的实现代码

一、边框box-shadowbox-shadow: h-shadow v-shadow blur spread color inset(ontset);//h-shadow：水平阴影 v-shadow：垂直阴影 blur：模糊距离 spread：阴影的尺寸 color：阴影的颜...

2020-11-01

107浏览

0评论

详解如何用div实现自制滚动条

滚动条是浏览器中最常见的组件了。然而，滚动条的颜值总是不能令人满意，特别是嵌入在页面中的滚动条:漂亮的网页突然出现一根灰灰的滚动条真是太煞风景了。虽然浏览器也提供了...

2020-11-01

116浏览

0评论

利用css3径向渐变做一张优惠券的示例

在很多购物网站上都能看到优惠券，代金券，什么什么的券，但基本都是图片直接放上去，那么你有没有想过css来做一个呢，反正我是这样想过。那么你怎么做呢，切图做背景平铺边缘，嗯，有这样...

2020-11-01

181浏览

0评论

巧用CSS3的calc()宽度计算做响应模式布局的方法

今天浏览这个http://www.sitepoint.com站时，因为好奇看了下人家写的代码，结果发现了这行代码，于是就研究了一下，calc()从字面我们可以把他理解为一个函数function。其实calc是英...

2020-11-01

94浏览

0评论

css3新单位vw、vh的使用教程

响应式布局的单位我们第一时间会想到通过rem单位来实现适配，但是它还需要内嵌一段脚本去动态计算跟元素大小。比如：(function (doc, win) { let docEl = doc.documentElement...

2020-11-01

119浏览

0评论

css实现悬浮效果的阴影的方法示例

本文介绍了css实现悬浮效果的阴影的方法示例，分享给大家，具体如下：要实现的效果图：实现的代码：-webkit-box-shadow:0px 3px 3px #c8c8c8 ;-moz-box-shadow:0px 3px 3px #c8c8c8 ;...

2020-11-01

167浏览

0评论

CSS3实现全景图特效示例代码

本文介绍了CSS3实现全景图特效示例代码，分享给大家，具体如下：基本代码html代码：<div class="panorama"></div>首先定义一些基本的样式和动画：.panorama { width: 300px; height...

2020-11-01

117浏览

0评论

css选择器中有小数点的标签获取方法

需求说明因为项目中章节配置的时候有小数点，1，1.1,1.2,1.11的标题，这个时候每一行标题的id,class设置成标题号是独一无二的标记。但是，直接用js获取是获取不到的，例如$('#3.22')...

2020-11-01

124浏览

0评论

纯CSS制作各种各样的网页图标（三角形、暂停按钮、下载箭头、加号等）

三角形<div class="box"></div><style>.box{ width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50...

2020-11-01

98浏览

0评论

纯css实现多级折叠菜单折叠树效果

1、运用checkbox的checked值来判断下级栏目是否展开，CSS3的选择器中提供了:checked 这个伪类，这个伪类提供我们，当元素拥有checked这个值的时候就执行你的CSS。当有子菜单时，菜...

2020-11-01

109浏览

0评论

CSS Grid 网格布局全解析

介绍CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格。 Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列。它还能使我们在不改变...

2020-11-01

56浏览

0评论

css flex 弹性布局详解

案例基础布局html <ul class="box"> <li class="item"></li> <li class="item"></li> <li class="item"></li> <li class="item"></li>...

2020-11-01

60浏览

0评论

CSS3 二级导航菜单的制作的示例

如果想要实现网页的二级导航，我们可以使用JS技术，动态的显示和隐藏二级菜单，当然也可以使用CSS技术来实现。并且这里推荐使用CSS，因为其效率更高，更流畅。这里将介绍二级菜单的动...

2020-11-01

75浏览

0评论

使用css禁用input、checkbox、select等html控件实现disable效果

用js的event可以用来阻止input,select,checkbox的默认事件，如event.preventDefault()event.stopPropagation()其实用纯CSS也能实现，如input { pointer-events: none;}然后...

2020-11-01

126浏览

0评论

CSS轮廓outline的具体使用

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。
border:1px solid red;outline-style:d...

2020-11-01

83浏览

0评论

css样式改变及实际用法详解

css样式改变及实际用法，先给大家展示效果图，感觉不错请参考实现代码。效果图如下所示：<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" co...

2020-11-01

85浏览

0评论

纯CSS实现导航栏下划线跟随的示例代码

本篇文章主要介绍了纯CSS实现导航栏下划线跟随的示例代码，分享给大家，具体如下：效果：代码：html：<ul> <li>aaaa</li> <li>bbbbbbb</li> <li>cccc</li> <li>dddd</li> <li>eeee...

2020-11-01

73浏览

0评论

CSS实现一个简单loading动画效果

曾经以为，loading的制作需要一些比较高深的web动画技术，后来发现大多数loading都可以用“障眼法”做出来。比如一个旋转的圆圈，并不都是将gif图放进去，有些就是画个静...

2020-11-01

274浏览

0评论

CSS模仿遥控器按钮

注：本demo在小程序环境中测试，其他h5，pc网页通用，只需将小程序单位和标签名改成通用的即可，并按照自己的需求做适配即可。大体思路：四个相同的正方形田字形布局，配合旋转属性即可。...

2020-11-01

75浏览

0评论

CSS3使用transition属性实现过渡效果

属性详解transition属性目的是让css的一些属性（如background）的以平滑过渡的效果出现。它是一个合并属性，是由以下四个属性组合而成： transition-property：设置应用过渡的CSS...

2020-11-01

80浏览

0评论

纯CSS实现radio和checkbox实现效果示例

radio-and-checkbox纯CSS实现radio和checkbox实现效果reset-radio在开发PC端的项目时，经常会用到radio和checkbox组件，可是因为原生的样式相对来说不符合设计师的设计风格，所以...

2020-11-01

157浏览

0评论

详解css counter相关属性学习

css counter属性被几乎所有浏览器（包括IE8）支持，但是却不常使用，这篇文章就带大家学习了解下这些属性COUNTER-RESET明译为计数器重置。形如： counter-reset: counter-name常见...

2020-11-01

99浏览

0评论

纯css3制作煽动翅膀的蝴蝶的示例

纯css3制作煽动翅膀的蝴蝶，先看效果怎么样，效果还不错吧上代码：html<div id="butterfly"> <div class="leftSide"></div> <div class="body"></div> <div class="righ...

2020-11-01

82浏览

0评论

纯CSS实现的大型下拉菜单的示例代码

这是一款纯CSS实现的大型下拉菜单。该大型菜单使用HTML和纯CSS代码制作，没有任何js代码，不依赖任意第三方插件。适合用于栏目分类较多的大型网站使用。查看演示地址：css_menu下...

2020-11-01

141浏览

0评论

CSS3实现多样的边框效果

半透明边框实现效果：实现代码：<div>你能看到半透明的边框吗？</div>div { /* 关键代码 */ border: 10px solid rgba(255,255,255,.5); background: white; backgrou...

2020-11-01

热门文章