用纯css3和html来制作一些社交媒体的图标，虽然没有图片和javascirpt,css3配合 html也能实现这些图标。html代码如下：复制代码代码如下:<div class="content"> <ul> <li class="facebook"><a href="#non" title="Share on Facebook">Facebook</a></li> <li class="twitter"><a href="#non" title="Share on Twitter">Twitter</a></li> <li class="rss"><a href="#non" title="Subscribe to the RSS feed">RSS</a></li> ...
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}#wrap{width: 300px;height: 300px;margin: 100px auto;background: pink;opacity: 0.1;}#inner{width: 100px;height: 100px;background: deeppink;}</style></head><body><div id="wrap"><div id="inner">inner</div></div></body></html>设置文字阴影 <!DOCTYPE html><html><head><meta charset="UTF-8"><titl...
好程序员web前端技术之CSS3过渡，css3的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值transition-property：检索或设置对象中的参与过渡的属性transition-duration：检索或设置对象过渡的持续时间transition-delay：检索或设置对象延迟过渡的时间transition-timing-function：检索或设置对象中过渡的动画类型简写：...
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style> *{margin: 0;padding: 0;} .hover {width: 500px;height: 500px;background-color: red;-webkit-transition: all 0.5s linear;-moz-transition: all 0.5s linear;-o-transition: all 0.5s linear;transition: all 0.5s linear;} .hover:hover, .hover:focus, .hover:active {-webkit-transition: all 0.5s linear;-moz-transition: al...
从这篇文章开始，会利用几个篇幅，我将跟大家分享 从CSS1到CSS3都是如何实现页面布局的(当然，所指的范畴是利用CSS技术)。由于盒子模型技术内容比较多，这篇文章我将着重讲解知识点。下一篇文章，我会带领大家开发一个兼容 pc端浏览器和 移动端浏览器的弹性布局web界面的实例。希望大家能从中领受到CSS3在布局方面的强大功能。好了，长话短说，现在开始我们的《CSS3中的弹性流体盒模型技术详解》之旅吧！在讲解CSS3中新增的弹性布局...
原文地址今天我们来探索一下Carl Philipe Brenner的网站上一个微妙而有趣的动画效果。当鼠标经过网格元素时，会有一个微妙的动画发生——网格元素变得透明，每条边有个顺时针的动画，创造了非常好的效果。这种效果是通过JS给span标签的宽或者高做了动画。我们待会会用SVG和CSS渐变来完成。注意，这个技术还是实验性的。首先，让我们来看看基本的概念，然后我们会朝着这个方向努力。请注意，我们将在SVG上使用CSS过渡，可能无法得到...
在线演示 本地下载原文：https://www.cnblogs.com/datiangou/p/9986695.html
Flexbox模型的三个规范：1. 旧版本 2009年 display: box、inline-box2. 混合版本 2011年 display: flexbox、inline-flexbox3. 新版本 display: flex、inline-flex 当display属性为以上时，将为其后代创建FFC(Flex Formatting Context)。旧版本属性如下：1. box-orient 定义伸缩主轴的方向 horizontal | vertical | inline-axis (内联轴排列)| block-axis (块轴排列)2. box-directio...
在这个年代，你要是不懂一点点css3的知识，你都不好意思说你是个美工。美你妹啊，请叫我前端工程师好不好。呃。。好吧，攻城尸。。。呵呵，作为一个攻城尸，没有点高端大气上档次的东西怎么能行呢，那么css3的动画就绝对是值得你拥有了，虽说IE9以及更早版本的IE浏览器都不支持css3动画，但是IE6-8浏览器已是江河日下，使用谷歌浏览器、火狐浏览器、IE10+浏览器以及移动端浏览器等这些支持css3动画的浏览器的人数越来越多，所以如果...
CSS3 边框：border-radius（倒圆角）box-shadow （盒子阴影）border-image （边界图片）CSS3 背景：background-size（属性规定背景图片的尺寸。）background-origin（属性规定背景图片的定位区域。背景图片可以放置于 content-box、padding-box 或 border-box 区域）CSS3 文本效果：text-shadow（可向文本应用阴影，可以设置水平阴影、垂直阴影、模糊距离，以及阴影的颜色）word-wrap（word-wrap 属性允许您允许文本强制文本进行换...
1. 边框（圆角边框、加阴影和用图片绘制）新增加 border-radius box-shadow border-image.div1{ border:2px solid purple; border-radius: 25px; -moz-border-radius:25px;(火狐老版本) width:600px; height:300px; box-shadow:10px 10px 5px #888888; -webkit-border-image: url(border.png) 2 2 round;（chrome）}2.背景新增加 background-size background-origin background-clip.div1{ bord...
CSS3，html5：各种属性，有酷炫的效果兼容性问题：政府大多数政府机构都是用的IE6.7，所以很多时候要兼容IE6.7，IE连PNG格式都不支持margin：本身有兼容性问题，在其他地方可能有问题padding：内边距还好一些APP端只有一个兼容性问题，屏幕，要自适应屏幕两种方法：（腾讯的autoSize,js）（metaholder.js 连rem都可以不用，用px都可以）手机端只有屏幕兼容性问题，所以常用CSS3，html5CSS3扩展：浏览器有兼容性问题，有些可以在浏览...
-moz代表firefox浏览器私有属性 -ms代表ie浏览器私有属性 -webkit代表safari、chromecontenteditable="true" 内容变的可编辑onpaste="return false" 表示不能粘贴,用于input或不能粘贴的div、span、p标签等onselectstart="return false" 不能复制文本内容-moz-user-select:none; 在火狐下面设置样式不能选择插入样式表的方法有三种: 1、外部样式表（.css文件引入...
实例动画step1：改变字体颜色<h1><a href="http://www.rainleaves.com">雨打浮萍</a></h1>h1 a{color:#03c;text-decoration:none;-webkit-transition:color .5s ease-in-out;-moz-transition:color .5s ease-in-out;-o-transition:color .5s ease-in-out;transition:color .5s ease-in-out;} h1 a:hover{color:#f60; }step2：改变背景颜色<h2>专注于web前端开发</h2>h2:hover{-webkit-transition:background-color 0.5s linear;-mo...
A． 使用选择器来插入内容h2:before{ content:"前缀";}h2:after{ content:"后缀";}B． 指定个别的元素不进行插入h2.sample:before{ content:none;}2. 插入图像A． 在标题前插入图像文件h2:before{ content:url(anwy.jpg);}B． 将alt属性的值作为图像的标题来显示（用不了）img:after{ content:attr(alt); display:block; text-align:center; margin-top:5px; font-size:11px; font-weight:bold; ...