1.translation
1.什么是过渡? 概念:就是指元素从一个状态变为另一个状态的过程 2.如何实现过渡? 通过transition属性来指定,语法格式: day8transition:过渡属性 持续时间 运动曲线 延迟时间; 3.对于过渡而言,我们可以使用transition来简写,也可以把这个属性分开 - day8transition-property:指定用于过渡的属性名称,如width height day7background - day8transition-duration:过渡持续时间,单位为秒(s) - day8transition-timing-function:过渡的运行曲线,默认是ease - day8transition-delay:延迟执行时间,单位为秒 4.使用 需求:当鼠标移到div上时,div变为圆形 5.注意:添加过渡效果的代码需要放在你想要进行过渡的元素上,简单的说,就是希望那个元素有过渡效果就把代码加到那个元素上面去 6.如果希望元素的 多个属性都具有过渡效果,那我们可以把过渡属性的值设置为all 7.运动曲线有哪些? -ease:默认值,逐渐慢下来 -linear;匀速运动 =ease-in:加速 -ease-out:减速 -ease-in-out:先加速再减速
<style>
.box {
position:absolute;
top:20px;
left:20px;
width: 100px;
height: 100px;
background-color:deepskyblue;
/*过渡*/
/*day8transition-property: border-radius;*/
/*day8transition-duration:2s;*/
/*day8transition-timing-function: ease;*/
/*day8transition-delay:2s;*/
transition: all 2s ease;
}
.box:hover {
left:400px;
cursor:pointer;
/*过渡*/
/*day8transition-property: border*/
border-radius: 50%;
background:deeppink;
}
#container:hover .box {
}
</style>
2.进度条
<style>
.box {
width: 150px;
height: 10px;
border: 1px solid #cccccc;
border-radius: 5px;
}
.bar {/*进度条里面,开始状态*/
width: 10%;
height: 100%;
background: red;
border-radius: 5px;
transition-duration:2s;
transition-timing-function: ease-in;
}
.box:hover .bar {/*结束状态*/
width:100%;
height:100%;
background:greenyellow;
}
</style>
</head>
<body>
<div class="box">
<div class="bar"></div>
</div>
3.分布按钮
<style>
ul li {
padding: 0;
magrin: 0;
}
li {
list-style: none;
float: left;
width: 30px;
height: 30px;
border: 1px solid mediumslateblue;
magrin-left: 5px;
border-radius: 50%;
/*水平居中*/
text-align: center;
/*垂直居中,指定为高的值*/
line-height:30px;
}
li:hover {
cursor: pointer;
transform: scale(1.5,1.5);
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
4.移动
在CSS3中提供了元素转换的操作功能,通过使用transform来实现,可以实现元素的位移、旋转和缩放 - 位移:transform: translate() - 旋转:transform: rotate() - 缩放:transform: scale() 1.位移:使用translate()来进行指定,她需要通过x坐标和y坐标来去呃呃顶移动的位置 语法格式: transform: translate(x,y);//在x坐标和y坐标上移动 transform: translateX(n);//只在x坐标上移动 transform: translateY(n);//只在y坐标上移动 注意: 1.当使用translate(x,y)时,x和y都可以指定正值或负值 如果x的值是正值,则往右移动,负值则往左移动 如果y的值是正值,则往下移动,负值则往上移动 1.x和y轴的值要带单位,一般使用像素(xp)
<style>
div {
width: 100px;
height: 100px;
border: 1px solid black;
}
div#div2 {/*交集选择器*/
transform:translateX(50px);
transform:translateY(50px);
background-color: blueviolet;
}
</style>
5.缩放
缩放使用transfoem: scale()来实现 语法格式: transform:scale(x,y) 书写方式: -transform:scale(1,1):宽和高都放大一倍,电工党羽没有放大 -transform:scale(2,2):宽和高否放大了2倍 - transform:scale(2):只写一个参数,第二个参数和第一个参数一样,相当于scale(2,2) - transform:scale(0.5,0.5):缩小 x和y的取值说明: 如果值为1表示不放大也不缩小 如果值大于1表示放大 如果值小于1表示缩小
<style>
div {
position: absolute;
top: 50px;
left: 50px;
width: 1000px;
height: 100px;
}
</style>
6. 动画
动画,也是CSS中提供的一个功能,它和过渡最大的区别是: 动画可以实现更多的变化,更多控制,连续自动播放效果 要想使用动画,浏览器必须是高版本的 首先使用动画之前,需要通过@keyframe 来定义动画,定义好动画后,通过animation 定义动画时,需要告诉动画将如何完成 1.开始状态 from ,也可以使用 % 百分比 2.结束状态 to 注意:要想元素具有动画效果,除了要定义好动画并运用好外,还需要定位 animation是动画的简写方式,它里面有很多属性 animation: 动画名称 持续时间 动画曲线 延迟时间 动画执行总人数 动画的状态 动画的名称--animation-name; 持续时间--animation-duration; 动画曲线--animation-timing-function; 延迟时间--animation-delay; 是否可以逆向播放--animation-direction; 默认是"normal",动画执行到最后会直接加到开始处 alternate 动画执行人数--animation-iteration-count; 动画的状态--animation-fill-mode; 有两个值可以指定:保持forwards,回到起始backwards 动画是否正在运行或暂--animation-play-state; 有两个值: -running:运行状态,默认值 -paused:暂停状态
<style>
.box {/*必须定位*/
position: absolute;
left:10px;
top: 100px;
width: 100px;
height: 100px;
background-color: #a70ff3;
animation-name: move;/*!!!*/
animation-duration: 2s;/*!!!*/
animation-timing-function: ease;
animation-delay: 2s;
animation-iteration-count: 5;/*!!!*/
animation-fill-mode: forwards;
animation-direction: alternate;
}
.box:hover {
cursor: pointer;
animation-play-state: ;
}
@keyframes move {
/*from {
left:10px;
}
to {
left:200px;
}*/
0% {
left: 10px;
}
100% {
left: 200px;
}
}
</style>
7.3D
1)rotateX
<style>
body {
perspective: 300px;
}
img {
display: block;
margin: 100px auto;
transition: all 1s;
}
img:hover {
transform:rotateX(45deg);
transform:rotateY(45deg);
transform:rotateZ(45deg);
}
</style>
2 )显示效果
<style>
body {
perspective: 400px;
}
.box {
position: relative;
width: 300px;
height: 300px;
margin: 100px auto;
transition: all .4s;
/* 让背面的紫色盒子保留立体空间 给父级添加的 */
transform-style: preserve-3d;
}
.box:hover {
transform: rotateY(180deg);
}
.front,.back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
font-size: 30px;
color: #fff;
text-align: center;
line-height: 300px;
}
.front {
background-color: blue;
z-index: 1;
}
.back {
background-color: purple;
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="box">
<div class="front">前端课程</div>
<div class="back">CSS3</div>
</div>
3)透视效果
<style>
body {
perspective: 200px;
}
.box {
position: absolute;
left: 300px;
top: 50px;
width: 100px;
height: 100px;
background-color: #009dfd;
transform: translateZ(100px);
transform: rotate3d(0, 1, 1, 60deg);
}
</style>
</head>
<body>
<div class="box"></div>