- 前端工程师之css3弹性盒布局 11-25
- css3基础学习笔记 11-25
- CSS3 animation-delay 属性 11-25
- CSS3 punctuation-trim 属性 11-25
- CSS3 2D 转换 11-25
- 前端技术以及UI技术学习一览图总括心德 11-25
- CSS3 border-image-slice 属性 11-25
- CSS3实现扇子效果 11-25
- CSS3 transform 属性 11-25
- CSS3实现精美横向滚动菜单效果 11-25
前端工程师之css3弹性盒布局
发布者: superzhang | 发布时间:2017-11-25首先,我们来对弹性盒中的称呼做一些了解
如图,弹性盒分为两个轴,一个是主轴,一个是交叉轴,主轴方向可以改变(左右改上下),主轴方向改变后,交叉轴方向也会随之改变
然后,我们来看下浏览器的大概支持情况
从图上可以看出,ie对于弹性盒的支持可以说是呵呵了,其他的浏览器还可以,迫于ie的坑,在pc上感觉就可以放弃这种布局方案了,但是在移动端,从安卓2.1就开始支持(需要兼容式写法),所以在移动端,还是可以使用的,不过该加的前缀还是不能忘记的。
分享之前我先说下我的前端群:524262608,每晚8点都会直播分享案例知识和前端经验,不定期会有干货分享,欢迎走在前端道路上的小伙伴。
下边我们来看看弹性盒的一
css3基础学习笔记
发布者: superzhang | 发布时间:2017-11-25选择器基础知识:
div > p 选择父元素为div的所有子元素
div + p 选择紧接在div后的所有子元素
[target] 选择带有target属性的元素 a[target] {...}
[target=_blank] 选择target为_blank的所有子元素
[title~=flower] 选择title属性包含单词flower的元素
[lang|=en]选择lang属性以en开头的所有元素
[p:first-letter] 选择p元素开头的所有首字母
[p:first-line] 选择每个p元素的首行
[p:first-child] 选择属于其父元素的首个子元素的每个 <p> 元素 就是相对比某个父元素下的所有p元素的第一个p 必须声明 <!DOCTYPE>
[p:before] 在每个p元素之前插入内容 p:before{content:"台词:";} ::css3写法 : css2写法
[p:after] 在每个p元素后插入内容
[p:lang(it)] 选择带有以 "it" 开头的 lang 属性值的每个 <p> 元素
[p~ul] 选择前面有<p>元素的每个&l
CSS3 animation-delay 属性
发布者: superzhang | 发布时间:2017-11-25实例
等待两秒,然后开始动画:
animation-delay:2s;-webkit-animation-delay:2s; /* Safari 和 Chrome */
在此页底部有更多的例子。
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
属性animation-delay43.04.0 -webkit-10.016.05.0 -moz-9.04.0 -webkit-30.015.0 -webkit-12.0 -o-CSS3 punctuation-trim 属性
发布者: superzhang | 发布时间:2017-11-25实例
在p元素在每一行的开头放置开头标点符号:
p
{
punctuation-trim:start;
}
浏览器支持
CSS3 2D 转换
发布者: superzhang | 发布时间:2017-11-25CSS3 转换
通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。
它如何工作?转换是使元素改变形状、尺寸和位置的一种效果。
您可以使用 2D 或 3D 转换来转换您的元素。
浏览器支持Chrome 和 Safari 需要前缀 -webkit-。Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。
注释:Internet Explorer 9 需要前缀 -ms-。
2D 转换在本章中,您将学到如下 2D 转换方法:
translate()
rotate()
scale()
skew()
matrix()
您将在下一章学习 3D 转换。
实例
div亲自试一试
translate() 方法
通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标)
前端技术以及UI技术学习一览图总括心德
发布者: superzhang | 发布时间:2017-11-25众所周知,罗马不是一天建成的,前端大咖自然也不是一个路径就能搞定的。因此,作为基础咖的本路径,将帮助你实现的是从简单的“会做网页”,到略显牛x的“做好动态网页”。简单来说,就是从一个只会HTML+CSS基础,写静态页面的前端,到熟练使用HTML5、CSS3、JavaScript实现特效丰富的交互网页的前端。是不是感觉自己离前端大咖又迈进了一大步,想想还有点小激动呢!
我说,我是谁,我在哪,我将经历什么
作为已经跨入前端大门的攻城狮来说,有些知识点你需要不断重复记忆。
比如,什么是静态网页?相对动态网页而言,没有后台数据库、不含程序和不可交互的网页被称之为静态网页;
比如,什么是动态网页?显示的内容可以随着时间、环境或者数据库操作的结果而发生改变的网页被称之为动态网页。
温馨提示:今天是小编老婆生日,心情好,决定大赏,给大家伙发个红包庆祝下,祝老婆永远赛天仙-人人可领,领完就能用。祝大家领取的红包金额大大大!#吱口令#长按复制此消息,打开支付宝就能领取
CSS3 border-image-slice 属性
发布者: superzhang | 发布时间:2017-11-25实例
指定图像的边界向内偏移:
div
{
border-image-source: url(border.png);
border-image-slice: 50% 50%;
}
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
属性border-image-slice15.011.015.06.015.0属性定义及使用说明
border-image -slice属性指定图像的边界向内偏移。
默认值:100%继承:no版本:CSS3JavaScript 语法:object.sCSS3实现扇子效果
发布者: superzhang | 发布时间:2017-11-25CSS3实现扇子效果,在网上看到一些大神写的效果都特别厉害,所以今天就边学边写,实现一把扇子展开折叠的动画过渡效果:
展开后的效果
实现代码展示
CSS3 transform 属性
发布者: superzhang | 发布时间:2017-11-25实例
旋转 div 元素:
div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
}
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
属性transform (2D)36.04.0 -webkit-10.09.0 -ms-16.03.5 -moz-9.03.2 -webkit-23.015.0 -webkit-10.5 -o-transform (3D)36.012.0 -webkit-12.010.016.010.0 -moz-9.04.0 -webkit-CSS3实现精美横向滚动菜单效果
发布者: superzhang | 发布时间:2017-11-25今天就给大家分享一个用CSS3技术来实现的横向滚动菜单效果,需要的朋友可以参考下:
具体实现效果图如下:
鼠标划过导航按钮时候,右侧内容会缓慢滑出显示!
实现代码如下:
html:
主要CSS:
该效果主要涉及到CSS3的动画属性,还有元素的隐藏 (overflow / visibility); 大家可以根据自己的需求来美
