CSS3
文章平均质量分 66
Hello 程序猿
授之以鱼不入授之以渔,喜欢分享知识,喜欢交流经验。永远相信一句话三人行必有我师焉,很尊重他人的意见。
展开
-
50 天学习 50 个项目 - HTML/CSS and JavaScript
???? ???? ???? 项目源代码,点击【Github 原文链接】所有项目如下所示:#项目在线演示01Expanding CardsLive Demo02Progress StepsLive Demo03Rotating Navigation AnimationLive Demo04Hidden Search WidgetLive Demo05Blurry LoadingLive Demo06Scroll Animation原创 2021-07-18 01:09:32 · 981 阅读 · 1 评论 -
使用 sroll-snap-type 优化滚动
本文转自公众号:iCSS前端趣闻。慕课网推出 CSS 架构课程,一节课解决 CSS 难复用、难维护、难扩展问题(点我)。根据CSS Scroll Snap Module Level 1[1]规范,CSS 新增了一批能够控制滚动的属性,让滚动能够在仅仅通过 CSS 的控制下,得到许多原本需要 JS 脚本介入才能实现的美好交互。Tips:本文截的一些 Gif 图涉及容器滚动,效果不是很好,可以点进 Demo 里实际感受下。sroll-snap-type首先看看sroll-snap-ty...转载 2021-04-01 17:30:29 · 510 阅读 · 0 评论 -
Flex 布局教程
CSS3为我们提供了一种可伸缩的灵活的web页面布局方式-flexbox布局,它具有很强大的功能,可以很轻松实现很多复杂布局。然而Flex属性较多,不便于记忆,而在项目中,布局使用频繁,那么可以将flex抽离为一个布局工具类,简化使用方式,快速应用于项目,减少记忆成本。Flex介绍Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持。 Flex是 Fl...原创 2019-07-07 17:24:59 · 1574 阅读 · 0 评论 -
PostCSS一种来自未来的书写CSS方式
1、PostCSS深入学习: 简写和速写2、PostCSS深入学习: 结合BEM和SUIT方法使用PostCSS3、PostCSS深入学习: PostCSS和Sass、Stylus或LESS一起使用4、PostCSS深入学习: 定制自己的预处理器5、PostCSS深入学习: PreCSS的使用6、PostCSS深入学习: 压缩和优化CSS7、PostCSS深入学习: 跨浏览原创 2016-05-22 22:44:53 · 799 阅读 · 0 评论 -
我所知道的几种display:table-cell的应用
总结:1、display:table-cell可以让不固定大小的元素垂直居中2、table-cell可以做两栏自适应布局,且table-cell中的元素给定width也是自适应3、table-cell的等高属性4、table-cell做一行多列布局5、table-cell既有块级元素特性又有td元素特性一、display:table-cell属性简述转载 2016-04-20 16:39:15 · 1548 阅读 · 0 评论 -
CSS3实现32种基本图形
CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出。直接用CSS3画出这些图形,要比贴图性能更好,体验更加,是一种非常好的网页美观方式。 这32种图形分别为圆形,椭圆形,三角形,倒三角形,左三角形,右三角形,菱形,梯形,长方形,正方形,圆环,平行四边形,五角星,六角星,五边形,六边形,八边形,心形,蛋形,无穷符号,消息提示框,钻石,八卦图,食豆人,扇形,月牙,顶左直角三转载 2016-04-19 13:10:12 · 10898 阅读 · 1 评论 -
CSS Sprite、CSS雪碧图应用实例
CSS Sprites技术被国内一些人称为CSS雪碧图,其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字精确的定位出背景图片的位置。CSS 雪碧图技术不是什么新东西,在网转载 2016-04-15 23:20:58 · 2734 阅读 · 0 评论 -
经验分享:多屏复杂动画CSS技巧三则
当下CSS3应用已经相当广泛,其中重要成员之一就是CSS3动画。并且,随着CSS动画的逐渐深入与普及,更复杂与细腻的动画场景也如雨后春笋般破土而出。例如上个月做的「企业QQ-新年祝福」活动:感谢shirley帮忙录制上面的视频,虽然视频内容是手机上的显示效果,但是,这个“企业新年祝福活动”原本只针对桌面端,移动端是后来辅助增强(增加了相当于活动页面UV 5.7%的点击)。而目前转载 2016-04-16 15:42:42 · 637 阅读 · 0 评论 -
胡博君讲解CSS中注释失效的原因
欢迎大家收看我的在线Java全套免费教学超清视频:http://v.youku.com/v_show/id_XODQ1NjU0NDc2.html 这是其中的一个视频连接,大家可以拖动到优酷视频下方,订阅我的账号,因为以后我会有更多视频免费提供百度搜索:输入Fcs_D调的码农 ,或者输入"胡博君"就能看到我的很多视频或者加我的微信号:fcsboy 我可以及时通过微信通知你们QQ学习群:237053693原创 2015-01-06 09:51:26 · 1147 阅读 · 0 评论 -
胡博君谈CSS3中的边框的各种效果
欢迎大家收看我的在线Java全套免费教学超清视频:http://v.youku.com/v_show/id_XODQ1NjU0NDc2.html 这是其中的一个视频连接,大家可以拖动到优酷视频下方,订阅我的账号,因为以后我会有更多视频免费提供百度搜索:输入Fcs_D调的码农 ,或者输入"胡博君"就能看到我的很多视频或者加我的微信号:fcsboy 我可以及时通过微信通知你们QQ学习群:237053693原创 2015-01-06 11:45:14 · 803 阅读 · 0 评论