CSS
关注
分享
扫一扫
塞上江南果
如果你知道自己去哪，全世界都会为你让路
展开
-
鼠标移过图片变高亮
前言：自从写博客开始，这次快一个月没有更博了，说忙也不是因为忙，不管怎么，今天总算是又开始了。最近在写一个项目，所以又学到一些小特效，今天就简单的总结下。我们平时进入一个网站，扫过一个图片有时就会看到，图片出现文字，然后图片变得灰暗，或者图片变得高亮。两个其实都是一个原理，我们可以用透明度opacity和层级z-index，这两个属性来设置。一。实现过程： （1）定义一个大的div，在里面包含一个原创 2016-12-23 16:33:39 · 4171 阅读 · 0 评论 -
CSS悬浮下拉菜单
这是前端时间课设时写的一个简单的下拉菜单，主要就是对CSS定位和选择器的使用，下面是实现代码：CSS代码： .list-menu{ display: flex; background: #f7f7f7; border-radius: 5px; padding: 10px 0;原创 2017-06-20 21:16:11 · 1442 阅读 · 0 评论 -
CSS文本超出n行就隐藏并显示省略号
文本超出若干行就换行，这个功能几乎每个文本浏览网站都会用到，实现它的办法也有很多，今天简单的介绍一下实现它的方法。一. 单行文本不换行，并将超出文本隐藏.box-content{ overflow: hidden; text-overflow: ellipsis; white-space: nowarp;}效果如图：这样会在文本末尾显示一个省略号。二. 在Webkit内核的原创 2017-06-18 16:34:46 · 3293 阅读 · 0 评论 -
CSS的clip实现元素的逐渐显示和消失
前言：只想说一句，CSS的功能太强大了！！！一. clip属性的用法clip属性的值指定了元素的剪切区域，目前它的剪切区域只能是矩形的。语法：clip: rect(top right bottom left)；单位：为像素为长度值，不允许使用百分比，可以使用负数，表示剪切区域的可以延伸到指定元素的长度之外；可以使用auto：表示剪切区域与相应边界一致；JavaScript语法：element原创 2017-03-12 11:21:14 · 6964 阅读 · 0 评论 -
CSS3的text-shadow和box-shadow
阴影在很多地方都会见到，加上阴影给人以立体的感觉，今天就简单的总结一下css3的属性text-shadow和box-shadow是如何实现阴影效果的。一. text-shadow属性该属性是来给文字添加阴影效果的，接下来看一下他的用法，和所实现的效果： 用法：text-shadow:h-shadow v-shadow blur color;h-shadow：水平方向的偏移量，值为正数表示像左偏移原创 2017-03-09 20:54:31 · 700 阅读 · 0 评论 -
用CSS伪选择器实现脚本控制的按钮功能
记得之前看到一句话“为了性能考虑，能用CSS实现的特效和功能，尽量不要使用JavaScript脚本”，因为JS的特效基本都是针对DOM节点的操作，只要DOM发生变化，就肯定会引起回流，回流是比较消耗资源的，所以为了性能考虑能避免就要避免。下面介绍两种CSS伪选择器实现按钮功能。一. checked伪选择器大家都知道表单中的复选框<input type="checkbox">，可以配合<label>元原创 2017-03-18 15:12:36 · 1005 阅读 · 0 评论 -
CSS盒子模型
这是一个迷茫，惶恐的三月，最近很着急，很害怕，有一种火烧眉毛，才知道自己之前浪费了多少时间。但是不管怎么样，相信只要一直学习巩固，过得充实了，剩下的就顺其自然了。说了一堆废话，接下来步入正题，谈一下，CSS著名的盒子模型。一. 盒子模型简述： 相信大家都知道，只要是块级元素，就都有自己的盒子模型，盒子模型由：content（内容）+padding（填充）+border（边框）+margin（边界）原创 2017-03-08 14:59:05 · 317 阅读 · 0 评论 -
CSS3动画——transfrom（变形）
简介：transform（变形）是css3制作动画的其中一个属性，主要包括以下这几种类型，分别是：rotate（旋转）、skew（扭曲）、scale（缩放）和translate（移动）。下面介绍主要用法。1.rotate（旋转） 用法为：transform:rotate(数字+deg);rotate的参数是度数，即指定对象旋转的度数，为正数表示顺时针旋转，为负数表示逆时针旋转，transform:原创 2017-02-04 00:16:51 · 1126 阅读 · 7 评论 -
伸缩布局
一.什么是伸缩布局？ 目的就是为了让子元素更好的利用父元素的空间，可以让水平居中，垂直居中，和排列对齐变得更加容易。二.如何使用 首先需要在父元素中指定布局的方式，即伸缩布局，代码为display:flex，当然这样是不够的，还需要指定细节，比如子元素按怎样的方向排列，还有子元素相对于父元素的排列位置等，具体说明如下： 1.指定布局方式：display:flex; /*指定为伸缩布局*/2.子原创 2017-02-02 17:13:31 · 609 阅读 · 0 评论 -
css媒体查询与导航栏
前言：之前的导航栏一直都在用bootstrap框架，基于框架的导航栏自适应性很好，所以一直就懒于自己去写，最近在看网页的自适应性，所以就自己动手写了个导航栏，效果及代码如下：代码： html代码：<nav> <div class="btn-menu"> <a href="#" class="btn-menu-icon btn-list-icon"></a> </di原创 2017-01-31 23:47:08 · 1506 阅读 · 0 评论 -
CSS媒体查询（media query）
前言：一直都有用到媒体查询，但都是只会一点皮毛，没有系统深入的学习过，最近再看一本书，主要讲的就是如何制作响应式web页面，所以今天就简单的做个总结。一.什么是媒体查询 先看一段简单的媒体查询代码：@media only screen and (max-width: 600px){ .navside { display: none; }}上面代码的意思是原创 2017-01-31 21:43:04 · 1213 阅读 · 0 评论 -
用伸缩布局实现日历展示
前言：flex布局方式使网页的布局定位更加简单，大量的减少了css代码，使用起来非常方便，在之前的博客也有写过关于flex布局的内容，今天附上一个小例子，github展示地址：https://spiritliftedhigh.github.io/demo/canlendar.html 具体内容如下：<!DOCTYPE html><html><head> <title>日历</title原创 2017-02-13 13:57:32 · 1273 阅读 · 0 评论 -
CSS3动画——@keyframes规则和animation属性
简介：@keyframes定义关键帧，即动画每一帧执行的是什么，animation是来定义动画的每一帧如何执行的。一.@keyframe语法：@keyframes animationname {keyframes-selector {css-styles;}}animationname是动画名字；keyframes-selector帧选择器，用百分比定义，0%-100%，与from-to等价，作用原创 2017-02-07 14:58:59 · 6215 阅读 · 0 评论 -
CSS3动画——transition（过渡）
简介：transition（过渡）字如其名，是用来设置元素由一种状态到另一种状态中间的过渡效果的，比如变化的速度，变化的持续时间等。它主要有4个属性，分别是transition-property（属性，如width,color等），transition-duration（变化持续时间），transition-timing-function（如何变化），transition-delay（延迟时间）。使原创 2017-02-04 21:23:44 · 996 阅读 · 0 评论 -
美化input文件上传按钮
前言：用过文件上传的同学都知道，html自带的上传按钮样子很丑，如果我们写的界面比较炫的话，在加上个原始的按钮，界面就会大打折扣，所以美化上传按钮是很有必要的。一。实现方法 在按钮的外围包裹一个div，将上传按钮的透明度设为0，将上传按钮的大小和外围div的大小设为相同，再对外围div进行美化即可。 二。代码和样式 1.样式一 html代码：<div class="file-style">原创 2016-12-23 17:36:48 · 5748 阅读 · 0 评论 -
CSS的定位机制
CSS的三种定位机制原创 2016-09-26 19:13:48 · 722 阅读 · 0 评论