CSS3 :default伪类选择器使用简介
一、CSS3 :default伪类选择器简介CSS3 :default 伪类选择器只能作用在表单元素上，表示默认状态的表单元素。举个例子，一个下拉框，可能有多个选项，我们默认会让某个 <option> 处...
2020-11-01
用CSS实现Tab页切换效果的示例代码
最近切一个页面的时候涉及到了一个tab切换的部分，因为不想用js想着能不能用纯CSS的选择器来实现切换效果。搜了一下大致有下面三种写法。1、利用 :hover 选择器缺点：只有鼠标...
2020-11-01
css3 矩阵的使用详解
css3 矩阵变化. 应用格式为:transform: matrix(a,b,c,d,e,f);对应于就是:实际应用中的转换就是:其中:ax+cy+e = 横坐标bx+dy+f = 纵坐标为什么会多出 0 0 1呢？ 因为, 为了凑...
2020-11-01
利用CSS3 动画 绘画 圆形动态时钟
什么是动画？这是我们应该先了解的问题。按照百度百科的解释动画是采用逐帧拍摄对象并连续播放而形成运动的影像技术。不论拍摄对象是什么，只要它的拍摄方式是采用的逐格方式，...
2020-11-01
css实现多边形和梯形盒阴影技巧
一般情况下，我们给块状元素（四边形）添加阴影样式，直接用css box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);就可以了，但是总有一些需求是那么的特别，例如下图：要求给这样的梯形盒外...
2020-11-01
css3 边框、背景、文本效果的实现代码
一、边框box-shadowbox-shadow: h-shadow v-shadow blur spread color inset(ontset);//h-shadow：水平阴影 v-shadow：垂直阴影 blur：模糊距离 spread：阴影的尺寸 color：阴影的颜...
2020-11-01
详解如何用div实现自制滚动条
滚动条是浏览器中最常见的组件了。然而，滚动条的颜值总是不能令人满意，特别是嵌入在页面中的滚动条:漂亮的网页突然出现一根灰灰的滚动条真是太煞风景了。虽然浏览器也提供了...
2020-11-01
利用css3径向渐变做一张优惠券的示例
在很多购物网站上都能看到优惠券，代金券，什么什么的券，但基本都是图片直接放上去，那么你有没有想过css来做一个呢，反正我是这样想过。那么你怎么做呢，切图做背景平铺边缘，嗯，有这样...
2020-11-01
巧用CSS3的calc()宽度计算做响应模式布局的方法
今天浏览这个http://www.sitepoint.com站时，因为好奇看了下人家写的代码，结果发现了这行代码，于是就研究了一下，calc()从字面我们可以把他理解为一个函数function。其实calc是英...
2020-11-01
css3新单位vw、vh的使用教程
响应式布局的单位我们第一时间会想到通过rem单位来实现适配，但是它还需要内嵌一段脚本去动态计算跟元素大小。比如：(function (doc, win) { let docEl = doc.documentElement...
2020-11-01
css实现悬浮效果的阴影的方法示例
本文介绍了css实现悬浮效果的阴影的方法示例，分享给大家，具体如下：要实现的效果图：实现的代码：-webkit-box-shadow:0px 3px 3px #c8c8c8 ;-moz-box-shadow:0px 3px 3px #c8c8c8 ;...
2020-11-01
CSS3实现全景图特效示例代码
本文介绍了CSS3实现全景图特效示例代码，分享给大家，具体如下：基本代码html代码：<div class="panorama"></div>首先定义一些基本的样式和动画：.panorama { width: 300px; height...
2020-11-01
css选择器中有小数点的标签获取方法
需求说明因为项目中章节配置的时候有小数点，1，1.1,1.2,1.11的标题，这个时候每一行标题的id,class设置成标题号是独一无二的标记。但是，直接用js获取是获取不到的，例如$('#3.22')...
2020-11-01
纯CSS制作各种各样的网页图标（三角形、暂停按钮、下载箭头、加号等）
三角形<div class="box"></div><style>.box{ width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50...
2020-11-01
纯css实现多级折叠菜单折叠树效果
1、运用checkbox的checked值来判断下级栏目是否展开，CSS3的选择器中提供了:checked 这个伪类，这个伪类提供我们，当元素拥有checked这个值的时候就执行你的CSS。当有子菜单时，菜...
2020-11-01
CSS Grid 网格布局全解析
介绍CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格。 Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列。它还能使我们在不改变...
2020-11-01
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
CSS3 二级导航菜单的制作的示例
如果想要实现网页的二级导航，我们可以使用JS技术，动态的显示和隐藏二级菜单，当然也可以使用CSS技术来实现。并且这里推荐使用CSS，因为其效率更高，更流畅。这里将介绍二级菜单的动...
2020-11-01
使用css禁用input、checkbox、select等html控件实现disable效果
用js的event可以用来阻止input,select,checkbox的默认事件，如event.preventDefault()event.stopPropagation()其实用纯CSS也能实现，如input { pointer-events: none;}然后...
2020-11-01
CSS轮廓outline的具体使用
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。
border:1px solid red;outline-style:d...
2020-11-01
css样式改变及实际用法详解
css样式改变及实际用法，先给大家展示效果图，感觉不错请参考实现代码。效果图如下所示：<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" co...
2020-11-01
纯CSS实现导航栏下划线跟随的示例代码
本篇文章主要介绍了纯CSS实现导航栏下划线跟随的示例代码，分享给大家，具体如下：效果：代码：html：<ul> <li>aaaa</li> <li>bbbbbbb</li> <li>cccc</li> <li>dddd</li> <li>eeee...
2020-11-01
CSS实现一个简单loading动画效果
曾经以为，loading的制作需要一些比较高深的web动画技术，后来发现大多数loading都可以用“障眼法”做出来。比如一个旋转的圆圈，并不都是将gif图放进去，有些就是画个静...
2020-11-01
CSS模仿遥控器按钮
注：本demo在小程序环境中测试，其他h5，pc网页通用，只需将小程序单位和标签名改成通用的即可，并按照自己的需求做适配即可。大体思路：四个相同的正方形田字形布局，配合旋转属性即可。...
2020-11-01
CSS3使用transition属性实现过渡效果
属性详解transition属性目的是让css的一些属性（如background）的以平滑过渡的效果出现。它是一个合并属性，是由以下四个属性组合而成： transition-property：设置应用过渡的CSS...
2020-11-01
纯CSS实现radio和checkbox实现效果示例
radio-and-checkbox纯CSS实现radio和checkbox实现效果reset-radio在开发PC端的项目时，经常会用到radio和checkbox组件，可是因为原生的样式相对来说不符合设计师的设计风格，所以...
2020-11-01
详解css counter相关属性学习
css counter属性被几乎所有浏览器（包括IE8）支持， 但是却不常使用， 这篇文章就带大家学习了解下这些属性COUNTER-RESET明译为计数器重置。形如： counter-reset: counter-name常见...
2020-11-01
纯css3制作煽动翅膀的蝴蝶的示例
纯css3制作煽动翅膀的蝴蝶，先看效果怎么样，效果还不错吧上代码：html<div id="butterfly"> <div class="leftSide"></div> <div class="body"></div> <div class="righ...
2020-11-01
纯CSS实现的大型下拉菜单的示例代码
这是一款纯CSS实现的大型下拉菜单。该大型菜单使用HTML和纯CSS代码制作，没有任何js代码，不依赖任意第三方插件。适合用于栏目分类较多的大型网站使用。查看演示地址：css_menu下...
2020-11-01
CSS3实现多样的边框效果
半透明边框实现效果：实现代码：<div>你能看到半透明的边框吗？</div>div { /* 关键代码 */ border: 10px solid rgba(255,255,255,.5); background: white; backgrou...
2020-11-01
css实现背景半透明文字不透明的效果示例
本文介绍了css实现背景半透明文字不透明的效果示例，分享给大家，具体如下：效果如下：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title>...
2020-11-01
CSS实现精灵图与字体图标
精灵图：在以前，每个图片资源都是独立的一张张图片，浏览器访问网站中的不同网页时是重复获取这一张张图片的，这代表需要访问很多次资源。为了减少资源的访问次数，将多个常用的图片...
2020-11-01
详解如何在css中引入自定义字体(font-face)
为啥要用这个，要从做海报说起，那是一个风雨交加的夜晚。。。好了不扯淡了，我们言归正传，为啥用他，因为浏览器没有字体呗。那为啥要你告诉呢？我自己不会去w3cschool去看去学啊。是...
2020-11-01
CSS3实现可翻转的hover效果
CSS3实现可翻转的hover效果,具体代码如下所示：1.css/*基础样式*/ html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust...
2020-11-01
CSS3之transition实现下划线的示例代码
本文章介绍了CSS3之transition实现下划线的示例代码，分享给大家，具体如下：在这里先看看我们的demo认识transition这是CSS3中新增的一个样式，可以实现动画的过度。通常使用在添加...
2020-11-01
CSS3 清除浮动的方法示例
一、 目的通过本文，让大家可以明白清除浮动的原理和几种方法，最后得出一种本文认为最好用的方法。二、 内容简介1、 引入，还原浮动本来的意义
2、 说明，实际开发中常用浮动来做...
2020-11-01
纯HTML和CSS实现JD轮播图效果
使用了纯HTML和CSS实现了JD的轮播图，没有加动态效果，主要是使用了定位的知识。 ，如图为两个侧边箭头图片。<!DOCTYPE html><html lang="en"><head> <meta charset="UT...
2020-11-01
使用CSS和Bootstrap图标制作上下跳动的指示箭头动画效果
有时侯页面很长，需要指示箭头告诉用户下面还有东西。可以用纯CSS的方法实现。HTML：添加一个链接，可修改锚点点击时滑动到指定位置，这里使用了Bootstrap 3.x版本的一个向下箭头作...
2020-11-01
前端应该掌握的CSS实现多列等高布局技巧
1、引言我们在写页面的时候，有的时候会遇到多栏布局，每个栏目里面的内容有的时候可能不一样，这样就会导致每个栏目实际的高度也是不一样的，如果每个栏目有背景颜色的，就会导致每...
2020-11-01
浅谈CSS浮动的特性
本文介绍了CSS浮动的特性，分享给大家，顺便给自己留个笔记浮动具有以下特性： 盖不住的文本 浮动元素后面不是块级元素，后面的元素将会和它并排（除非设置了元素的宽度，并且屏...
2020-11-01
详解css display:box 新属性
一、display:box; 在元素上设置该属性，可使其子代排列在同一水平上，类似display:inline-block;。二、可在其子代设置如下属性 前提：使用如下属性，必须在父代设置display:b...
2020-11-01
分享CSS书写规范、顺序【推荐大家使用】
CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3.文字系列(font, line-height, letter-spacing, color...
2020-11-01
css多行文本溢出时出现省略号的示例
多行文本溢出时出现省略号本文推荐2种方法。1. csstip：只兼容chrome内核的浏览器。ff不支持。.box { overflow: hidden; /* 溢出时不显示溢出的内容 */ text-overflow:...
2020-11-01
CSS 图片动画特效的示例代码（相框）
本文介绍了CSS 图片动画特效的示例代码（相框），分享给大家，具体如下：下面是效果图HTML代码<!-- 主容器 --><div class="box"> <!-- 图片 --> <img src="images/pic.png" alt...
2020-11-01
CSS 翘边阴影的实现代码
本文介绍了CSS 翘边阴影的实现代码，分享给大家。具体如下：仔细观察可以看到每张图片下面的两个角都有不同程度的翘边。实现原理和【CSS】曲线阴影差不多，也是通过伪元素来实现...
2020-11-01
css控制元素高度实现自底向上和自顶向下的方法
从一个常见问题开始讨论：如何用css将一个元素的高度设置为【浏览器内容窗口高度】。方案一：使元素高度占满屏幕在css中，vh是一个特殊的长度单位，100vh的值就是【浏览器内容窗口...
2020-11-01
css input[type=file] 样式美化(input上传文件样式 )
效果：<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> /*样式1*/ .a-upload { padding...
2020-11-01
css3 column实现卡片瀑布流布局的示例代码
本文介绍了css3 column实现卡片瀑布流布局的示例代码，分享给大家，具体如下：实现效果今天遇到了需要实现一个卡片的瀑布流布局的问题，卡片高度是不同的。最后使用css3中的column...
2020-11-01
CSS3实现背景透明文字不透明的示例代码
最近遇到一个需求，要在图片上显示带有半透明背景的文字，效果如下图所示：需求.png看到这个需求之后，第一反应是使用CSS3中的opacity设置元素的透明度。<!DOCTYPE html><html lang...
2020-11-01
