用纯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; ...