Web——day04——css2D
作者：互联网
2D:默认向右为正方向，顺时针为旋转方向
向下的三角旋转180°到向上
仓鼠转圈
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
img{
width: 120px;
border: 3px solid pink;
border-radius: 50%;
}
img:hover{
transition: all 1s;
transform: rotate(360deg);
}
</style>
</head>
<body>
<img src="img/pic.jpg" />
</body>
</html>
代码运行结果：
三角旋转
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三角旋转</title>
<style>
.box{
width: 300px;
height: 60px;
border: 2px solid;
}
/*垂直的三角*/
.box::after{
content: "";
display: block;
width: 15px;
height: 15px;
border-right: 3px solid red;
border-bottom: 3px solid red;
transform: translate(260px,20px) rotate(45deg);
}
.box:hover::after{
transform: translate(260px,20px) rotate(225deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
代码的运行结果：
长方形旋转
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
height: 40px;
width: 300px;
border: 2px solid;
/* transform-origin: left top; */
transform-origin: 0 0;/*旋转中心点：沿左上角进行旋转，同上*/
}
div:hover{
transition: all 1s;
transform: rotate(360deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
代码运行结果：
图片放大
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 533px;
height: 300px;
background-color: #FFC0CB;
margin: 100px auto;/*中心放大*/
overflow: hidden;
}
div:hover img{
transition: all 0.5s;
transform: scale(1.2,1.2);/*缩放1,1是它本身 放大不会影响下面的位置
2,2是放大 0.2,0.2是缩小*/
/*width: 400px;
height: 200px; *//*这种放大影响下面的位置*/
}
/*div>img{
margin-left: 10px;
margin-top: 15px;
}*/
</style>
</head>
<body>
<div>
<img src="img/移动城堡.jpg" />
</div>
</body>
</html>
代码运行结果：
自定义动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定义动画</title>
<style>
div{
width: 100px;
height: 100px;
border: 2px solid;
animation: mydh 3s 3;/*执行3s，然后执行三次，infinite是执行无数次*/
}
/*设置动画 红变绿变蓝*/
@keyframes mydh{
0%{background-color: #FF0000;}
50%{background-color: aqua;height: 200px; transform: translateX(50px);}
100%{background-color: chartreuse}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Test——遮罩效果1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>遮罩效果</title>
<style>
.box{
border: 1px solid black;
width: 533px;
height: 300px;
color: red;
overflow: hidden;
}
img{
vertical-align: middle;/*垂直对齐方式*/
display: block; /*行级元素改成块元素*/
}
/*遮罩层*/
.box::after{
content: "移动城堡";
width: 533px;
height: 300px;
display: block;
background-color: rgba(0,0,0,0.2);
/*旋转中心点：原图左下角*/
transform-origin: left top;
transform: translateX(300px) rotate(90deg);
}
/*悬停box块，遮罩层设置效果 不能乱加括号*/
.box:hover::after{
transition: all 1s;
transform: translateY(-300px) rotate(0deg);
}
</style>
</head>
<body>
<div class="box">
<img src="img/移动城堡.jpg" />
<!-- <div class="mask"></div> -->
</div>
</body>
</html>
Test——遮罩效果2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>遮罩效果</title>
<style>
.box{
border: 1px solid black;
width: 533px;
height: 300px;
color: red;
overflow: hidden;
}
img{
vertical-align: middle;/*垂直对齐方式*/
display: block; /*行级元素改成块元素*/
position: relative;
transform: translateY(-300px);
z-index: 1;
}
/*遮罩层*/
.box::before{
position: relative;
z-index: 2; /*遮罩层的层级在上，必须与position连用*/
content: "移动城堡";
width: 533px;
height: 300px;
display: block;
background-color: rgba(0,0,0,0.2);
transform-origin: left bottom;
transform: rotate(180deg);
}
.box:hover::before{
transition: all 1s;
transform: rotate(0deg);
}
</style>
</head>
<body>
<div class="box">
<img src="img/移动城堡.jpg" />
</div>
</body>
</html>
代码运行结果：
圆球放大
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 100px;
height: 90px;
border: 3px solid pink;
border-radius: 50%;
font-size: 50px;
text-align:center;
padding-top: 10px;
margin: 50px;
float: left;
}
div:hover{
transition: all 0.5s;
transform: scale(1.2,1.2);
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.pagination{
width: 600px;
height: 50px;
border: 1px solid;
padding-top: 5px;
padding-bottom: 5px;
}
.pagination>div{
width: 40px;
height: 40px;
border: 2px solid pink;
border-radius: 50%;
/*文字居中 */
text-align: center;
/*2倍的行高=line-height=高度可以实现单行文字垂直*/
line-height: 40px;
float: left;
margin-left: 32px;
margin-top: 5px;
}
.pagination>div:hover{
transition: all 0.5s;
transform: scale(1.2,1.2);
}
</style>
</head>
<body>
<div class="pagination">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
</body>
</html>
代码的运行结果：
作业：旋转遮罩效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>遮罩效果</title>
<style>
.box{
border: 1px solid;
width: 533px;
height: 300px;
overflow: hidden;
}
img{
vertical-align: middle;/*垂直对齐方式*/
display: block; /*行级元素改成块元素*/
}
/*遮罩层*/
.box::after{
content: "";
width: 100%;
height: 100%;
display: block;
background-color: rgba(0,0,0,0.2);
}
/*悬停box块，遮罩层设置效果*/
.box:hover::after{/*不能乱加括号*/
transition: all 1s;
transform: translateY(-300px) rotate(360deg);
}
</style>
</head>
<body>
<div class="box">
<img src="img/移动城堡.jpg" />
<!-- <div class="mask"></div> -->
</div>
</body>
</html>
代码运行结果：
——The End
标签：box,Web,遮罩,transform,css2D,height,width,day04,border 来源： https://blog.csdn.net/weixin_45792414/article/details/119219745