背景顔色漸變
background:linear-gradient(45deg,rgb(241, 227, 99) ,rgb(243, 160, 6), rgb(243, 121, 6))
文字漸變色
background:linear-gradient(45deg,rgb(238, 217, 32) , rgb(243, 6, 6),rgb(46, 243, 6),rgb(6, 148, 243));
-webkit-background-clip: text;
color: transparent;
變形(transform屬性)
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.container{
width: 400px;
margin: 10px auto;
background: rgb(245, 180, 60);
padding: 10px;
}
.text{
width: 300px;
cursor: pointer;
color: #ffffff;
text-align: center;
transition: all 1s linear;
}
/* 平移 */
.text:hover{
transform: translateX(15px);
}
ul{
list-style: none;
width: 700px;
margin: 10px auto;
display: flex;
flex-wrap: wrap;
}
ul .box{
width: 200px;
height: 150px;
margin: 20px auto;
color: #fff;
font-size: 22px;
background: rgb(248, 119, 33);
cursor: pointer;
transition: all 1s linear;
}
/* 旋轉 */
ul .rotate:hover{
transform: rotateX(180deg);
}
ul .rotate:nth-child(2):hover{
transform: rotateY(180deg);
}
ul .rotate:nth-child(3):hover{
transform: rotateZ(180deg);
}
/* 斜切 */
ul .skew:hover{
transform: skewX(30deg);
}
ul .skew:nth-child(2):hover{
transform: skewY(30deg);
}
ul .skew:nth-child(3):hover{
transform: skew(30deg);
}
/* 縮放 */
ul .scale:hover{
transform: scale(1.1);
}
ul .scale:nth-child(2):hover{
transform: scale(0.8);
}
ul .scale:nth-child(3):hover{
transform: scale(0.8,1.1);
}
</style>
</head>
<body>
<div class="container">
<div class="text">
<h3>移動(translateX)</h3>
<p>這裡随便放一些文字或者圖檔</p>
<p>這裡随便放一些文字或者圖檔</p>
<p>這裡随便放一些文字或者圖檔</p>
</div>
</div>
<ul>
<li class="rotate box">繞X軸旋轉</li>
<li class="rotate box">繞Y軸旋轉</li>
<li class="rotate box">繞Z軸旋轉 </li>
</ul>
<ul>
<li class="skew box">斜切X</li>
<li class="skew box">斜切Y</li>
<li class="skew box">斜切X,Y </li>
</ul>
<ul>
<li class="scale box">放大1.1被</li>
<li class="scale box">縮小0.8倍</li>
<li class="scale box">寬放縮小0.8倍,高放大1.1倍</li>
</ul>
</body>
</html>
過渡transition
過渡:文字從一種樣式轉變為另一種樣式
缺點:必須借助滑鼠移入
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
div{
width: 800px;
margin: 10px auto;
}
ul{
display: flex;
flex-wrap: wrap;
}
ul>li{
height: 150px;
overflow: hidden;
cursor: pointer;
transition: all .7s linear;
}
ul>li>img{
height: 100%;
}
ul>li>p{
color: #ffffff;
padding: 0 10px;
height: 50px;
line-height: 50px;
background: linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.2),rgba(0,0,0,.4));
transition: all .7s linear;
}
ul>li:hover{
transform: scale(1.1);
}
ul>li:hover>p{
transform: translateY(-50px);
}
</style>
</head>
<body>
<div>
<ul>
<li>
<img src="../images/01.jpg" alt="">
<p>文字,滑鼠移入時緩慢顯示</p>
</li>
<li>
<img src="../images/02.jpg" alt="">
<p>文字,滑鼠移入時緩慢顯示</p>
</li>
<li>
<img src="../images/03.jpg" alt="">
<p>文字,滑鼠移入時緩慢顯示</p>
</li>
<li>
<img src="../images/2.gif" alt="">
<p>文字,滑鼠移入時緩慢顯示</p>
</li>
<li>
<img src="../images/05.jpg" alt="">
<p>文字,滑鼠移入時緩慢顯示</p>
</li>
<li>
<img src="../images/06.jpg" alt="">
<p>文字,滑鼠移入時緩慢顯示</p>
</li>
</ul>
</div>
</body>
</html>