纯CSS
front_end_fan
互联网公司缺的是技术过硬又精通业务的工程师,缺的是真正能解决实际业务问题的人,缺的是复合型的人才。
展开
-
CSS特殊样式(一)模拟波浪线+矩形切割
html>html>head lang="en"> meta charset="UTF-8"> title>title> style> /*例一*/ .eg1:before{ content: ''; position: absolute; z-index: 1000原创 2017-06-23 10:00:10 · 7849 阅读 · 0 评论 -
css扫光效果总结,css文字扫光,css图片扫光
前言我录制的慕课网视频一直没有上线,慕课网的消息说是可能加入就业课程或者系列课程。有可能年底上线,我等的花儿都谢了!因此,我昨天在看慕课网时,发现他们确实改版了,实战页面有图片扫光效果,地址我就不列了!感觉这个效果还蛮不错,其实,我之前也做过类似的效果。今天借着这个引子,来和大家一起探讨一下图片的扫光效果吧!思路其实扫光的思路都是一样的,不外乎是表层一个动态的光,从左往右进行一个动画运动!但原创 2017-09-11 10:52:27 · 3312 阅读 · 0 评论 -
漂亮的css文字效果
效果图:css文字效果* { padding: 0; margin: 0; text-align: center;}body { padding-bottom: 200px;}div { font-size: 36px;}.header-item { line-height: 4;}.box1 { co原创 2017-09-14 09:25:40 · 7134 阅读 · 0 评论 -
css常用效果总结
css有不少常用的效果,你在平时浏览网站的时候可能会看到,但是真的要自己写的时候,有时候会突然忘记,今天稍微对那些常见的效果做一下小结。1、每逢大的灾难的时候,很多网站变成了灰色,如何让网站快速变灰?css代码是很简单的,用的是css的filter功能。代码如下:html { filter: grayscale(100%);//IE浏览器 -webkit-filter: graysca转载 2017-09-05 14:10:46 · 696 阅读 · 0 评论 -
CSS的单位及css3的calc()及line-height百分比
单位介绍说到css的单位,大家应该首先想到的是px,也就是像素,我们在网页布局中一般都是用px,但是近年来自适应网页布局越来越多,em和百分比也经常用到了。然后随着手机的流行,web app和hybrid app的开发,都用到了css3技术,在css3中,新增了许多单位,rem、vw和vh、vmin和vmax、ch和ex等等,那现在对这些单位分别做一下详细的介绍吧。em做前端的应该对em不陌生,不是原创 2017-09-05 09:42:29 · 3021 阅读 · 0 评论 -
自定义input[type=”file”]的样式
input[type=”file”]的样式在各个浏览器中的表现不尽相同:1. chrome:2. firefox:3. opera:4. ie:5. edge:另外,当我们规定 input[type=”file”] 的高度,并把它的行高设置成与其高度相等后,chrome中难看的样式出现了:“未选择任何文件”这一行并没有竖直居中。似乎在 firefox 中好看一些,嗯,我比较喜欢用 firefo原创 2017-09-04 17:51:23 · 679 阅读 · 0 评论 -
CSS特殊样式(九)悬浮效果菜单
效果图:原创 2017-09-04 17:02:04 · 4270 阅读 · 0 评论 -
CSS特殊样式(八)The Shapes of CSS
这里各种纯CSS写出的形状 让你脑冻大开原创 2017-08-03 14:09:36 · 305 阅读 · 0 评论 -
CSS content换行技术实现字符animation loading效果
效果图 方法1:ch单位等宽字体+text-indent点点点动画 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .grebtn{text-decoration: none;pa原创 2017-08-02 16:20:26 · 609 阅读 · 0 评论 -
css代码实时预览(脑洞大开的操作)
提问:一些网站上面是如何实现,css代码既可以显示又可以编辑,而且编辑完了可以实时预览(即网页上改了css立马显示效果)? 答:(功能一)显示:style 标签默认显示方式 display:none 要改成 display:block (功能二)可编辑:<style contenteditable> .test_image{…}< /style> 一、单刀直入,效果抢先如果您转载 2017-07-25 10:02:41 · 8003 阅读 · 0 评论 -
CSS特殊样式(六) box-shadow实现纸张的曲线投影效果
总结:1、box-shadow属性,存在兼容性问题使用时需: -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.06) inset; -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0,转载 2017-07-24 17:01:09 · 3505 阅读 · 0 评论 -
CSS特殊样式(二)三种css方法实现三角效果
遇到对话框、信息提示框就必须要用图片吗?强大的css就不能实现吗?“仅用css就能解决一切复杂样式;不用hack就能解决各浏览器的兼容性问题,是为css大神” —–赞哥<!doctype html><html><head><meta charset="utf-8"><title>三种css方法实现三角效果</title><scrip原创 2017-07-19 18:07:13 · 573 阅读 · 0 评论 -
css margin的相关属性,问题及应用
这篇文章发布于 2009年08月25日,星期二,03:22,归类于 css相关。 阅读 87956 次, 今日 33 次 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhang转载 2017-07-17 17:49:09 · 518 阅读 · 0 评论 -
CSS特殊样式(三)纯CSS实现各类气球泡泡对话框效果
一、关于纯CSS实现气泡对话框首先,来张大图:上边这张黄黄的,大大的,圆圆的,有个小尾巴,文字内容有些YY的图片,就是使用纯CSS实现的气泡对话框效果,一点图片都没有哦。看到这里,你是不是跟我一样,有些惊叹CSS的潜力呢。关于这张图片,暂时先放到一边,下面我要讲一些与主旨相关的比较重要的,同时又很实用的一些技术。我们首先看下面这一张图片(截自人人网):可能颜色有点淡,在左上角有个90度的尖角,于转载 2017-07-20 10:55:20 · 2692 阅读 · 0 评论 -
纯css美化复选框史上最简单的方法
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> input.cbox { -webkit-appearance: none; width: 16px!important;原创 2017-12-27 14:21:12 · 3626 阅读 · 1 评论