目录
阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
div {
width: 300px;
height: 300px;
background-color: cyan;
box-shadow: -50px -50px 100px tomato;
}
p {
font-size: 2em;
text-shadow: 1px 1px 1px gray;
}
section {
width: 100px;
height: 100px;
background-color: pink;
}
section:hover {
cursor: pointer;
box-shadow: 0 8px 10px gray;
}
</style>
</head>
<body>
<div></div>
<p>知了堂知了堂知了堂知了堂知了堂</p>
<section></section>
</body>
</html>运行结果
渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>gradient</title>
<style>
div {
width: 500px;
height: 200px;
margin-bottom: 100px;
}
.ch {
background-image: -webkit-radial-gradient(center bottom, white 40%,purple, deepskyblue, cyan, greenyellow, gold, orange, tomato,white 60%);
background-image: radial-gradient(center bottom, white 40%, purple, deepskyblue, cyan, greenyellow, gold, orange, tomato, white 60%);
}
</style>
</head>
<body>
<div class="ch"></div>
</body>
</html>运行结果
过渡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>过渡transition</title>
<style>
div {
width: 100px;
height: 100px;
background-color: cyan;
transition: .3s;
}
div:hover {
cursor: pointer;
width: 300px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
</body>
</html>变形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>变形transform</title>
<style>
div {
width: 200px;
height: 200px;
background-image: url(img/xhr.jpeg);
background-size: cover;
transition: .5s;
}
section {
width: 200px;
height: 200px;
line-height: 200px;
color: white;
text-align: center;
background-color: deepskyblue;
margin-left: 100px;
transform-origin: left top;
transition: .5s;
}
section:hover {
transform: rotate(60deg);
}
div:hover {
/*平移*/
/*transform: translateX(100px);*/
/*旋转 deg turn grad*/
/*transform: rotate(360deg);*/
/*transform: rotate(1turn);*/
/*transform: rotate(400grad);*/
/*transform: rotateX(90deg);*/
/*缩放*/
/*transform: scaleY(.2);*/
/*transform: scale(3);*/
/*倾斜*/
/*transform: skewY(-90deg);*/
}
</style>
</head>
<body>
<div></div>
<p>知了堂</p>
<section>Rotate</section>
</body>
</html>注意：变形不会影响文档流
滤镜
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>filter过滤</title>
<style>
div {
width: 200px;
height: 200px;
background-image: url(img/xhr.jpeg);
background-size: cover;
/*模糊*/
/*filter: blur(1px);*/
/*亮度*/
/*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);*/
}
section {
width: 200px;
height: 200px;
background-color: red;
transition: 3s;
}
section:hover {
filter: hue-rotate(360deg);
}
</style>
</head>
<body>
<div></div>
<section></section>
</body>
</html>