简单上手H5+CSS前端3D酷炫特效源代码
生活随笔
收集整理的這篇文章主要介紹了
简单上手H5+CSS前端3D酷炫特效源代码
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
簡單上手H5+CSS前端3D酷炫特效
個人覺得是這個特效是
入手自己做比較簡單的一個前端特效
代碼十分少，也很容易看懂，記得點(diǎn)個關(guān)注
效果圖：
H5部分
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><link rel="stylesheet" href="style.css" /><title>Document</title></head><body><main><div class="cube"><div class="img1"></div><div class="img2"></div><div class="img3"></div><div class="img4"></div><div class="img5"></div><div class="img6"></div></div></main></body> </html>css部分：
html, body {margin: 0; }* {box-sizing: border-box; }body {background-color: #2f3542; }main {display: flex;align-items: center;justify-content: center;height: 100vh; }.cube {width: 250px;height: 250px;transform-style: preserve-3d;transform-origin: 125px 125px 0;animation: rotate-cube 10s ease-in-out infinite; }.cube > div {width: 250px;height: 250px;background-size: cover;background-position: center center;opacity: 0.8;position: absolute;box-shadow: inset 0 0 4px 2px rgba(106, 106, 106, 0.4); }/* 前 */ .cube .img1 {background-image: url("https://images.pexels.com/photos/274131/pexels-photo-274131.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");transform: rotateY(0deg) translateZ(125px); }/* 右 */ .cube .img2 {background-image: url("https://images.pexels.com/photos/1480690/pexels-photo-1480690.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");transform: rotateY(90deg) translateZ(125px); }/* 左 */ .cube .img3 {background-image: url("https://images.pexels.com/photos/36487/above-adventure-aerial-air.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");transform: rotateY(-90deg) translateZ(125px); }/* 下 */ .cube .img4 {background-image: url("https://images.pexels.com/photos/338713/pexels-photo-338713.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");transform: rotateX(90deg) translateZ(125px); }/* 上 */ .cube .img5 {background-image: url("https://images.pexels.com/photos/325044/pexels-photo-325044.jpeg?cs=srgb&dl=close-up-of-fish-over-black-background-325044.jpg&fm=jpg");transform: rotateX(-90deg) translateZ(125px); }/* 后 */ .cube .img6 {background-image: url("https://images.pexels.com/photos/404280/pexels-photo-404280.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");transform: rotateY(180deg) translateZ(125px); }@keyframes rotate-cube {0% {transform: rotateX(0deg) rotateY(0deg);}20% {/* 右邊圖片 */transform: rotateY(-90deg);}40% {/* 上 */transform: rotateX(-90deg);}60% {/* 左 */transform: rotateY(90deg);}80% {/* 下 */transform: rotateX(90deg);}100% {transform: rotateX(0deg) rotateY(0deg);} }總結(jié)
以上是生活随笔為你收集整理的简单上手H5+CSS前端3D酷炫特效源代码的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Minigui 调试支持藏文过程记录
- 下一篇： python如何绘制蜘蛛图_用Pytho