HTML5之特效
程序员文章站
2022-06-24 15:22:03
2D转换 在二维的平面上做一些变化，使用transform属性 1. 2D转换之移动（translate） 案例： 2. 2D转换之旋转（rotate） 默认情况下按中心点旋转，我们可以通过transform-origin调中心点。 3. 2D转换之缩放（scale） 4. 2D转换之斜切（skew ......
2D转换
在二维的平面上做一些变化，使用transform属性
1. 2D转换之移动（translate）
案例：
div{
width: 200px;
height: 200px;
background-color: #090;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);/*左-上 移动自身50%*/
}
2. 2D转换之旋转（rotate）
默认情况下按中心点旋转，我们可以通过transform-origin调中心点。
div{
width: 200px;
height: 200px;
background-color: #090;
margin: 100px auto;
transform-origin: top left;/*旋转的中心点，默认不写该属性是以矩形中心点旋转*/
}
div:hover{
transform: rotate(45deg)/*deg表示度数*/
}
3. 2D转换之缩放（scale）
div{
width: 200px;
height: 200px;
background-color: #090;
margin: 100px auto;
}
div:hover{
/*transform: scale(0.5);*/ /*x轴和Y轴都是缩放0.5倍*/
/*transform: scaleX(0.5);*/ /*x轴缩放0.5倍*/
transform: scale(2,3); /*x轴缩放2倍 y轴缩放3倍*/
}
4. 2D转换之斜切（skew）
div{
width: 200px;
height: 200px;
background-color: #090;
margin: 100px auto;
}
div:hover{
/*transform: skewX(8deg);*/ /*x方向上斜切8度*/
transform: skewY(8deg); /*y方向上斜切8度*/
}
1. 转换案例：
下箭头制作
1 div{
2 width: 300px;
3 height: 40px;
4 border: #5c5c5c solid 1px;
5 margin: 100px auto;
6 position: relative;
7 }
8 div::after{
9 content: '';
10 width: 12px;
11 height: 12px;
12 border-right: #5c5c5c solid 2px;
13 border-bottom: #5c5c5c solid 2px;
14 display: block;
15 position: absolute;
16 top: 50%; /*子盒子左上角相对于有定位的父盒子居中显示*/
17 right: 12px;
18 transform: translateY(-50%) rotate(45deg); /*translateY(-50%)与top:50% 组合使用让子盒子相对父盒子垂直居中*/
19 }
20 div:hover{
21 border: #009 solid 1px;
22 }
23 div:hover::after{
24 border-right: #009 solid 2px;
25 border-bottom: #009 solid 2px;
26 }
动画过渡（transition）
动漫过渡类型：
案例：
没有给transition瞬间变化 ↓ ↓
div{
width: 200px;
height: 100px;
border: #00f solid 3px;
background-color: #f90;
margin: 100px auto;
border-radius: 15px;
}
div:hover{
width: 300px;
height: 200px;
background-color: #f30;
}
1. 过渡的小案例：
div{
width: 200px;
height: 100px;
border: #00f solid 3px;
background-color: #f90;
margin: 100px auto;
border-radius: 15px;
/*transition: width 0.5s ease 0s;*/ /* 设置参与过渡的属性 过渡时间 过渡的动画类型 延迟过渡的时间 */
/*transition: all 0.5s ease 1s;*/ /* 默认用all参与 ... 延迟时间【进入和退出动画都延迟2秒】 */
transition: all 0.5s;
}
div:hover{
width: 300px;
height: 200px;
background-color: #f30;
}
2. 头像旋转小案例：
img{
border: #093 solid 4px;
display: block;
margin: 100px auto;
border-radius: 50%;
width: 300px;
height: 300px;
transition: all 1s;
}
img:hover{
transform: rotate(360deg);
}
3. 鼠标移动到图片上图片变大（模仿公开课网站的效果）
div{
width: 300px;
height: 300px;
border: #ccc solid 1px;
margin: 100px auto;
overflow: hidden;
}
div img{
width: 300px;
height: 300px;
transition: all 0.5s ease 0s;
}
div img:hover{
transform: scale(1.1);
}
4. 案例：抽奖的功能：
|
效果图 （素材可下载） |
背景 |
转盘 |
指针 |
HTML代码：
<div id="content">
<div id="zhuan"></div>
<img src="pointer.png" alt="">
</div>
css代码：
#content {
width: 698px;
height: 674px;
background: url('turntable-bg.jpg') no-repeat;
margin: auto;
overflow: hidden;
position: relative;
}
#content #zhuan {
width: 478px;
height: 478px;
background: url('turntable.png') no-repeat;
margin: 97px 0 0 110px;
transition: all 3s ease 0s;
}
#content img {
position: absolute;
left: 275px;
top: 219px;
}
JavaScript代码：
1 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
2 <script>
3 $(document).ready(function (e) {
4 $('#content img').click(function (e) {
5 var num = Math.floor(Math.random() * 3600); //求的旋转的随机数
6 $('#zhuan').css('transform', 'rotate(' + num + 'deg)');//实际看到图片的旋转度数并没有在原来旋转的基础上累加，而是基于原来图片0度时的位置设置样式，图片不管在哪个位置都会以顺时针或逆时针旋转回基于原来0度+rotate(度)
7 num %= 360; //num = num % 360
8 setTimeout(function () {
9 if (num <= 60) {
10 alert('谢谢参与');
11 } else if (num <= 60*2) {
12 alert('三等奖');
13 } else if (num <= 60*3) {
14 alert('谢谢参与');
15 } else if (num <= 60*4) {
16 alert('二等奖');
17 } else if (num <= 60*5) {
18 alert('谢谢参与');
19 } else if(num < 60*6){
20 alert('一等奖');
21 }
22 }, 3000);
23 });
24 });
25 </script>
3D转换
1. 3D转换之X轴旋转
※ X轴旋转就像单杠旋转
案例：
|
|
div{
width: 200px;
height: 200px;
margin: 100px auto;
border: #000 solid 1px;
}
div img:hover{
transform: rotateX(60deg);/*x轴旋转60度*/
}
|
☞ transform: rotateX(60deg)在二维平面，没有立体感。想让它有立体感需要添加透视功能（）
|
|
透视点（延长会有一个相交点）-- 灭点 |
|
|
div{
width: 200px;
height: 200px;
margin: 100px auto;
border: #000 solid 1px;
perspective: 400px; /*透视效果，这个元素必须给父元素添加*/
} div img:hover{
transform: rotateX(60deg);/*x轴旋转60度*/
}
|
默认情况以中线在旋转，添加transform-origin: bottom以底边为原点
|
|
div{
width: 200px;
height: 200px;
margin: 100px auto;
border: #000 solid 1px;
perspective: 400px; /*透视效果，这个元素必须给父元素添加*/
}
div img{
transform-origin: bottom;
transition: all 0.5s;
}
div img:hover{
transform: rotateX(60deg);/*x轴旋转60度*/
}
|
案例：打开的盒子
|
|
#content{
width: 300px;
height: 300px;
margin: 100px auto;
position: relative;
}
#content #face1,
#content #face2{
width: 300px;
height: 300px;
border-radius: 50%;
background: url('turntable-bg.jpg') no-repeat;
border: #666 solid 1px;
position: absolute;
left: 0;
top: 0;
}
#content #face2{
background: url('turntable.png') no-repeat;
transform-origin: bottom;
transition: all 2s;
}
#content:hover #face2{
transform: rotateX(180deg);
}
|
2. 3D转换之X轴旋转
※ Y轴旋转就像钢管舞，沿着y轴方向旋转
|
|
1 #content{
2 width: 300px;
3 height: 300px;
4 border: #666 solid 1px;
5 margin: 100px auto;
6 position: relative;
7 perspective: 800px; /*如需透视效果景深，这个元素必须给父元素添加*/
8 }
9 #content #face1,
10 #content #face2{
11 width: 300px;
12 height: 300px;
13 border-radius: 50%;
14 background: url('yingbi.png') no-repeat;
15 position: absolute;
16 backface-visibility: hidden; /*转过去以后隐藏*/
17 transition: all 3s;
18 }
19 #content #face1{
20 background-position: -4px -3px;
21 z-index: 1;
22 }
23 #content #face2{
24 background-position: -358px -3px;
25 transform: rotateY(-180deg); /*face2在背面处于-180度的状态*/
26 /* z-index: 0; */
27 }
28 #content:hover #face1{
29 transform: rotateY(-180deg);
30 /* z-index: 0; */ /*旋转过后置于底部 有了backface-visibility: hidden可不添加*/
31 }
32 #content:hover #face2{
33 transform: rotateY(0deg);
34 /* z-index: 1; */ /*旋转过后置于顶部 */
35 }
|
| 素材可下载 | |
face2在背面处于-180度的状态
上一篇： 某条街有个乞丐