CSS3动画大全(附源码)flex布局,grid布局3d旋转,图像模糊,文字发光

CSS3动画大全(附源码)3d旋转,图像模糊,文字发光!

文章目录

CSS3动画大全(附源码)3d旋转,图像模糊,文字发光!
html代码
css
- grid布局
- flex布局
- 文字发光 & 图像放缩
- 3d旋转图像移动
源码

html代码

<body><div class="container"><div class="main"><div class="te test1">1<div>test<span>spantest</span></div></div><div class="te test2">2<div>cdescsdvdsvdssfvdkbgjanlk谢看极才的回，至畴至人便他又，说亓德一。dvdddbdfsnv</div><div>4cd5sv45s5</div></div><div class="te test3">3</div><div class="te test4">4</div><div class="te test5">555555555</div><div class="te test6">6</div><div class="te test7">7</div><div class="te test8">8888888888888</div><div class="te test9">9</div><!-- <div class="te test10">10</div> --></div> </div>
</body>

css

body{margin:0;background-color: aquamarine;
}

先设置整体边框背景颜色覆盖

.container{width: 80%;height: 100vh;background-color: azure;margin: 0 auto;padding: 5%;box-sizing: border-box;
}

设置容器宽高, 利用外边距使之居中, 高度设置为视口高度, 设置背景颜色区分, 设置内边距发现高度不再是视口高度了, 这是因为box-sizing默认为内容盒子, 我们设置为边框盒子

grid布局

.main{background-color: bisque;width: 100%;height: 100%;display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 10px 15px;color: aliceblue;
}

flex布局

设置主界面, 宽高为100% 继承.container的内容盒子(外层容器有内边距), 设置内部网格布局, 纵向三个一排, 网格盒子间距为grid-row-gap: 10px; grid-column-gap: 15px

.main div{display: flex;/* justify-content: end; *//* 向主轴后面对齐 *//* align-items: flex-end; *//* 向交叉轴下面对其 */justify-content: center;align-items: center;flex-direction: column;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;/* background-size:contain ; *//* 保持原比例大小 */background-size: cover;/* 变换比例包含在内 */background-attachment: fixed;/* 实现一张图片分割 *//* transition-property: scale; */transition: all 0.5s ease-in-out;/* transition: text-shadow 0.2s ease; */
}

设置每个网格的样式. 网格内部采用flex布局, 居中, 网格内部元素竖着排列, white-space不换行, overflow溢出隐藏, 文本溢出省略号
background-size设置背景图存在方式, 如注释
background-attachment设置背景图的分割的方式为一张整
设置过渡效果, 所有过渡时间持续0.5s, 过渡函数ease-in-out

.main .te{background-image: url("./img/background1.png");
}

文字发光 & 图像放缩

背景图设置

.main .te:hover{opacity: 0.8;cursor: pointer;/* 放缩处理 */transform: scale(0.98);/* transform: scale(1.2); *//* 文字发光, 很不明显 */text-shadow: black 10px 10px 10px;
}

设置鼠标悬停效果. 体现明暗变化(opacity:透明度)
鼠标样式变化: 箭头变为手掌
大小变化: 略微缩小为0.98倍
文字阴影(文字发光效果): 去掉背景图片才好看出来属性分别是发光颜色, 沿着x轴阴影长度, y轴, 发光半径

.main .test8{background-image: none;background-color:aquamarine;transition: filter 1s ease 0s;
}
/* 图像模糊处理 */
.main .test8:hover{filter: blur(2px);
}

类似的对于第八个网格设置图片模糊效果
首先去掉背景图, 设置不一样的背景颜色(背景颜色会被背景图覆盖), 设置鼠标悬停过渡效果

.main .test5{background-image: none;background-color: blueviolet;/* 图像旋转 rotateX前后翻转 rotateY向右旋转 rotateZ平面旋转  rotate3d 3d旋转类似空翻 rotate默认为rotateZ*//*(移动方向是旋转后相对于图片的方向) translateX +向右-向左 translateY +向下-向上移动 translateZ 向轴正向移动(移向屏幕外) 在设置rotateZ的时候该属性无效*/transition: all 1s ease-in-out;
}
.main .test5:hover{transform: rotate3d(1, 1, 1, 360deg);
}

3d旋转图像移动

设置第五个网格图像3d旋转效果
如注释, 可以相对屏幕前后左右旋转, 三维旋转; 可以左右前后移动等

源码

<!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>Document</title><style> body{margin:0;background-color: aquamarine;}.container{width: 80%;height: 100vh;background-color: azure;margin: 0 auto;padding: 5%;box-sizing: border-box;}.main{background-color: bisque;width: 100%;height: 100%;display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 10px 15px;color: aliceblue;}.main div{display: flex;/* justify-content: end; *//* 向主轴后面对齐 *//* align-items: flex-end; *//* 向交叉轴下面对其 */justify-content: center;align-items: center;flex-direction: column;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;/* background-size:contain ; *//* 保持原比例大小 */background-size: cover;/* 变换比例包含在内 */background-attachment: fixed;/* 实现一张图片分割 *//* transition-property: scale; */transition: all 0.5s ease-in-out;/* transition: text-shadow 0.2s ease; */}.main .te{background-image: url("./img/background1.png");}.main .te:hover{opacity: 0.8;cursor: pointer;/* 放缩处理 */transform: scale(0.98);/* transform: scale(1.2); *//* 文字发光, 很不明显 */text-shadow: black 10px 10px 10px;}.main .test8{background-image: none;background-color:aquamarine;transition: filter 1s ease 0s;}/* 图像模糊处理 */.main .test8:hover{filter: blur(2px);}.main .test5{background-image: none;background-color: blueviolet;/* 图像旋转 rotateX前后翻转 rotateY向右旋转 rotateZ平面旋转  rotate3d 3d旋转类似空翻 rotate默认为rotateZ*//*(移动方向是旋转后相对于图片的方向) translateX +向右-向左 translateY +向下-向上移动 translateZ 向轴正向移动(移向屏幕外) 在设置rotateZ的时候该属性无效*/transition: all 1s ease-in-out;}.main .test5:hover{transform: rotate3d(1, 1, 1, 360deg);}</style>
</head><body><div class="container"><div class="main"><div class="te test1">1<div>test<span>spantest</span></div></div><div class="te test2">2<div>cdescsdvdsvdssfvdkbgjanlk谢看极才的回，至畴至人便他又，说亓德一。dvdddbdfsnv</div><div>4cd5sv45s5</div></div><div class="te test3">3</div><div class="te test4">4</div><div class="te test5">555555555</div><div class="te test6">6</div><div class="te test7">7</div><div class="te test8">8888888888888</div><div class="te test9">9</div><!-- <div class="te test10">10</div> --></div> </div>
</body>
</html>