CSS
关注
分享
扫一扫
邹大叔
不做程序猿，只做好老公。
展开
-
【技巧】CSS 居中的三种方法
演示地址：点我1、完美居中：绝对定位 + transform，适用于元素宽高未知的大多数情况<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .parent { position: relative; height:转载 2017-02-08 16:55:49 · 385 阅读 · 0 评论 -
【CSS3】用纯CSS实现加载中动画效果
演示效果：HTML代码：<div class="pswp__preloader__icn"> <div class="pswp__preloader__cut"> <div class="pswp__preloader__donut"></div> </div></div>CSS代码：body{background:#fff;}.pswp__preloader__icn {转载 2017-03-17 15:33:08 · 1848 阅读 · 0 评论 -
【CSS3】使用:not(:last-of-type)简化你的css代码
演示效果：第三个标题没有下边框以前写代码是这样：<style>.posts { list-style: none; margin: 0; padding: 0;}.post { border-bottom: 1px solid #eee; margin-bottom: .5rem; padding-bottom: .5rem;}.post:last-child {原创 2017-03-17 15:50:05 · 821 阅读 · 0 评论 -
【CSS3】多款炫酷鼠标悬停图文动画效果
演示效果：HTML代码如下：<!doctype html><html lang="zh"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-widt转载 2017-03-17 17:24:46 · 6375 阅读 · 3 评论 -
【技巧】鼠标移入图片各种酷炫效果
先看效果：HTML代码如下：<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>RunJS</title> </head> <body> <div id="mainwrap转载 2017-03-16 17:42:11 · 1978 阅读 · 0 评论 -
【技巧】css loading 加载中动画特效39种
演示效果如下图： HTML代码如下：<h1> CSS LOADERS</h1><div class="box"> loader-01 <div class="loader-01"> </div></div><div class="box"> loader-02 <div class="loader-02"> </div></div><div class=转载 2017-03-17 14:14:17 · 7331 阅读 · 1 评论 -
CSS文字左右两横线效果
演示效果：点我效果一：<style type="text/css" media="screen">#login_frame .with-line { width:300px;font-size: 16px; color: #999; margin: 0 auto; position: relative; text-align: center}#login_转载 2017-05-04 10:54:09 · 1318 阅读 · 0 评论 -
【CSS3】纯css3悬停文字线条边框动画特效
演示效果如下：<!doctype html><html><head><meta charset="utf-8"><title>按钮悬停动画</title><style>html, body { color: white; background: #323232; font-weight: lighter;}h1, h2, h3, h4 { font-family: "Os转载 2017-05-24 10:15:25 · 2255 阅读 · 0 评论 -
【CSS3】浏览器前缀兼容写法
Vendor prefix—浏览器引擎前缀，是一些放在CSS属性前的小字符串，用来确保这种属性只在特定的浏览器渲染引擎下才能识别和生效。谷歌浏览器和 Safari浏览器使用的是WebKit渲染引擎，火狐浏览器使用的是Gecko引擎，Internet Explorer使用的是Trident引擎，Opera以前使用Presto引擎，后改为WebKit引擎。一种浏览器引擎里一般不实现其它引擎前缀标 识的C转载 2017-05-16 17:35:23 · 2245 阅读 · 0 评论 -
【CSS】实现单行、多行文本溢出显示省略号（…）
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。实现方法：overflow: hidden;text-overflow:ellipsis;white-space: nowrap;效果如图：但是这个属性只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略号呢。接下来重点说一说多行文本溢出转载 2017-05-17 10:31:15 · 3001 阅读 · 0 评论 -
【CSS3】8款好看的纯CSS3搜索框
演示效果：全部代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>8款纯CSS3搜索框</title> <link href="ht转载 2017-03-17 15:14:08 · 78025 阅读 · 12 评论 -
【技巧】css之html样式能用 外部样式不能用
【技巧】css之html样式能用 外部样式不能用在编程的过程中，我遇到了一个少见的问题。 html中样式起作用，但是到了引用外部样式的时候就时效了，我分析了可能的原因：1、标签未关闭2、优先级较低3、声明编码格式不对4、结尾未加分号5、JS影响6、页面一开始声明就出错了7、其他说道这里，还有一种是最让人头疼的，那就是缓存。这点很有可能被忽略，这是我今天遇到的问题，希望大家能够平时细心一点，专业一点。原创 2017-02-23 10:03:22 · 2895 阅读 · 0 评论 -
【图片】纯CSS3制作背景图
演示地址：点我<!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8"> <title>CSS3制作背景图</title> <style type="text/css" media="screen">.patterns { width: 200px; height: 200px;转载 2017-02-08 16:46:18 · 2817 阅读 · 0 评论 -
【CSS3特效】鼠标悬停动画
演示地址：点我<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>CSS3鼠标悬停动画</title> <style type="text/css"> body { margin: 200px;转载 2017-02-08 16:30:39 · 1956 阅读 · 0 评论 -
【特效】简单的呼吸心跳灯
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .breath{转载 2017-02-08 18:07:22 · 2358 阅读 · 1 评论 -
【技巧】Animate.css动画库的简单使用
演示地址：点我简介Animate.css 是一个来自国外的 CSS3 动画库，它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达 60 多种动画效果，几乎包含了所有常见的动画效果。虽然借助 animate.css 能够很方便、快速的制作 CSS3 动画效果，但还是建议看看转载 2017-02-09 09:20:55 · 1350 阅读 · 0 评论 -
【CSS】简易的页面侧边栏导航
演示地址：点我测试代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> /*左侧边栏*/ a{ text-decoration: none; } .sideBa原创 2017-02-09 11:32:47 · 6911 阅读 · 0 评论 -
【CSS】自定义上传文件按钮
【CSS】自定义上传文件按钮<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="common.css"/> <style> .sc转载 2017-02-09 17:24:40 · 901 阅读 · 0 评论 -
【CSS3】右上角倾斜文字
【CSS3】右上角倾斜文字<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .aaa{ width:200px; height:200px; positio转载 2017-02-09 17:29:33 · 3251 阅读 · 0 评论 -
【CSS3】太极图----三层div实现
【CSS3】太极图—-三层div实现<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>太极</title> <style class="cp-pen-styles"> *{ padding:0; margin:0; } .转载 2017-02-09 17:32:00 · 2844 阅读 · 0 评论 -
【CSS】绘制各种图形实例
【CSS】绘制各种图形实例<!DOCTYPE html><html><head><meta charset="UTF-8"><meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" /><title>纯CSS绘制各种图形实例</tit转载 2017-02-09 17:55:49 · 632 阅读 · 0 评论 -
【技巧】当屏幕宽度更换时变换调用css
HTML代码如下：<div class="abc"></div>JS代码如下：<script> $(function(){ $(window).resize(function() { var ww = $(window).width(); if( ww > 1000 ){ $('abc').rem原创 2017-06-02 17:50:55 · 800 阅读 · 0 评论