前端案例：纯css代码写出积极向上攀登金字塔

来源：互联网发布：淘宝热卖的东西编辑：程序博客网时间：2024/05/02 02:00
攀登金字塔源码：
<!--文档声明为 html（最新html5）--><!doctype html><html>  <head>    <!--声明当前页面编码格式为国际编码（utf-8）还有一种中文编码（gbk/gb2312）-->    <metacharset="UTF-8">    <!--网页三要素-->    <metaname="Keywords"content="关键词,关键词">    <metaname="Description"content="描述">    <title>网页的标题</title>    <!--css 层叠样式表 衣服，化妆品 修饰body 页面-->    <style>body {overflow: hidden;background: rgb(20,20,20);}.stage {position: relative;top: 500px;width: 150px;height: 320px;margin: auto;-webkit-perspective: 1200px;-webkit-perspective-origin: 50% 50%;perspective: 1200px;perspective-origin: 50% 50%;}.pyramid3d {position: relative;width: 200px;height: 200px;margin: 0auto;-webkit-transition: -webkit-transform 1s ease-out;transition: transform 1s ease-out;-webkit-transform-style: preserve-3d;transform-style: preserve-3d;-webkit-transform: rotateX(75deg) rotate(65deg);transform: rotateX(75deg)rotate(65deg);-webkit-animation: fall 3s linear infinite;animation: fall 3s linear infinite;}.triangle {-webkit-transform-style: preserve-3d;transform-style: preserve-3d;-webkit-transform-origin: left top;transform-origin: left top;width: 0;height: 0;background: none;}.triangle:before {content: "";position: absolute;height: 0;width: 0;border-style: solid;border-width: 176px 75px 0 75px;-webkit-transform-origin: bottom center;transform-origin: bottom center;}.side1 {-webkit-transform: translatex(0) rotatey(115.2deg) rotatez(90deg);transform: translatex(0)rotatey(115.2deg)rotatez(90deg);}.side2 {-webkit-transform: translatex(150px) rotatez(90deg) rotatex(64.8deg);transform: translatex(150px)rotatez(90deg)rotatex(64.8deg);}.side3 {-webkit-transform: translatez(0) rotatex(64.8deg);transform: translatez(0)rotatex(64.8deg);}.side4 {-webkit-transform: translatey(150px) rotatex(115.2deg);transform: translatey(150px)rotatex(115.2deg);}.side1:before {border-color: rgba(115, 115,0,0.3) transparenttransparent transparent;-webkit-animation: flipFirst 3s infinite;animation: flipFirst 3s infinite;}.side2:before {border-color: rgba(20, 90,225,0.3) transparenttransparent transparent;-webkit-animation: flipSecond 3s infinite;animation: flipSecond 3s infinite;}.side3:before {border-color: rgba(255, 0,0,0.3) transparenttransparent transparent;-webkit-animation: flipThird 3s infinite;animation: flipThird 3s infinite;}.side4:before {border-color: rgba(0, 255,255,0.3) transparenttransparent transparent;-webkit-animation: flipFourth 3s infinite;animation: flipFourth 3s infinite;}@keyframes fall {0% {-webkit-transform: rotateX(75deg) rotate(65deg) translateZ( 176px);transform: rotateX(75deg)rotate(65deg)translateZ(176px);}100% {-webkit-transform: rotateX(75deg) rotate(65deg) translateZ(-140px);transform: rotateX(75deg)rotate(65deg)translateZ(-140px);}}@keyframes flipFirst {12.5%,50% {-webkit-transform-origin: bottom center;transform-origin: bottom center;-webkit-transform: rotatex(130deg);transform: rotatex(130deg);}50.0001%,87.5% {-webkit-transform-origin: top center;transform-origin: top center;transform: translateX(0px)translateY(286px)translateZ(-134px)rotatex(130deg);}100% {-webkit-transform-origin: top center;transform-origin: top center;transform: translateX(0px)translateY(286px)translateZ(-135px)rotatex(360deg);}}@keyframes flipSecond {25% {-webkit-transform: rotatex(0deg);transform: rotatex(0deg);}37.5%,50% {-webkit-transform-origin: bottom center;transform-origin: bottom center;-webkit-transform: rotatex(-130deg);transform: rotatex(-130deg);}50.0001%,62.5% {-webkit-transform-origin: top center;transform-origin: top center;transform: translateX(0px)translateY(286px)translateZ(134px)rotatex(-130deg);}75%,100% {-webkit-transform-origin: top center;transform-origin: top center;transform: translateX(0px)translateY(286px)translateZ(134px)rotatex(-360deg);}}@keyframes flipThird {12.5% {-webkit-transform: rotatex(0deg);transform: rotatex(0deg);}25%,50% {-webkit-transform-origin: bottom center;transform-origin: bottom center;-webkit-transform: rotatex(-130deg);transform: rotatex(-130deg);}50.0001%,75% {-webkit-transform-origin: top center;transform-origin: top center;transform: translateX(0px)translateY(286px)translateZ(134px)rotatex(-130deg);}87.5%,100% {-webkit-transform-origin: top center;transform-origin: top center;transform: translateX(0px)translateY(286px)translateZ(134px)rotatex(-360deg);}}@keyframes flipFourth {37.5% {-webkit-transform: rotatex(0deg);transform: rotatex(0deg);}50% {-webkit-transform-origin: bottom center;transform-origin: bottom center;-webkit-transform: rotatex(130deg);transform: rotatex(130deg);}50.0001% {-webkit-transform-origin: top center;transform-origin: top center;transform: translateX(0px)translateY(286px)translateZ(-134px)rotatex(130deg);}62.5%,100% {-webkit-transform-origin: top center;transform-origin: top center;transform: translateX(0px)translateY(286px)translateZ(-134px)rotatex(360deg);}}    </style>  </head>  <body><div class="stage"><div class="pyramid3d"><div class="triangle side1"></div><div class="triangle side2"></div><div class="triangle side3"></div><div class="triangle side4"></div></div></div>  </body></html>
web前端学习群：575308719，分享源码、视频、企业级案例、最新知识点，欢迎初学者和在进阶中的小伙伴。
关注公众号→‘学习web前端’跟大佬一起学前端！
阅读全文
0 0