當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

css3平移、旋转、倾斜、缩放、动画效果的实现

發布時間：2024/1/18 编程问答 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 css3平移、旋转、倾斜、缩放、动画效果的实现小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

HTML代碼：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="style1.css"> </head> <body><div class="button"></div><div class="canResize">esdrtgyjikodrtgujiokpsedtgyhij </div><div class="transition"></div> <ul><li></li><li></li><li></li><li></li> </ul><div class="ball">球</div><div class="header-image"></div><div class="person"></div></body> </html>

css代碼：

body{padding:100px;background-color: #e4e4e4;/*設置攝像機到物體的視覺距離*/ /*perspective: 1000px;*/ /*視覺原點的位置從哪個方向看*/ perspective-origin: 10% 50%; } /*.button{*/ /*width: 150px;*/ /*height: 44px;*/ /*background-color: #ffc132;*/ /*把普通元素設置成按鈕類型元素*/ /*-webkit-appearance: button;*/ /*}*/ .button{width: 150px;height: 44px;background-color: #8848ff;/*設置外邊線*/ outline: 2px solid #e348ff;} .button:hover{/*設置外邊線向外偏移量*/ outline-offset: 10px; } .canResize{width: 150px;height: 44px;background-color: #ff1713;margin-top: 100px;border: 3px solid #3f4dff;overflow: auto;/*設置用戶可拖拽元素改變其大小需配合overflow使用*/ resize: both; } .transition{width: 100px;height: 100px;background-color: #47ffdf;/*過渡當樣式發生改變時觸發轉場動畫(過渡的樣式過渡效果花費的時間過渡效果的時間曲線過渡開始的時間)*/ transition: all 3s ease-in 2s;/*transition: background-color 3s,width 2s,height 4s,margin-top 1s;*/ } .transition:hover{background-color: #e348ff;width: 200px;height: 200px;margin-top: 20px;border-radius: 50%; }ul li{width: 100px;height: 100px;background-color: #ff3fa7;float: left;list-style: none;margin-left: 5px;position: relative; } ul li:first-child{/*使用動畫：動畫名稱動畫完成時間速度曲線開始時間播放次數是否下次反向播放是否正在運行或暫停*/ animation: jump 2s ease 3 alternate; } /*創建動畫*/ @keyframes jump {0%{top:-100px;height: 80px;background-color: #734aff;}50%{top:-60px;height: 120px;background-color: #8cff31;}100%{top:-20px;height: 180px;background-color: #ff2513;} } .ball{width: 100px;height: 100px;background-color: #ffcc2f;margin-top:250px;animation: move 3s ease alternate;text-align: center;line-height: 100px;/*設置圓角 CSS3新屬性*/ border-radius: 50%; } @keyframes move {30%{/*!*設置動畫*! 平移旋轉縮放傾斜*/ transform: translate(100px,-100px) rotate(60deg) scale(5,5) skew(30deg,30deg);}60%{transform: translate(150px,-100px) rotate(120deg) scale(2,2) skew(60deg,60deg);}100%{transform: translate(200px,-200px) rotate(360deg) scale(4,4) skew(90deg,90deg);} } .header-image{width: 200px;height: 200px;background: url("header.png") no-repeat center;transition: transform 2s;} .header-image:hover{transform: skew(10deg,10deg) rotate(360deg) scale(0.000001,0.000001); }.person{width: 400px;height: 400px;background: url("people.jpg") no-repeat center;background-size: contain;/*運行動畫*/ animation: rotate3D 3s linear;transform-origin: 50% 50%;} /*創建3D動畫*/ @keyframes rotate3D {to{/*3D旋轉*/ /*transform: rotateX(30deg) rotateY(30deg) rotateZ(30deg);*/ /*3D平移*/ /*transform:translate3d(30px,50px,-1000px);*/ transform: scaleZ(2) rotateX(90deg);} }

總結

以上是生活随笔為你收集整理的css3平移、旋转、倾斜、缩放、动画效果的实现的全部內容，希望文章能夠幫你解決所遇到的問題。

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