CSS3几个速记标签2

@font-face:CSS3允许使用自己的字体,用户会自动下载     语法:@font-face{font-family:---;src:url(---)}     如果要使用粗体,必须新添加另一个包含粗体文本的@font-face规则

CSS2D转换

translate()方法:根据左和上给定参数     语法:transform:translate(--px,--px);

rotate()方法:旋转,允许负值     语法:transform:rotate(--deg);

scale()方法:改变元素大小     语法:transform:scale(2,4)     宽为原来的2倍  高为原来的4倍

skew方法:根据x轴和y轴给定角度     语法:transform:skew(--deg,--deg);

matrix()方法:有六个参数,包含旋转,缩放,移动(平移)和倾斜功能     transform:matrix(0.866,0.5,-0.5,0.866,0,0);

CSS3D转换

ratateX()与rotateY():以中线为轴翻转     语法:transform:rotateX(--deg);

以rotate为例,translate,scale,skew,matrix同样适用

时间: 2024-10-13 14:27:23

CSS3几个速记标签2的相关文章

jQuery和CSS3炫酷浮动标签特效

这是一款炫酷的jQuery和CSS3表单浮动标签特效.浮动标签是指输入框中的文字或占位文本在输入框聚焦的时候,以动画的方式浮动到指定的地方.浮动标签特效是一种新颖时尚的动画特效.不仅效果很酷,而且能以明确的方式提示用户该输入框应该填写上面内容,用户体验非常不错. 这个浮动标签特效中共有4种不同的动画效果.分别是Fieldset样式的浮动标签,使用font-size来动画的浮动标签,使用CSS3 transforms和jquery easing来动画的浮动标签和透明度动画浮动标签. 在线演示:ht

CSS3的几个标签速记3

transition:CSS3过渡     css3里很好的一个标签,可以非常方便的完成需要很多JS才能完成的动态效果 例语法:transition:width 2S,height 2S,transform 2S; CSS3动画 @keyframes:使一种样式逐渐变为另一种样式的过程 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 div 6 { 7 width:100px; 8 height:100px;

CSS3之尖角标签

如图所示,Tag标签的制作通常使用背景图片,现在用CSS3代码就能实现尖角效果(需浏览器支持CSS3属性). 运用CSS3样式实现尖角标签,只需要写简单的HTML结构和CSS样式. <p> <a>Tag1</a> <a>Tag2</a> <a>Tag3</a> <a>Tag4</a> </p> css主要利用伪元素来实现尖角 a{ dispaly:inline-block; positi

CSS3给页面打标签

我们经常会在页面的左上角或者右上角看到类似如图所示的标签,比如页面的链接(最常使用)等,下面我们就实现一个简单的标签 实现步骤是先做一个水平长条,使用CSS3的transform来实现旋转,如果是在左上角的话就逆时针旋转45度,右上角顺时针旋转45度. 代码: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <meta http-equiv="Content-Type

CSS3新增特性\HTML标签类型

RGBA:透明度 作用: 设置透明度(R G B A)   opacity:不透明度     文字也会被设置不透明度   圆角 border-radius:圆角{左上角,右上角...} 块阴影 box-shadow:{水平阴影宽度(负号向下) 垂直阴影宽度(负号向右) 透明度 颜色} text-shadow:{水平阴影宽度(负号向下) 垂直阴影宽度(负号向右) 透明度 颜色} HTML标签类型分为3大类 块级标签 独占一行 能随时设置宽度和高度(div,p,h,ul,li) 行内标签(内联) 多

使用CSS3中的input标签与lable标签组合实现banner图的切换

在做网页时,我们经常可以碰到banner图的切换.对于那些JS薄弱的同学来说,这就很尴尬了.今天,我来告诉大家如何使用CSS做出banner图切换的效果. 这里,用到了lable标签与input的组合,首先先来了解下lable标签 <label> 标签为 input 元素定义标签(label). label 元素不会向用户呈现任何特殊的样式.不过,它为鼠标用户改善了可用性,因为如果用户点击 label 元素内的文本,则会切换到控件本身. <label> 标签的 for 属性应该等于

CSS3:pointer-events | a标签禁用

用纯css就能实现取消事件响应的方法,pointer-events,使用起来更加简单,它可以: pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit 1 阻止用户的点击动作产生任何效果 2 阻止缺省鼠标指针的显示 3 阻止CSS里的hover和active状态的变化触发事件 4 阻止JavaScri

纯CSS3实现动画不规则的tab标签切换代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

12种超酷HTML5 SVG和CSS3浮动标签效果

这是一组效果非常炫酷的SVG和CSS3表单浮动标签特效.这组浮动标签特效共12种效果,这些浮动标签效果部分在元素的伪元素上使用CSS transitions和CSS animations完成,一部分则使用SVG来制作变形动画. 在前面已经发表了一篇关于SVG浮动标签的文章:14种CSS3炫酷表单input输入框美化效果.这篇文章中的浮动标签效果是它的一些补充,在原来14种效果的基础上有增加了12种更加炫酷的效果. 这些效果在所有最新版的现代浏览器中都测试通过,但是可能某些旧的浏览器会不支持这些效