當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

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

發布時間：2023/12/4 CSS 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 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> </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> </div> </body> </html>

總結

以上是生活随笔為你收集整理的CSS3动画大全(附源码)flex布局,grid布局3d旋转,图像模糊,文字发光的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：酸角糕的功效与作用、禁忌和食用方法
下一篇：葱的功效与作用、禁忌和食用方法