![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
文章平均质量分 55
微也的web
生命不息,学习不止
展开
-
css学习选择器之:nth-child(n)
今天新学习了一个小效果,网站比如说实现间行颜色变化,比如说一行黑,一行白,好吧,斑马就出现了,当你鼠标触碰某一行,颜色背景变化,尤其是当你连接数据库时,简单的代码就显得很重要了.这时候一个有意思的朋友出现了,:nth-child(n) 一直在那蹦跶着说“找我呀”,这个是说选择器匹配属于其父元素的第N个子元素,从0开始,比如说p:nth-child(2)指下标为2的p元素,就是第3个元素;然后原创 2015-08-24 11:42:20 · 1703 阅读 · 0 评论 -
CSS | 渐变的妙不可言 linear & radial
“你以为你这么低调我就找不到你了吗?没有用的,像你这样拉风的属性,只要有你在的地方,就好像黑夜中的萤火虫一样,那样的鲜明,那样的出众;你那委婉的形状,奇特的写法,神乎其技的思路,还有那百转千回……都深深地迷住了我。”——题记,改自《国产凌凌漆》正文最近发现css3渐变无敌,边边角角利用linear-gradient或者radial-gradient也可以实现,如下图,包括之前所转载 2017-01-23 17:32:13 · 706 阅读 · 0 评论 -
css | 实现有趣的多边形
“曾经有一个多边形摆在我面前,我不懂实现,等我查询探索时,才发现它的巧妙非常,css的灵活不绝于此。如果上天能够给它一个说话的机会,它告诉世界:无敌,是多么,多么寂寞!如果非要给这个无敌加上个期限,那就是:无极限!”——题记,改编源自《仙履奇缘》正文前端开发路漫漫,在行走web世界的路途中,我们肯定有遇到多边形的设计,最简单的方法莫过于直接上图片走起,作为一个有“追求”的前转载 2016-12-20 10:56:06 · 1909 阅读 · 0 评论 -
CSS | “百变”图片秀 mask
“mask-image”看着“图片”:“你想变啊!图片,你要是想变的话你就来找我嘛,你不找我怎么知道你想变呢?固然你不太懂跟我怎么相处,然则你照旧得找我,我会带你的嘛,不相处你说你想变我不给你变,你不想变我也不给你变,要讲沟通嘛!你想改头换面就来找我,我肯定给你想要的诶,你是真的想整型吧?”。——题记,改编源自《大话西游之仙履奇缘》正文我们在写前端样式的时候,css中实现不规则的图转载 2016-12-26 10:08:47 · 522 阅读 · 0 评论 -
CSS3| 制作文字波浪线效果
css的设计之巧妙,实现之精妙,细细寻味,其妙非凡,妙不可言。这波浪线,取巧的运用了linear-gradient属性,合角度、颜色、位置于一体,配合background-size,background-repeat,化一为多,平滑过渡。哇,这最后的效果太巧秒了!尘世间没有词来形容了…… ——题记,改编自《食神》正文语法:linear-gradient(di原创 2016-11-07 16:27:36 · 5343 阅读 · 0 评论 -
说说css3动画效果那点事儿(一)
“H5,CSS3很强大呀,CSS3动画效果很好呀”,今天,我们便来初识一下CSS3的魅力吧……1. animation //CSS3动画,从一种样式转变为另一种样式的效果语法:animation: name duration timing-function delay iteration-count direction;参数意义name //绑定到选择器的keyframe名称,默认原创 2016-03-14 21:19:41 · 425 阅读 · 0 评论 -
谈谈css王朝的px,em,rem之间的那些事儿
话说,CSS(层叠样式表)有常见的三个单位兄弟,px,em,rem,作为前端人员,跟着三兄弟之间打的交道也是比较多,现在我们来介绍一下,这三个兄弟吧……1. px 常见老大,像素(Pixel),相对长度单位,是指相对于相识屏幕分辨率而言的,分辨率越高,像素点越小,反之,分辨率越低,点较大,比如说在800*600的分辨率和1024*728的分辨率比较,在1024*768的分辨率下文字会显得小;原创 2016-03-14 17:04:03 · 532 阅读 · 0 评论 -
哈~css模型(一)
作为前端,当你在敲代码,体验页面的时候,总是不断对位置啊什么的修修改改,有时候想,——咦,我明明设的刚刚好,为什么它跑下面去了;——哎呀,这莫名其妙的咋移位了呢;——莫名就跳出来了……额我觉得,我们还是重新认识下css的盒模型吧,今天讲下W3C盒模型和IE盒模型。见下图这是标准W3C的盒模型,如下数据:原创 2016-03-09 22:06:36 · 433 阅读 · 0 评论 -
CSS3设计边框忽隐忽现功能
css3功能很强大哈,实现动画功能很方便,今天在这里分享怎么实现类似星星眨眼,忽隐忽现,一亮一闪的功能……同样,我们先知道CSS3的几个属性:1. box-shadow:向框添加一个或多个阴影,box-shadow: 水平阴影距离(必须) 垂直阴影距离(必须) 模糊距离(可选) 阴影尺寸(可选) 颜色(可选) 阴影类型(可选);如:box-shadow: 1em 2em 1原创 2015-07-18 12:01:19 · 1590 阅读 · 0 评论 -
CSS | steps 的内心探索之路
“我要一步一步往前跳,在最远方乘着web往前飞;小小的天……我有属于我的天”——题记,改编源自《蜗牛》正文当我们给元素做动画的时候,可能会用到steps,把多个图片拼合成一张雪碧图,改变background-position进行动画,简便而又强大的属性。如同变形金刚,“卡卡卡”,而有时又被它搞得一愣一愣的,咦,咋没看到最后一张图。用归用,不由疑惑steps到底是个什么鬼?索转载 2017-01-23 17:34:11 · 589 阅读 · 0 评论