随笔分类 -  CSS

前端案例分享（一）：CSS+JS实现流星雨动画
摘要：[toc] 引言        平常会做一些有意思的小案例练手，通常都会发到codepen上，但是codepen不能写分析。        所以就在博客上开个案 阅读全文
posted @ 2018-11-01 11:57 阿克琉斯之踵 阅读(4533) 评论(4) 推荐(2)
深入浅出CSS（三）：隐藏BOSS大盘点之默认属性小总结
摘要：写在前面 严重警告，本文包含大量文字，且无配图，请做好充分心理准备后，再进行阅读！ 严重警告，本文包含大量文字，且无配图，请做好充分心理准备后，再进行阅读！ 严重警告，本文包含大量文字，且无配图，请做好充分心理准备后，再进行阅读！ 序言 HTML+CSS作为前端入门语言，其使用难度并不大，但其复杂度 阅读全文
posted @ 2018-09-10 12:49 阿克琉斯之踵 阅读(361) 评论(0) 推荐(0)
深入浅出CSS（二）：关于雪碧图、background-position与steps函数的三角恋情
摘要：【测试代码】 HTML CSS 一、概念理解 1.什么是雪碧图？？ CSS雪碧的基本原理，是把你的网站上用到的一些图片整合到一张单独的图片中，从而减少你的网站的HTTP请求数量。该图片使用CSS的background和background-position属性渲染，达到加在一次图片，可以实现复杂图片 阅读全文
posted @ 2018-08-29 21:56 阿克琉斯之踵 阅读(1841) 评论(0) 推荐(0)
深入浅出CSS（一）：line-height与vertical-align的性质
摘要：【测试代码】 一、line-height的性质 line-height在CSS中的定义为行高，具体计算方法如图所示： 由图中可以看出，在不设置元素高度以及padding、border、margin均为0的情况下，元素本身的高度就是它的line-height值，而文本与文本之间的间隙就是(line-h 阅读全文
posted @ 2018-08-22 21:36 阿克琉斯之踵 阅读(452) 评论(0) 推荐(0)
CSS全局声明*与body的区别
摘要：通常在写CSS前，为了保证兼容性及展示效果的一致，先会清除浏览器默认样式。此时有两种用法比较常用：1、*{}; 2、body{}; 之前我比较偏好于用*{}，比较便于把控样式的设置。一直也没试过body{}，所以对body不太了解。今天简单一试，发现了两者的区别。 简单讲就是——*{}将更改应用于H 阅读全文
posted @ 2018-08-21 15:55 阿克琉斯之踵 阅读(1248) 评论(0) 推荐(0)
滚动视差
摘要：今天在进行FCC的第二个课程挑战时，发现页面的背景随着鼠标滚动，有一种像翻页一样的切换效果，看了之后虎躯一震，这是什么新奇玩意儿？？？立马在网上进行搜索，最后得到的结果 视差滚动。 这东西看着挺有意思，但实现原理还是挺简单的。就是把背景的background-attachment属性设置成fixed 阅读全文
posted @ 2017-01-07 20:43 阿克琉斯之踵 阅读(208) 评论(0) 推荐(0)
酷炫的鼠标滑过添加遮罩层效果
摘要：今天，没错又是今天，今天做的事情还真是多呢~还修了洗衣机，貌似除了写代码不行，样样都行了呢~ 好了，言归正传。今天在浏览一个网页时，鼠标滑过它的图片，出现了一种我感觉很酷炫的效果。像这样： 自己感受下~ <!DOCTYPE html> <html lang="en"> <head> <meta ch 阅读全文
posted @ 2017-01-07 20:21 阿克琉斯之踵 阅读(1238) 评论(0) 推荐(0)