- CSS3 box-orient 属性 11-25
- CSS3 background-clip 属性 11-25
- html5开发工具有哪些?该如何学习 11-25
- CSS3 font-stretch 属性 11-25
- css3—转换transform 11-25
- css3学习 理论之动画 11-25
- CSS3 transition-delay 属性 11-25
- CSS3中的border-image属性 11-25
- CSS3 border-image-outset 属 11-25
- CSS3 实现立方体旋转动画 11-25
CSS3 box-orient 属性
发布者: superzhang | 发布时间:2017-11-25实例
指定div元素的子元素横向排列:
div
{
width:350px;
height:100px;
border:1px solid black;
/* Firefox */
display:-moz-box;
-moz-box-orient:horizontal;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-orient:horizontal;
/* W3C */
display:box;
box-orient:horizontal;
}
浏览器支持
CSS3 background-clip 属性
发布者: superzhang | 发布时间:2017-11-25实例
指定绘图区的背景:
div
{
background-color:yellow;
background-clip:content-box;
}
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
属性border-image16.04.0 -webkit-11.015.03.5 -moz-6.03.1 -webkit-15.011.0 -o-标签定义及使用说明
background
html5开发工具有哪些?该如何学习
发布者: superzhang | 发布时间:2017-11-25互联网的发展总是伴随着新技术的产生,吸引着一大批的人为之学习。目前,html5这门技术也是备受大家关注,想要学习html5这门技术的人也是越来越多,主要原因还是在于移动端特别的流行,作为新人想要学习html5或者是哪些代码基础特别薄弱的该如何学习html5这门技术呢?
任何的学习都不是单一的,学习html5这门技术需要配合CSS3、JavaScript。前端的热门催生出大量的前端热门资料,前端的基础无外乎HTML、CSS、js三类,HTML控制内容、CSS控制表现、js控制动效。
在学习的开始阶段,可以先过一遍HTML,能够知道在什么情况下用什么标签就行,不要死记硬背任何东西,在今后接触的多了,自认而然也就熟悉了。接下来就是CSS,重点关注选择器语法、选择器优先级计算,要写出高效简洁的CSS,其实也就是看选择器写得好不好而已。
前端的学习主要靠的就是练习,学习是没有捷径的,有的只是方法,在学习html5开发的过程中尽量少走弯路,每个人都有自己独特的学习方法,熟能生巧,学ht
CSS3 font-stretch 属性
发布者: superzhang | 发布时间:2017-11-25实例
让所有的div元素的文本更宽:
div
{
font-stretch: expanded;
}
浏览器支持
css3—转换transform
发布者: superzhang | 发布时间:2017-11-25使用转换可以对元素进行移动、缩放、旋转、拉伸等,说到底也就是让某个元素改变形状、大小和位置。
transform主要包括:移动translate、旋转rotate、扭曲(倾斜)skew、缩放scale以及矩阵变形matrix等。
语法:
transform: none | translate( ) ? rotate( ) ? skew( ) ? scale( ) ? matrix( )
none表示不变换,后面变换函数可以连同使用,空格隔开。
1、移动translate(x,y)
包括translateX、translateY,表示向x、y轴移动。
2、旋转rotate(度数)
通过一个度数来对元素进行旋转,正数是顺时针,负数是逆时针。
一、transform
语法:none|<transform-function>[<transform-function>]* 初始值是none。
transform-function函数取值:
matrix():定义矩阵变换。
translate():移动元素对象。
scale():缩放元素对象。
rotate():旋转元素对象。
skew():倾斜元素对象。
例如(兼容浏览器):
1.rotate()函数:transform: rotate(-90deg);-o-transform: rotate(-90deg);-moz-transform: rotate(-90deg);-webkit-transform: rotate(-90deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
2.s
CSS3 transition-delay 属性
发布者: superzhang | 发布时间:2017-11-25实例
等待2秒前切换效果开始:
transition-delay: 2s;
-webkit-transition-delay: 2s; /* Safari */
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
属性transition-delay26.04.0 -webkit-10.016.04.0 -moz-6.13.1 -webkit-12.110.5 -o-属性定义及使用说明
transition-del
CSS3中的border-image属性
发布者: superzhang | 发布时间:2017-11-25border-image是CSS3的一个属性,今天就来分析下该属性的一些特征,方便大家以后在使用上遇到难题!
border-image是将简单的工作复杂化,当学习完该属性以后,发现该属性的运用能够大大节省编码时间和效率,总结一下,大致适用于以下两个场景:
元素边框不规则的情况。这时候,就需要用设计图作为边框背景,border-image与background-image相比,好处是更具灵活性,可以用代码控制边框背景的拉伸和重复,因而能够创造出更多样的效果
按钮宽高不确定的情况。用border-image来制作按钮,可以用同一张背景图,制造出各种宽高的按钮。
border-image属性分析
边框背景图片。格式为:url(“…”)。
border-image-slice
图片边框向内偏移的距离。格式:border-image-slice:top right bottom left。分别指切割背景图片的四条线距离上右下左的距离。 如下图所示:
CSS3 border-image-outset 属性
发布者: superzhang | 发布时间:2017-11-25实例
设置border-img-outset属性:
div
{
border-image-source: url(border.png);
border-image-outset: 30 30;
}
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
属性border-image-outset15.011.015.06.015.0属性定义及使用说明
border-image-outset用于指定在边框外部绘制 border-image-area 的量
默认值:0继承:no版CSS3 实现立方体旋转动画
发布者: superzhang | 发布时间:2017-11-25感谢 头条好友 @一锅杂货铺 在我上期文章的评论,并要求实现一个CSS3实现立方体动画效果。效果一般还请见谅,我会简单写下如何实现的,一起学习学习。
本期我简单实现了一个效果,可以访问我的网站http://www.jinyingfei.com/web/login/index查看效果哦
效果图如下: 简陋了点请见谅
可以进行点击按钮实现左右旋转、上下旋转。更多效果,再说喽。
下面看如何实现的:
CSS代码如下:
*{/** 项目中不能使用*的 */
margin:0;
padding:0;
}
html,body{
width: 100%;
