变形
平移
transform: translateY(100px);
旋转 deg turn grad
transform: rotate(90deg);
transform: rotateX(90deg);
缩放
transform: scaleX(2);
transform: scale(.25);
倾斜
transform: skewX(60deg);
过渡 transition
过渡模仿iphone解锁
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模仿iphone解锁效果</title>
<style>
*{
margin:0;
padding: 0;
list-style: none;
}
body{
background-color: #000;
overflow: hidden;
}
p{
width: 500px;
height: 100px;
font-size: 80px;
line-height: 100px;
text-align: center;
background-color: gray;
margin: 100px;
background-image:
-webkit-linear-gradient(135deg,transparent 10%,white 15%,transparent 20%);
background-image:
linear-gradient(135deg,transparent 10%,white 15%,transparent 20%);
/* 背景剪裁 */
-webkit-background-clip: text;
color: transparent;
transition: 4s;
}
p:hover{
background-position: 500px 0;
}
</style>
</head>
<body>
<p>千山鸟飞绝</p>
</body>
</html>
过滤
模糊
filter: blur(10px);
亮度
filter:brightness(2)
对比度
filter: contrast(2);
阴影
filter: drop-shadow(5px 5px 5px tomato);
灰度
filter: grayscale(1);
色相转变
filter: hue-rotate(360deg);
反转
filter: invert(1);
透明度
filter: opacity(.25);
饱和度
filter: saturate(4.25);
褐色
filter: sepia(.5);
渐变
linear-gradlient、radial-gradlient
背景图:渐变(方向,颜色1百分比,颜色2百分比
谷歌:-webkit-
设置方向left=to right
left top
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>gradlient</title>
<style>
/* linear-gradlient、radial-gradlient
背景图:渐变(方向,颜色1百分比,颜色2百分比...)
*/
div{
width: 500px;
height: 200px;
background-color: tomato;
margin-bottom: 100px;
}
div:nth-of-type(1){
/* 谷歌:-webkit- */
/* 设置方向left=to right
left top */
background-image: -webkit-linear-gradient(left,cyan 20%,gold 50%);
/* -moz- */
/* background-image: -moz-linear-gradient(left,cyan,gold);
background-image: linear-gradient(left,cyan,gold); */
}
div:nth-of-type(2){
background-image: -webkit-radial-gradient(hotpink,red,gold,tomato);
}
.ch{
background-image: -webkit-radial-gradient(
center bottom,white 40%,purple,skyblue,cyan,green,gold,orange,red,white 60%
);
background-image: radial-gradient(
center bottom,white 40%,purple,skyblue,cyan,green,gold,orange,red,white 60%
);
}
</style>
</head>
<body>
<div></div>
<div></div>
<div class="ch"></div>
</body>
</html>
box-shadow、text-shadow
阴影:横向偏移量 纵向偏移量 模糊距离 阴影颜色