举例: CSS3 @keyframes 规则 如需在 CSS3 中创建动画,您需要学习 @keyframes 规则。 @keyfra
原创 2022-01-05 14:07:48
171阅读
自定义滚动条实现 此部分针对webkit内核的浏览器,使用伪类来改变滚动条的默认样式,详情如下: 滚动条组成部分 1. ::-webkit-scrollbar 滚动条整体部分 2. ::-webkit-scrollbar-thumb 滚动条里面的小方块,向上向下移动(或向左向右移动) 3. ::-webkit-scrollbar-track 滚动条的轨道(里面装有Thumb) 4. ::-we
转载 2021-08-13 20:01:52
452阅读
我们在浏览国外的一些个人网站时,总是可以发现一些非常个性的字体,比如 但是因为在电脑上安装的字体有限,所以很多时候我们都找不到自己想要的字体,这时候我们就需要使用css3提供的@font-face来实现个性化字体了。  但是说@font-face是css3中的新特性是不准确的,因为在css2中就已经支持了这一特性,ie浏览器当时也已经支持它了,只是其他浏览器还不支持。而目前,各大浏览器都
转载 2017-05-03 11:17:56
358阅读
CSS3自定义字体写法 ps:最好英文 中文字体太大 影响加载速度 (中文字体网上的ttf大多数是gb2312 不过页面UTF-8格式可以用 不会乱码 <meta charset="UTF-8"> 会自动转化为utf-8)<pre><!DOCTYPE html><html> <head> <meta
转载 2019-11-12 15:27:00
127阅读
2评论
在线演示 本地下载
转载 2018-12-05 18:20:00
113阅读
2评论
除了在之前的文章中介绍过的 CSS3 的变形 (transformation) 和转换 (transition) 外,CSS3 还有一种自由度更大的自定义动画,开发者
转载 2023-05-07 14:48:13
209阅读
在线演示 本地下载
转载 2018-12-06 21:13:00
75阅读
2评论
滚动条组成 ::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-thumb 滚动条里面的小方块,向上向下移动(或往左往右移动,取决于是垂直滚动条还是水平滚动条) ::-webkit-scrollbar-track 滚动条的轨道(里面装有Thumb) ::
原创 2022-05-13 11:41:05
473阅读
前言 webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式,所以用处还是挺大的。当然,兼容所有浏览器的滚动条样式目前是不存在的。 演示 来看看这2个滚动条demo: demo1(图片版)、demo2(纯CSS3版) 滚动条组成 ::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-thumb  滚动条里面
转载 2019-12-06 15:02:00
97阅读
2评论
webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式,所以用处还是挺大的。当然,兼容所有浏览器的滚动条样式目前是不存在的CSS滚动条选择器你可以使用以下伪元素选择器去修改各式webkit浏览器的滚动条样式:::-webkit-scrollbar— 整个滚动条. ::-webkit-scrollbar-button— 滚动条上的按钮 (上下箭头). ::-webkit-scrollbar-thumb— 滚动条上的滚动滑块. ::-webk...
原创 2023-05-10 10:08:48
272阅读
移动端隐藏scroll滚动条::-webkit-scrollbar ::-webkit-scrollbar {/*隐藏滚轮*/ display: none;} CS
原创 2022-10-04 22:16:00
2422阅读
CSS3 自定义滚动条样式 -webkit-scrollbar 介绍 有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,今天给大家带来的是如何在 webkit 内核的浏览器中自定义滚动条。 webkit 支持拥有 overflow 属性的区域、列表框、下拉菜单以及 textarea 文本框等滚动条自定义样式,所以用处还是挺大的。 当然,兼容所有浏览器的滚动条样式
原创 2024-07-26 15:57:48
55阅读
* { font-size: 16px!important; line-height: 1.6!important; } /*设置顶部的样式*/ #header { display: none; height: 100px!important; /*margin-top: -15px!importa
转载 2021-02-10 21:47:00
383阅读
2评论
进阶使用CSS自定义属性在之前一篇介绍CSS自定义属性的文章中,我们介绍了什么是CSS自定义属性,var()、calc()。本篇文章中,为了进一步使用它,我们将介绍CSS自定义属性的其他用法。自定义原则在传统的CSS中,通常我们需要写重复的属性值,而自定义原则能让我们避免这种情况。做到“一处定义,处处使用”。:root { --theme-color: gray; } .button { ba
1.利用css3属性 appearance。 该属性(强制)更改(改变)默认(原生)样式。 Firefox 支持替代的 -moz-appearance 属性;Safari 和 Chrome 支持替代的 -webkit-appearance 属性;IE不支持该属性。 所以可以利用该属性取消checkb
转载 2020-10-14 17:51:00
989阅读
2评论
在线演示 本地下载
转载 2018-12-05 18:06:00
139阅读
2评论
CSS3自定义图标悬浮菜单是一款基于HTML5+CSS3实现的可自定义小图标悬浮菜单。查看原文查看在线演示Demo和更多原文内容教程:http://ibloger.net/article/1200.html
在线演示 本地下载
转载 2018-11-29 16:15:00
113阅读
2评论
在线演示 本地下载
转载 2018-12-06 21:11:00
549阅读
2评论
css3自定义移动端滚动条<pre>/*定义滚动条宽 高度是根据内容设置的高度决定的*/::-webkit-scrollbar{ width: 5px;} /*定义滚动条轨道 内阴影+圆角*/::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0
转载 2019-11-14 13:01:00
236阅读
2评论
  • 1
  • 2
  • 3
  • 4
  • 5