css3
文章平均质量分 76
erdouzhang
这个作者很懒,什么都没留下…
展开
-
css3 - 使用选择器在页面中插入内容
1.使用选择器来插入内容当插入的内容为文字时,必须要在插入文字的两旁加上单引号或者双引号。html:<h2>我是一个标题</h2>css:<style> h2::before { content: 'COLUMN'; color: #fff; background-color: orange; font-family: 'Comic Sans原创 2017-04-28 08:56:40 · 1337 阅读 · 0 评论 -
css3 - 图标元素动画效果5 - 弹性动画效果
在线演示(刷新一下动画效果明显)让图标运动到终点时,并非减速停止在终点,而是到达终点后继续向上运动,超过一定距离后再反方向运动到终点,形成一种往复的效果。 我们可以使用帧动画来实现这样的效果,但是如果使用速度曲线(贝塞尔曲线)将更为简便。html:<div class="box icon1"> <i class="fa fa-home fa-4x"></i></div><div class=原创 2017-05-08 18:35:47 · 1190 阅读 · 0 评论 -
页面切换动画效果1 - 左右切换
在线演示点击Next按钮后出发页面切换动画,借助jQuery来实现这一交互功能。html:<article id="tablet"> <img src="images/05.jpg" alt="tablet"> <h1>Comprehensam</h1> <p>Tablets, tablets, ...right one for you.</p> <a href="#原创 2017-05-08 20:45:55 · 2270 阅读 · 0 评论 -
页面切换动画效果2 - 上下切换
在线演示点击Next按钮后出发页面切换动画,借助jQuery来实现这一交互功能。html:<article id="tablet"> <img src="images/05.jpg" alt="tablet"> <h1>Comprehensam</h1> <p>Tablets, tablets...right one for you.</p> <a href="#wi原创 2017-05-08 20:47:57 · 1449 阅读 · 1 评论 -
页面切换动画效果3 - 缩放切换
在线演示对页面进行缩放,使用transform属性中的scale方法。该方法有两个参数,分别是水平方向和垂直方向的缩放值,0代表缩放到最小,1代表缩放到原始大小。html:<article id="tablet"> <img src="images/05.jpg" alt="tablet"> <h1>Comprehensam</h1> <p>Tablets, tablets.原创 2017-05-08 20:48:58 · 726 阅读 · 0 评论 -
页面切换动画效果4 - 3D切换
在线演示html:<article id="tablet"> <img src="images/05.jpg" alt="tablet"> <h1>Comprehensam</h1> <p>Tablets, tablets... one for you.</p> <a href="#wifi">Next</a> </article> <article id="原创 2017-05-08 21:00:40 · 1555 阅读 · 0 评论 -
页面切换动画效果5 - 3D+缩放同时进行
在线演示在切换过程中会发生同时翻转和缩放的效果。如图:html:<article id="tablet"> <img src="images/05.jpg" alt="tablet"> <h1>Comprehensam</h1> <p>Tablets, tablets... one for you.</p> <a href="#wifi">Next</a> </a原创 2017-05-08 21:13:20 · 700 阅读 · 0 评论 -
css3 - 属性选择器、伪元素选择器、结构性伪类选择器
一、属性选择器html:<body> <div id="box1">示例1</div> <div id="box2">示例2</div> <div id="box3">示例2</div> <div id="box4">示例2</div></body>css:<style> [id = box1] { /*选择id="box1"的标签 设置样式*/ background-原创 2017-04-27 09:38:15 · 2160 阅读 · 0 评论 -
css3 - 选择器first-child、last-child、nth-child、nth-last-child、nth-of-type
first-child、last-child、nth-child、nth-last-child、nth-of-type1.first-child(IE7兼容)、last-child(IE8不兼容)html:<body> <h2>列表</h2> <ul> <li>列表项目1</li> <li>列表项目2</li> <li>列表项目3</li> <li>列表项目4原创 2017-04-27 10:59:30 · 1542 阅读 · 0 评论 -
css3 - box-sizing属性
在css3中,使用box-sizing属性来指定针对元素的宽度和高度的计算方法。 兼容 IE8 Chrome 8 Opera 10 Firefox 4 box-sizing √ √ √ √在css中,使用width属性和hight属性来制定元素的宽度与高度。但是使用box-sizing属性,可以指定用width属性和height属性分别指定的宽度值与高度值是否原创 2017-05-09 19:20:21 · 463 阅读 · 0 评论 -
三角形图标绘制(对话框中三角形)
html:<article> <h1>Html</h1> <p>At W3Schools...more.</p> </article>css:body { background-color: #d4676a; margin: 50px;}article { width: 400px; padding: 20px 40px;原创 2017-05-10 09:40:10 · 1529 阅读 · 0 评论 -
渐变色绘制
1.背景颜色渐变 html:<a href="#">BUTTON</a>css:a { display: inline-block; font-size: 2em; border-radius: .3em; text-decoration: none; padding: 1em 2em; color: #fff; ba原创 2017-05-10 10:24:42 · 2155 阅读 · 0 评论 -
页面背景色渐变
渐变效果: css:html,body { height: 100%;}body { background: linear-gradient(#51b0e7,#006084);}上下两块: css:body { background: linear-gradient(#51b0e7 50%,#006084 50%);/*上下各50%*/}横线背景:原创 2017-05-10 10:47:02 · 2919 阅读 · 0 评论 -
锯齿图形绘制
html:<header>CSS3 linear gradient</header>css:body { background-color: #fff; margin: 0;}header { width: 100%; height: 220px; line-height: 220px; color: #fff; f原创 2017-05-10 11:12:17 · 1648 阅读 · 0 评论 -
css3 - UI元素状态伪类选择器
特征:指定的样式只有在某种状态下才起作用 共11种分别为:E:hover、E:active、E:focus、E:enable、E:disable、E:read-only、E:read-write、E:checked、E:default、E:indeterminate、E:selection各UI元素状态伪类选择器受浏览器的支持情况 选择器 Firefox Safari Opera原创 2017-04-27 21:58:40 · 4243 阅读 · 0 评论 -
SVG图像绘制多边形
在线演示原始图为图一;鼠标滑过使SVG图形上移30px,如图二; html:<div id="sec"> <div id="sec-description"> <h1>Hello</h1> <p>If you...pain. </p> </div> <svg width="200px" height="500px"> <po原创 2017-05-10 12:59:47 · 6194 阅读 · 0 评论 -
css3 - 图标元素动画效果4 - 动画延迟
上一篇中,四个图标的动画效果都是同时进行的;为了使图标由先后顺序,我们将每个动画添加延迟。如下图:在线演示(刚一加载效果不明显,刷新一下) html:<div class="box icon1"> <i class="fa fa-home fa-4x"></i></div><div class="box icon2"> <i class="fa fa-search fa-4x"><原创 2017-05-08 18:34:06 · 787 阅读 · 0 评论 -
css3 - 图标元素动画效果3 - 图标整体在Y轴上移
在线演示(刚开始打开效果不明显,刷新一下) 初始状态使图标初始位置向下偏移-100%,然后再向上移动到初始位置,在此过程中同时使图标同步变化,由完全透明变化为完全不透明。html:<div class="box"> <i class="fa fa-home fa-4x"></i></div><div class="box"> <i class="fa fa-search fa-4x"原创 2017-05-08 18:31:52 · 997 阅读 · 0 评论 -
css3 - 图标元素动画效果1 - 只执行一次动画
在线演示鼠标指针滑过时,图标在1秒内匀速旋转360度。 使用transform属性来实现图标的旋转,并且设置transitio动画,将变化的属性名称设置为transform。所以我们看到图标的旋转效果。图标文件引入:<link rel="stylesheet" href="lib/font-awesome/css/font-awesome.min.css">html:<div class="clo原创 2017-05-08 08:20:45 · 12744 阅读 · 0 评论 -
css3 - 文字相关样式
1.给文字添加阴影 html:<div>你好</div>css:<style> div { color: red; font-size: 40px; font-weight: 700; font-family: 宋体; text-shadow: 5px 5px 5px gray; } </style>解析: tex原创 2017-04-28 09:57:43 · 300 阅读 · 0 评论 -
css3 - 盒相关样式
1.inline-block支持IE8以上、Safari、Chrome、Opera、Firefox主流浏览器html:<div> <div class="inlineblock">inline-block类型</div> <div class="inlineblock">inline-block类型</div></div><div> <div class="inline"原创 2017-04-28 13:04:20 · 344 阅读 · 0 评论 -
css3 - border-radius
兼容性: 浏览器 Firefox Safari Opera Chrome border-radius属性 -moz-border-radius -webkit-border-radius border-radius border-radius/-webkit-border-radius html:<div>示例文字示例文字</div>css:div {原创 2017-04-28 13:32:28 · 288 阅读 · 0 评论 -
css3 - 变形处理 transform
在css3中可以利用transform功能来实现文字图像的旋转、缩放、倾斜、移动这四种类型的变形处理 兼容性: 浏览器 Safari Chrome 8+ Firefox 4+ Opera 10+ 各个浏览器写法 -webkit-transform -webkit-transform -moz-transform -o-transform1.旋转 rotate原创 2017-04-28 14:38:56 · 710 阅读 · 0 评论 -
css3 - 动画功能 — Animations功能实现网页的淡入淡出
在线展示打开页面,网页会慢慢淡入;html:<body> 示例文字示例文字示例文字示例文字示例文字</body>css:<style> @-webkit-keyframes fadein { 0% { opacity: 0; background-color: #fff; } 100%原创 2017-04-29 13:57:26 · 3604 阅读 · 0 评论 -
css3 - 盒布局
兼容性:Safari、Chrome、Firefox等主流浏览器支持。使用盒布局来解决左右两栏或者多栏中底部不能对齐的问题。 在css3中,通过使用box属性来使用盒布局,使左右两栏或多栏中的div元素的底部对齐; 在Firefox中使用“-moz-box”;在Chrome、Safari中使用“-webkit-box”属性;例如: html:<div id="container"> <d原创 2017-04-29 23:09:00 · 257 阅读 · 0 评论 -
改变文字选中时背景颜色
在线演示html:<body> <h1>Woman</h1> <p>Every woman is ... You are worth it! </p></body>css:<style> body { background:url(images/09.png) no-repeat 50% 0; margin: 10% 20%;原创 2017-05-10 21:26:03 · 1857 阅读 · 0 评论 -
css3 - 弹性盒布局 - 1.使用自适应窗口的弹性盒布局
在线演示使用自适应窗口的弹性盒布局如果我们想让这三个div的总宽度等于浏览器窗口的宽度,而且能够随着窗口宽度的改变而改变。那么我们使用盒布局,并且只要使用一个box-flex属性,使盒布局变成弹性盒布局就可以了。兼容:在Firefox中使用“-moz-box-flex”的形式;在Safari、Chrome中使用“-webkit-box-flex”的形式;html:<body> <div id="原创 2017-05-03 10:20:21 · 6072 阅读 · 1 评论 -
css3 - 弹性盒布局 - 2.改变元素的显示顺序
在线演示改变元素的显示顺序使用弹性盒布局时,可以通过box-ordinal-group属性来改变各元素的显示顺序。可以在每个元素 样式中添加box-ordinal-group属性,该属性使用一个表示序号的整数属性值,浏览器显示的时候根据该序号从小到大来依次排列显示这些元素。兼容:在Firefox中使用“-moz-box-ordinal-group”的形式;在Safari、Chrome中使用“-web原创 2017-05-03 10:39:29 · 3581 阅读 · 0 评论 -
页面背景固定
在线演示html:<body> <h1>Woman</h1> <p>Every woman is ... You are worth it! </p></body>css:body { background: url(images/08.jpg) no-repeat 50% 0 #B94547;/*#B94547给背景添加颜色*/ margin: 10% 20%;原创 2017-05-10 20:06:45 · 286 阅读 · 0 评论 -
css3 - 在浏览器窗口正中央显示图像
实现盒子垂直居中(用绝对定位来实现盒子垂直居中)遮罩下盒子垂直居中(用固定定位实现盒子垂直居中)使用盒布局的时候,可以使用box-pack属性及box-align属性来指定元素中文字、图像及子元素水平方向或垂直方向的对齐方式。使用Firefox浏览器中,需要使用-moz-box-pack、-moz-box-align的形式;在Safari、Chrom浏览器中,需要使用-webkit-box-pack原创 2017-05-04 10:10:16 · 1519 阅读 · 0 评论 -
css3 - 让文字位于div元素正中央
使用盒布局的时候,可以使用box-pack属性及box-align属性来指定元素中文字、图像及子元素水平方向或垂直方向的对齐方式。使用Firefox浏览器中,需要使用-moz-box-pack、-moz-box-align的形式;在Safari、Chrom浏览器中,需要使用-webkit-box-pack、-webkit-box-align的形式。在使用CSS 1.0或CSS 2.0的时候,在div原创 2017-05-04 09:34:08 · 20766 阅读 · 0 评论 -
css3 - 动画功能 — Transitions功能
在css3中,如果使用动画功能,可以使页面上的文字或画像具有动画效果,可以使背景色从一种颜色平滑过度到另一种颜色。 css3中的动画功能分为Transition功能与Animations功能,这两种功能都可以通过改变css中的属性值来产生动画效果。 目前为止,Transitions功能支持从一个属性值平滑过度到另一个属性值,Animations功能支持通过关键帧的指定来在页面上产生更复杂的动画效原创 2017-04-29 10:20:53 · 529 阅读 · 0 评论 -
css3 - 动画功能 — Animations功能
在css3中除了可以使用Transitions功能实现动画效果之外,还可以使用Animations功能实现更为复杂的动画效果,Safari 4 以上浏览器与Chrome 2 以上浏览器对该功能提供支持。Animations功能与Transitions功能相同,都是通过改变元素的属性值来实现动画效果。它们的区别在于,使用Transitions功能时只能通过制定属性的开始值与结束值,然后在这两个属性之间原创 2017-04-29 13:29:58 · 541 阅读 · 0 评论 -
css3 - 按钮元素动画效果
在线演示当鼠标指针滑过按钮时,按钮左侧内边距减小,使文字从右侧移动到左侧,并将背景颜色更改。同时,也为鼠标指针滑过状态下的i图标设置了新的属性状态,使得图标向右移动,停止在与右侧的距离等于整体宽度的5%的位置。如图: 引入图标文件:<link rel="stylesheet" href="lib/font-awesome/css/font-awesome.min.css">html:<button>原创 2017-05-08 08:05:52 · 532 阅读 · 0 评论 -
css3 - 图标元素动画效果2 - 动画无限循环、循环一定次数、反向动画
在线演示鼠标悬停,图标会一直不停旋转。 如果实现图标一直不停旋转,则需要使用animation动画。先制作动画的各个关键帧,然后在图标中运用这一动画。图标文件引入:<link rel="stylesheet" href="lib/font-awesome/css/font-awesome.min.css">html:<div class="close"><i class="fa fa-close原创 2017-05-08 08:41:18 · 28197 阅读 · 0 评论