- css3动画按钮效果 11-25
- CSS3 用户界面 11-25
- css3定制你的BBQ 11-25
- CSS3实现鼠标经过翻转 11-25
- CSS3 3D翻转效果 11-25
- CSS3 box-lines 属性 11-25
- Python批量导入图片生成能治疗颈椎病的HTML5 11-25
- css3背景渐变色代码 11-25
- CSS3 字体 11-25
- css3—动画animation 11-25
CSS3 用户界面
发布者: superzhang | 发布时间:2017-11-25CSS3 用户界面
在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸,框尺寸和外边框。
您将了解以下的用户界面属性:
resize
box-sizing
outline-offset
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
属性resize4.0不兼容5.04.0 -moz-4.015.0box-sizing10.04.0 -webkit-8.029.02.0 -moz-5.13.1 -webkit-9.5outline-offset4.0不兼容5.04.0 -moz-4.09.5CSS3 调整尺寸(Resizing)
CSS3中,resize属性指定一个元素是否应该由用户去调整大小。
这个 div 元素由用户调整大小。 (在 Firefox 4+, Chrome,
css3定制你的BBQ
发布者: superzhang | 发布时间:2017-11-25原文地址:http://www.jianshu.com/p/4b6e22cb0343
不用flash,不用JS,仅仅CSS3就可以绘制一副精美的图,实现并不复杂,代码也不会很多,而且效果很赞。
BBQ
看到这幅图,该如何着手呢?了解border-radius、box-shadow的具体使用方法后,你会发现原来竟如此简单。
推荐下我的前端群:524262608,不管你是小白还是大牛,小编我都挺欢迎,不定期分享干货,包括我自己整理的一份2017最新的前端资料和零基础入门教程,欢迎初学和进阶中的小伙伴。
border-radius的语法
border-radius:10px 20px 30px 40px
CSS3 3D翻转效果
发布者: superzhang | 发布时间:2017-11-25互联网给我们带来方便的同时,也时常让我们感到困惑。随便搜搜就出一大堆结果,然而总是有大量的重复和错误。小妖发出的内容,都是自己实测过的,有问题请留言。
今天我们说一下如何用 css3 实现 3D 翻转,效果如下:
其实就几行代码
HTML部分:
flip 是总的容器,position: relative;
front 是正面,back 是背面,只需要把 flip 翻转就可以了
CSS部分:
浏览器支持
生成的HTML文件源码(部分):
运行效果:
广东IT优就业
css3背景渐变色代码从上到下
#grad {
background: -webkit-linear-gradient(red, blue);
background: -o-linear-gradient(red, blue);
background: -moz-linear-gradient(red, blue);
background: linear-gradient(red, blue);
}
从左到右
#grad {
background: -webkit-linear-gradient(left, red , blue);
background: -o-linear-gradient(right, red, blue);
background: -moz-linear-gradient(righ
CSS3 字体
发布者: superzhang | 发布时间:2017-11-25CSS3 @font-face 规则
以前CSS3的版本,网页设计师不得不使用用户计算机上已经安装的字体。
使用CSS3,网页设计师可以使用他/她喜欢的任何字体。
当你发现您要使用的字体文件时,只需简单的将字体文件包含在网站中,它会自动下载给需要的用户。
您所选择的字体在新的CSS3版本有关于@font-face规则描述。
您"自己的"的字体是在 CSS3 @font-face 规则中定义的。
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
属性@font-face4.09.03.53.210.0Internet Explorer 9+, Firefox, Chrome, Safar
css3—动画animation
发布者: superzhang | 发布时间:2017-11-25animation的使用要结合@keyframes来实现。
语法:
animation-iteration-count:
默认值是1,参数有:infinite(无线循环)或者数字(循环次数)。
animation-direction:
默认值normal(正常方向),alternate(正常与方向交替)
animation-play-state:
默认值是running(运动着),paused(暂停)
keyframes语法规则:
以@keyframes开头,后面加动画名字,同时大括号里面由百分比构成,或者使用from{}、to{},from指的是0
