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>
566
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
