WD1X.COM - 问答一下,轻松解决,电脑应用解决专家
主板显卡CPU内存显示器
硬盘维修显卡维修显示器维修
注册表系统命令DOS命令Win8
存储光存储鼠标键盘
内存维修打印机维修
WinXPWin7Win11Linux
硬件综合机箱电源散热器手机数码
主板维修CPU维修键盘鼠标维修
Word教程Excel教程PowerPointWPS
网络工具系统工具图像工具
数据库javascript服务器
PHP教程CSS教程XML教程

CSS 3 样式

更新时间:2021-03-01 09:42 作者:一个半路出家的人点击:
一、transform
 
css3引入了一些可以对网页元素进行变换的属性,比如旋转,缩放,移动,或者沿着水平或者垂直方向扭曲(斜切变换)等等。这些的基础都是transform属性
 
transform属性有一项奇怪的特性,就是它们对于其周围的元素不会产生影响。换句话说,如果将一个元素旋转45度,它实际上是重叠在元素的上方,下方或者旁边。而不会移动其周围的内容。
 
旋转:transform:rotate(-45deg);
 
缩放:transform:scale(.5);scaleX(2);scaleY(3)。如果给了负值,能够达到翻转的效果:scaleX(-1)
 
移动:transform:translate(1px,2px).使用其他单位:em,%也是可以的。
 
倾斜:transform:skew(45deg,0);
 
当然,以上多个tranform的属性可以结合使用;
 
transform-origin:一般来说,当对一个元素使用transform时,web浏览器就会以元素的中心点作为变黄点。该属性可以指定变换点,可以提供关键字,以pixel为单位的绝对值,以及em,%等等。
 
二、transition
 
transition可以实现动态效果,实际上是一定时间之内,一组css属性变换到另一组属性的动画展示过程。
 
为了使transition生效,需要做这么几件事:
 
2)两个样式:一个是最初的样式,一个是最终的样式,transition可以实现这两种演示见的转换过程。
 
2)transition属性:
 
transition使用4个属性控制:
 
要以动画展示哪些属性(transition-property):可以使用all关键字
 
动画过程有多久(transition--duration),
 
控制动画速度变化(transition-timing-function:linear,ease,ease-in,ease-out,ease-in-out,贝塞尔曲线等),
 
动画是否延迟执行(transition-delay)等
 
可以使用快捷方法来定义上述属性:
 
 
 
.navButton{
   color:black;
  background-color:#fff;
  transition:color,background-color;
  transition-delay:1s, .5s;
}
 
.navButton:hover{
   color:red;
   background-color:#ccc;  
}
 
 
一般来说,将transition属性应用到最初的样式里,而不是放在结束的样式里,即定义动画开始之前的元素外观的样式。只需要给元素设置一次transition,浏览器就会负责以动画展示从一个样式到另一个样式,再返回最初样式的变化过程。
 
不过,在使用css下拉菜单的时候,有一个技巧,为了防止鼠标离开菜单的时候,菜单很快消失,可以利用transition-delay让元素很快显示,但是慢慢消失,做法是,在初始样式中添加如下代码:
 
transition-dealy:.5s
在:hover中不要添加延迟:
 
transition-delay:0
3)触发器:常用的触发器是几个伪类,:active,:target,:focus,也可以是前后两个类的改变。
 
 
 
三、animation
 
transition只能从一组css属性变成另一组css属性。animation则可以在多组属性之间变换。
 
transition必须使用触发器触发,animation可以使用触发器,也可以在页面加载完成的时候自动触发。
 
创建动画有两个步骤:
 
1.定义动画:主要指定义关键帧
 
 
 
 
 
@keyframes fadeIn{
   from{
      opacity:0;
  },
  to{
     opacity:1;   
 }
}
 
 
2.将动画应用到元素上
 
可以使用一下css属性定义动画:
 
 
 
.nav-button{
    animation-name:fadeIn;
    animation-duration:1s;
    animation-timing-function:ease-out,
   animation-delay:.5s;
   animation-iteration-count:infinite;  
animation-direction:alternate
}
animation-name:和当初定义的动画名称相对应;
 
 animation-duration:动画执行一次持续的时长;
animation-timing-function:动画速率变化函数;
animation-delay:动画延迟执行的时间长度;
animation-iteration-count:动画执行的次数,可以是数字,或者关键字:infinate(无限运行);
animation-direction:alternate; alternate(奇数次超前运行,偶数次后退运行).如希望动画从黄色到蓝色,并且再重复一次,使用alternate关键字就能够防止从蓝色突变为黄色
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
你可能感兴趣的内容