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>

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

css 跳跃动画,如何使用纯CSS实现方块跳跃的动画（附源码）
本篇文章给大家带来的内容是关于如何使用纯CSS实现方块跳跃的动画(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览源代码下载 https://github.com/ ...
8个前沿的 HTML5 CSS3 效果【附源码下载】
作为一个前沿的 Web 开发者,对于 HTML5 和 CSS3 技术或多或少都有掌握.前几年这些新技术刚萌芽的时候,开发者们已经使用它们来小试牛刀了,如今这些先进技术已经遍地开发,特别是在移动端大显身 ...
精选12个时尚的 CSS3 效果【附源码下载】
精选12个时尚的 CSS3 效果[附源码下载] 这里是精选的12个很炫的 CSS3 效果.CSS3 是对 CSS 规范的一个很大的改善和增强,它使得 Web 开发人员可以很容易的在网站中加入时尚的效果 ...
html5 css动画效果代码,超酷震撼 8个HTML5/CSS3动画应用及源码
原标题:超酷震撼 8个HTML5/CSS3动画应用及源码 HTML5可以制作非常华丽的动画效果,这点通过之前的分享学习我们已经有深刻的了解了,今天我们主要来分享一些HTML5结合CSS3形成的超炫震撼 ...
超酷震撼 HTML5/CSS3动画应用及源码
HTML5可以制作非常华丽的动画效果,这点通过之前的分享学习我们已经有深刻的了解了,今天我们主要来分享一些HTML5结合CSS3形成的超炫震撼的动画应用以及它们的源代码,真的非常不错. 1.纯CSS3 ...
php图片动画源码,JavaScript_jQuery插件ImageDrawer.js实现动态绘制图片动画（附源码下载），ImageDrawer.js是一款可以实现动 - phpStudy...
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载) ImageDrawer.js是一款可以实现动态绘制图片动画的jQuery插件.通过ImageDrawer.js插件,你可 ...
心形源码HTML,纯CSS实现心形加载动画（附源码）
本篇文章给大家介绍一下纯CSS实现心形加载动画的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 废话不多说上代码,代码很简答,研究一下就明白了,有不明白的可以问我. .hear ...
css3网站代码 html5_让你心动的 HTML5 CSS3 效果【附源码下载】
这里集合的这组 HTML5 & CSS3 效果,有的是网站开发中常用的.实用的功能,有的是先进的 Web 技术的应用演示.不管哪一种,这些案例中的技术都值得我们去探究和学习. 超炫的 HTML ...
css怎样使弹跳的小球旋转,如何使用纯CSS实现小球跳跃台阶的动画效果（附源码）...
本篇文章给大家带来的内容是关于如何使用纯CSS实现小球跳跃台阶的动画效果(附源码) ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览源代码下载 https://github ...

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

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

文章目录

html代码

css

grid布局

flex布局

文字发光 & 图像放缩

3d旋转图像移动

源码

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

最新文章

热门文章

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

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

文章目录

html代码

css

grid布局

flex布局

文字发光 & 图像放缩

3d旋转 图像移动

源码

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

最新文章

热门文章

3d旋转图像移动