分类目录

链接

2024年 3月
 123
45678910
11121314151617
18192021222324
25262728293031

近期文章

热门标签

新人福利,免费薅羊毛

如何用一行 CSS 分别实现 10 种现代布局?

  前言 更新于 2020/7/12,和 Una Kravets 邮件确认了下,最近她在 web.dev 也发布了新的关于视频里面布局的 blog,有兴趣的可以前去一观 one line layouts 周日在家看 web.dev 的 2020 三天 live,发现不少有意思的东西,其中有一项是关于 CSS 的,主播是 Una Kravets(chrome team 成员)。虽然我已经好几个月没有深入研究 CSS 的东西了,不过以前的底子还在(有兴趣的可以看我一年前发布的关于 CSS 的东西,虽然由于太过底层没啥人愿意看, sad)。 注意:下面大部分代码已经由各大主流最新浏览器实现,...

前端 暂无评论 阅读(149)

详解css3 pointer-events(阻止hover、active、onclick等触发事件)

pointer-events 更像是JavaScript,它能够: 阻止用户的点击动作产生任何效果 阻止缺省鼠标指针的显示 阻止CSS里的 hover 和 active 状态的变化触发事件 阻止JavaScript点击动作触发的事件 实际代码使用中案例: 1、提交页面,提交按钮点击后,添加这个样式属性(style="pointer-events"),来防止重复提交。 2、一些层的绝对定位,覆盖按钮,穿透可以点击它。等等。 来看下具体用法: pointer-events:  auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all...

前端 暂无评论 阅读(204)

Flex 布局教程:语法篇

作者: 阮一峰 日期: 2015年7月10日 网页布局(layout)是 CSS 的一个重点应用。 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。 Flex 布局将成为未来布局的首选方案。本文介绍它的语法,下一篇文章给出常见布局的 Flex 写法。...

前端 暂无评论 阅读(204)

分享一个CSS3边框旋转特效

效果如下: <style>.bb, .bb::before, .bb::after {           position: absolute;           top: 0;           bottom: 0;           left: 0;           right: 0;           border-radius:100%;         }                   .bb {           width: 100px;           height: 100px;           margin: auto;           background: url("img/Button-White-Large.png") no-repeat 50%/70% rgba(0, 0, 0, 0.1);           color: #69ca62;           box-shadow: inset 0 0 0 1px rgba(105, 202, 9...

前端 暂无评论 阅读(274)

CSS3背景图片缩放动画

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS3背景图片缩放动画</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css">  body{padding:0;margin:0;} /*放大镜效果*/  @-moz-keyframes heart_beat{0%{-moz-transform:scale(1)} 25%{-moz-transform:scale(1.70)} 50%...

前端 暂无评论 阅读(3,372)