详解中文字体在CSS样式中font-family对应的英文名称
宋体：SimSun 黑体：SimHei 微软雅黑：Microsoft YaHei 微软正黑体：Microsoft JhengHei 新宋体：NSimSun 新细明体：PMingLiU 细明体：MingLiU 标楷体：DFKai-SB 仿宋：FangSong 楷体：KaiTi 仿...
CSS八种让人眼前一亮的HOVER效果的示例代码
一.发送效果HTML <div id="send-btn"> <button> // 这里是一个svg的占位 Send </button> </div> CSS #send-btn{ display: flex; align-items: center; justi...
纯CSS实现图片百叶窗展示效果示例
首先给大家看一下完成效果 主要思路：其实这个百叶窗还是利用了一种障眼法，我们看上去是鼠标移动上去之后，图片展开了，其实这些图片在原地根本没有动，只不过是我们把这些图片放在了一个列表...
让CSS flex布局最后一行列表左对齐的N种方法(小结)
引用张鑫旭的一篇文章分享给大家，如果你想进行修改进入链接点到对应的图片生成的链接进入，方可修改。 问题描述 //html <div class="container"> <div class="list&qu...
CSS 控制动画播放与暂停的小技巧(非常实用)
今天要介绍一种很简单的使用 CSS 控制动画播放与暂停的小技巧。 使用好了，可以在很多实际场景得以运用。 我们先来看个例子，本例子是我在闲逛 Codepen 时看到了，很有意思： 本例子，CodePen:&...
css高度随宽度比例变化的几种实现方法
【方案一：padding实现】 原理： 一个元素的 padding，如果值是一个百分比，那这个百分比是相对于其父元素的宽度而言的，padding-bottom 也是如此。 使用 padding-bottom 来代替 height 来实现...
CSS让子容器超出父元素(子容器悬浮在父容器效果)
前言 有时候，我们需要如下图这样一个悬浮效果需求： 实现 在标准的正常的情况下，只能使用 绝对定位 来完成。 第一步：父容器定位设置为 relative（相对定位）。 第二步：子容器定位设置为 abs...
CSS3实现线性渐变用法示例代码详解
前言 演示下太老版本浏览器的渐变实现了[IE9-]; IE9以前,渐变都是通过滤镜实现的,大体的写法就是这样; .testDiv { width:400px; height:400px; border:1px solid #f00; /* IE滤镜写法; gradient...
详解flex布局下图片变形的解决方法
flex布局是现在常用的一个布局方式，但是有时候也会导致出现一些小问题。本人在使用flex布局做一个左边头像，右边文字的时候，发现固定图片的宽度时，图片宽度仍然发生了变化。 下图是头像本应...