09-渐变+过度+2D(位移+旋转+缩放)
09-渐变+过度+2D(位移+旋转+缩放)
1.过滤黑白网页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
.box {
width: 100px;
height: 100px;
background: red;
/* 过滤器，使网页变为黑白网页。 */
filter: grayscale(100%);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2.线性渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
/*
1 线性渐变：沿着一条轴线，从一个颜色逐渐过渡到另一个颜色。
2 渐变最少设置两个颜色（可以设置两个相同的颜色），否则报错。
*/
.box {
width: 300px;
height: 300px;
/*
3 渐变的方向可以是单词。默认to bottom，从上到下。
to top 由下至上
to right 由左至右
to left 由右至左
to left top 到左上
to right top 到右上
to left bottom 到左下
to right bottom 到右下
*/
/*background-image: linear-gradient(to bottom, red, yellow, blue);*/
/*
4 渐变的方向也可以是角度；正值顺时针，负值逆时针；0deg，0度，相当与从下到上；180度相当与从上到下。
*/
/*background-image: linear-gradient(0deg, red, yellow, blue);*/
/* 5 颜色后跟像素的写法。0-50px是红色，50-100px是红到黄的渐变，100-150px是黄到蓝的渐变，150-300px是蓝色。 */
/*background-image: linear-gradient(to right,red 0, red 50px, yellow 100px, blue 150px, blue 300px);*/
/* 6 颜色后跟像素的写法，省略开头和结尾的写法。 */
/*background-image: linear-gradient(to right,red 50px, yellow 100px, blue 150px);*/
/* 7 颜色后跟百分比写法的含义。0-20%是红色，20%-50%是红到黄的渐变，50%-80%是黄到蓝的渐变，80%-100%是蓝色。 */
/*background-image: linear-gradient(to right,red 20%, yellow 50%, blue 80%);*/
/* 8 颜色后跟百分比写法，包含头和尾。 */
background-image: linear-gradient(to right,red 0, red 20%, yellow 50%, blue 80%, blue 100%);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
3.重复性渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
/*
1 重复性渐变，将线性渐变进行平铺。
*/
.box {
width: 300px;
height: 300px;
/* 会将线性渐变平铺到没有设置渐变的区域，如0-50px、150-300px。 */
background-image: repeating-linear-gradient(to right, red 50px, yellow 100px, blue 150px);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
4.径向渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
/* 1 径向渐变，从原点到半径之间的渐变。 */
.box1 {
width: 300px;
height: 300px;
background-image: radial-gradient(red 50px,yellow 100px,blue 150px);
}
/* 2 径向渐变的图形。circle圆和ellipse椭圆；正方形盒子图形默认是circle圆，长方形盒子图形默认是circle圆ellipse椭圆。 */
.box2 {
width: 300px;
height: 200px;
margin-top: 20px;
background-image: radial-gradient(circle, red 50px,yellow 100px,blue 150px);
}
/*
3 径向渐变的距离。
closest-side，指定径向渐变的半径长度为从圆心到离圆心最近的边。
closest-corner，指定径向渐变的半径长度为从圆心到离圆心最近的角。
farthest-side，指定径向渐变的半径长度为从圆心到离圆心最远的边。
farthest-corner，默认值，指定径向渐变的半径长度为从圆心到离圆心最远的角。
*/
.box3 {
width: 300px;
height: 200px;
margin-top: 20px;
background-image: radial-gradient(circle farthest-side, red 30%,yellow 50%, blue 80%);
}
/* 4 设置渐变的圆心位置。 */
.box4 {
width: 300px;
height: 200px;
margin-top: 20px;
/* at 50px 50px，即水平的50px，垂直的50px。 */
/*background-image: radial-gradient(circle closest-corner at 50px 50px, red 30%,yellow 50%, blue 80%);*/
/* at 50% 50%，水平的50%，垂直的50%。 */
background-image: radial-gradient(circle closest-corner at 50% 50%, red 30%,yellow 50%, blue 80%);
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
5.重复径向渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
.box {
width: 300px;
height: 300px;
background-image: repeating-radial-gradient(circle farthest-corner, red 20px, yellow 30px, red 50px);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
6.过度属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
/*
过度，元素的属性值，在单位时间内，从一个值达到某个值，这个过程就是过度。
如果希望过度有来有去，需要将过度属性写在元素的默认状态下。即需要将过度写
在.box p{}中，.box p{}就是默认状态，如果写在.box:hover p{}则过度只有来。
display不是从一个数值变为另一个属性值，所以不能进行过度。
*/
.box {
width: 1200px;
height: 600px;
border: 1px solid black;
}
.box p:nth-of-type(1) {
width: 200px;
height: 200px;
background: red;
/* 1 需要过度的属性。 */
transition-property: width;
/* 2 过度的时间，单位秒s和毫秒ms。 */
transition-duration: 1s;
/*
3 过度的方式。
1 过度的方式可以是单词。
linear，线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease，平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in，由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out，由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out，由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
2 过度的方式可以是函数。制作多度函数的网址，贝塞尔曲线的网址，https://cubic-bezier.com/#.05,-0.4,1,1.49
*/
/* 过度的方式是单词。 */
/*transition-timing-function: ease;*/
/* 过度的方式是函数。 */
transition-timing-function: cubic-bezier(.05, -0.4, 1, 1.49);
/* 4 过度的延时，0.5s后开始过度。 */
transition-delay: 0.5s;
}
.box p:nth-of-type(2) {
width: 200px;
height: 200px;
background: yellow;
/* 4 过度的多属性写法。 */
/*transition-property: width, height, background-color, opacity;*/
/* 过度所有属性。 */
transition-property: all;
transition-duration: 1s;
transition-timing-function: cubic-bezier(.05, -0.4, 1, 1.49);
transition-delay: 0.5s;
}
.box p:nth-of-type(3) {
width: 200px;
height: 200px;
background: yellow;
/*
5 过度的复合属性。需要过度的属性 过度时间 过度的方式 过度的延时时间。
所有的属性可以调换位置，但是过度时间和过度的延时时间不能调换先后顺序，
即必须先写过度时间，在写过度的延时时间。
*/
transition: all 1s ease 0.5s;
}
.box p:nth-of-type(4) {
width: 200px;
height: 200px;
background: yellow;
/* 6 多个值的过度，每组过度需要使用逗号隔开。 */
/*transition: width 1s ease 0.5s,height 1s ease 0.5s;*/
/* 7 多个值的过度，利用CSS的层叠性，设置只有宽和高进行过度。 */
transition: all 1s ease 0.5s;
transition-property: width, height;
}
.box:hover p:nth-of-type(1) {
width: 1200px;
}
.box:hover p:nth-of-type(2) {
width: 1200px;
height: 600px;
background-color: black;
opacity: 0;
/* display不是从一个数值变为另一个属性值，所以不能进行过度。 */
/*display: none;*/
}
.box:hover p:nth-of-type(3) {
width: 1200px;
}
.box:hover p:nth-of-type(4) {
width: 1200px;
height: 500px;
}
</style>
</head>
<body>
<div class="box">
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</body>
</html>
7.用渐变实现左红右蓝
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
.box {
width: 300px;
height: 300px;
/*background-image: linear-gradient(to right, red 50%, blue 50%);*/
background-image: linear-gradient(to right, red 0, red 50%, blue 50%, blue 100%);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
8.练习-小米过度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
}
body {
background: #ccc;
}
.box {
width: 700px;
height: 300px;
margin: 100px auto;
}
.box li {
width: 220px;
height: 300px;
float: left;
margin-right: 10px;
background: #fff;
position: relative;
top: 0;
left: 0;
/* 隐藏溢出的span。不能使用display: none;来隐藏span，因为display: none;无法使用过度。 */
overflow: hidden;
transition: all .5s;
}
.box li a {
color: #000;
text-align: center;
text-decoration: none;
transition: all .5s;
}
.box li a span {
width: 100%;
height: 40px;
position: absolute;
background: orange;
line-height: 40px;
left: 0;
bottom: -40px;
/* 过度属性不能被继承，所以给a设置过度之后，也需要给span在设置过度，span才能拥有过度属性。 */
transition: all .5s;
}
.box li:hover a span {
bottom: 0;
}
.box li:hover a h3 {
/* 文字阴影。 */
text-shadow: 1px 1px 1px yellowgreen;
}
.box li:hover {
box-shadow:0 15px 30px rgba(0,255,0,.5);
/* 盒子的跳动效果通过给盒子加相对定位（因为盒子需要占用标准流的位置），然后再鼠标放上去时top:-1px;来完成。 */
top: -1px;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>
<a href="#">
<img src="img/1.jpg" alt="">
<h3>小米耳麦</h3>
<p>12:00开始抢购</p>
<span>图片说明</span>
</a>
</li>
<li>
<a href="#">
<img src="img/1.jpg" alt="">
<h3>小米耳麦</h3>
<p>12:00开始抢购</p>
<span>图片说明</span>
</a>
</li>
<li>
<a href="#">
<img src="img/1.jpg" alt="">
<h3>小米耳麦</h3>
<p>12:00开始抢购</p>
<span>图片说明</span>
</a>
</li>
</ul>
</div>
</body>
</html>
9.2d转换之位移
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box1 {
width: 200px;
height: 200px;
background: red;
/* 1 2d转换和相对定位一样，移动后还会占用标准流的位置。 */
/*
2 translate(100px, 100px);，第一个100px是水平方向的偏移量；
第二个100px是垂直方向的偏移量。
*/
/*transform: translate(100px, 100px);*/
/* 3 translate的单位也可以是百分比，第一个百分比表示自身宽度的50%。 */
transform: translate(50%, 50%);
}
.box2 {
width: 200px;
height: 200px;
background: blue;
}
.box3 {
width: 200px;
height: 200px;
background: orange;
/*
4 利用translate实现相对于父元素的居中。先开启绝对定位，
然后通过left: 50%;走父元素的宽的一半，然后使用translate(-50%, -50%);往回走自身宽的一半。
*/
/* transform: translate(-50%, -50%);的位移可以在不知道自身宽高时使用。 */
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
10.练习-京东侧边栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
}
body {
height: 3000px;
}
ul {
position: fixed;
right: 0;
top: 50%;
/* 不知道元素的高，所以使用translate进行偏移。 */
transform: translate(0, -50%);
}
ul li {
width: 40px;
height: 40px;
background: pink;
margin-bottom: 10px;
position: relative;
}
ul li span {
color: #fff;
font-size: 14px;
width: 80px;
height: 40px;
line-height: 40px;
position: absolute;
left: 0;
top: 0;
padding-left: 15px;
/* 只过度left属性。 */
transition: left 1s;
background: #000;
border-radius: 5px 0 0 5px;
}
ul li:hover span {
/* 只过度left属性。 */
left: -80px;
background-color: darkred;
}
ul li i {
width: 40px;
height: 40px;
background: #000 url("img/i1.png") no-repeat center center;
/* 开启绝对定位使得i设置宽高有效，并且可以显示在开启绝对定位的span的上面。 */
position: absolute;
left: 0;
top: 0;
border-radius: 5px 0 0 5px;
}
ul li:hover i {
/* 只有来的过度，没有回去的过度。 */
transition: all 1s;
background-color: darkred;
}
ul li:nth-of-type(2) i {
background-image: url("img/i2.png");
}
ul li:nth-of-type(3) i {
background-image: url("img/i3.png");
}
</style>
</head>
<body>
<ul>
<li>
<span>购物车</span>
<i></i>
</li>
<li>
<span>购物车</span>
<i></i>
</li>
<li>
<span>购物车</span>
<i></i>
</li>
</ul>
</body>
</html>
11.旋转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
.box {
width: 220px;
height: 220px;
border: 1px solid red;
margin: 200px auto;
}
.box img {
transition: all 1s;
}
.box:hover img {
/* 旋转，但是为deg，度；会沿z轴旋转；正值顺时针旋转，负值逆时针旋转。 */
transform: rotate(360deg);
}
</style>
</head>
<body>
<div class="box">
<img src="img/1.jpg" alt="">
</div>
</body>
</html>
12.旋转轴
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
.box {
width: 220px;
height: 220px;
border: 1px solid red;
margin: 200px auto;
}
.box img {
transition: all 1s;
}
.box:hover img {
/* 1 旋转，但是为deg，度；会沿z轴旋转；正值顺时针旋转，负值逆时针旋转。 */
/*transform: rotate(360deg);*/
/* 2 沿x轴旋转。从右向左看，正值顺时针旋转，负值逆时针旋转。 */
/*transform: rotateX(360deg);*/
/* 3 沿y轴旋转。从下向上看，正值顺时针旋转，负值逆时针旋转。 */
transform: rotateY(360deg);
}
</style>
</head>
<body>
<div class="box">
<img src="img/1.jpg" alt="">
</div>
</body>
</html>
13.旋转中心点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
.box {
width: 220px;
height: 220px;
border: 1px solid red;
margin: 200px auto;
}
.box img {
transition: all 1s;
/*
1 旋转中心点，transform-origin: left top;，left表示水平位置，top表示垂直位置。
2 沿z轴旋转时， transform-origin默认值是center center。
沿z轴旋转时transform-origin的取值，水平方向：left center right；垂直方向top center bottom。
3 沿x轴旋转时，旋转中心点在y轴上，所以给垂直位置设置top、center、bottom有效。
4 沿y轴旋转时，旋转中心点在x轴上，所以给水平位置设置left、center、right有效。
*/
/*transform-origin: left top;*/
/* 3 transform-origin也可以设置为具体的像素值。 */
transform-origin: 50px 50px;
}
.box:hover img {
/*transform: rotate(360deg);*/
transform: rotateX(360deg);
/*transform: rotateY(360deg);*/
}
</style>
</head>
<body>
<div class="box">
<img src="img/1.jpg" alt="">
</div>
</body>
</html>
14.练习-音乐盒
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
* {
padding: 0;
margin: 0;
}
body {
height: 3000px;
}
.box {
width: 300px;
height: 300px;
border: 1px solid black;
position: relative;
margin: 100px auto;
border-radius: 50%;
}
.box img:nth-of-type(1) {
position: absolute;
transition: all 1s;
border-radius: 50%;
}
.box img:nth-of-type(2) {
position: absolute;
border-radius: 50%;
transition: all 1s;
/*
旋转中心点需要设置在默认属性上，不能设置在:hover上。
如果设置在:hover上，旋转中心点就会被过度，出现旋转中心点移动的问题。
*/
transform-origin: bottom;
}
.box:hover img:nth-of-type(1) {
transform: rotate(360deg);
}
.box:hover img:nth-of-type(2) {
transform: rotateX(-180deg);
}
</style>
</head>
<body>
<div class="box">
<img src="img/musicb.jpg" alt="">
<img src="img/musict.jpg" alt="">
</div>
</body>
</html>
15.当旋转和位移同时存在时的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
.box {
width: 500px;
height: 500px;
border: 1px solid black;
}
.box .one {
width: 100px;
height: 100px;
background: red;
transition: all 1s;
}
.box:hover .one {
/* 1 transform是一个复合属性，所以不能同时定义两次，会出现覆盖的情况。 */
/*transform: translate(500px, 500px);*/
/*transform: rotate(360deg);*/
/* 2 当使用transform复合属性，位移和旋转同时存在时，可以先写位移，在写旋转，保证最终位移位置的正确性。 */
transform: translate(500px, 500px) rotate(360deg);
}
</style>
</head>
<body>
<div class="box">
<div class="one"></div>
</div>
</body>
</html>
16.2d转换之缩放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
img:hover {
/* 1 缩放，一个值，宽和高同时放大1.5倍。 */
/*transform: scale(1.5);*/
/* 2 缩放两个值，宽放大1.5倍，高缩小0.5倍。 */
transform: scale(1.5, 0.5);
}
</style>
</head>
<body>
<img src="img/1.jpg" alt="">
</body>
</html>
17.练习-世纪佳缘图片效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
.box {
width: 220px;
height: 220px;
border: 1px solid black;
margin: 200px auto;
/* 缩放之后图片会变大，可以使用overflow: hidden;隐藏变大的图片。 */
overflow: hidden;
}
.box img {
/* linear，线性匀速缩放。 */
transition: all linear 1s;
}
.box:hover img {
transform: scale(1.5);
}
</style>
</head>
<body>
<div class="box">
<img src="img/1.jpg" alt="">
</div>
</body>
</html>
18.动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
.box1 {
width: 200px;
height: 30px;
background: green;
margin: 100px auto;
/* 动画名称。 */
animation-name: donghua1;
/* 动画的时间 */
animation-duration: 1s;
/* 动画的方式，和过度的值一样。 */
animation-timing-function: linear;
/*
动画的方向。normal，默认值，正常值，从from到to；
reverse，反向，从to到from。
alternate，需要两次，第一次从from到to，第二次从to到from。
alternate-reverse，需要两次，第一次从to到from，第二次从from到to。
*/
animation-direction: normal;
/* 动画的次数，默认1次；infinite，无限次。 */
animation-iteration-count: infinite;
/* 动画的延时。 */
animation-delay: 1s;
}
/* 定义一个动画，通过定义动画的关键区间来定义动画。 */
@keyframes donghua1 {
/* 开始 */
from {
transform: rotate(0deg);
}
/* 结束 */
to {
transform: rotate(360deg);
}
}
.box2 {
width: 200px;
height: 30px;
background: green;
margin: 100px auto;
/* 动画复合属性：动画名称 动画时间 动画方式 动画延时 动画方向 动画次数 */
animation: donghua2 2s linear 2s reverse infinite;
}
/* 第二种定义动画的方式 */
@keyframes donghua2 {
/* 开始。 */
0% {
transform: rotate(0deg);
}
/* 中间过程。 */
50% {
transform: rotate(360deg);
}
/* 结束。 */
100% {
transform: rotate(3600deg);
}
}
</style>
</head>
<body>
<div class="box1">动画</div>
<div class="box2">动画</div>
</body>
</html>
19.全屏盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
.box {
/* 当不定义宽和高后会变为一个全屏的盒子。 */
/*width: 200px;*/
/*height: 200px;*/
background: red;
/* 全屏盒子 */
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构