html 代码 <!DOCTYPE <span class='wp_keywordlink_affiliate'><a href="https://www.rokub.com/category/html" title="html" target="_blank" data-wpel-link="internal" rel="noopener noreferrer">html</a></span>><br /> <html lang="en"><br /> <head><br /> <meta charset="UTF-8"><br /> <title>Title</title><br /> <style><br /> .wrap{width: 200px;height: 400px;margin: 130px auto}<br /> .wrap .tuoluo{<br /> width: 100%;<br /> height: 100%;<br /> /*在 3D 空间中呈现*/<br /> transform-style: preserve-3d;<br /> }<br /> /*定义动画*/<br /> @keyframes tuoluo {<br /> 0%{<br /> transform: rotateY(0deg) rotateX(0deg);<br /> }<br /> 25%{<br /> transform: rotateY(-90deg) rotateX(9deg);<br /> }<br /> 50%{<br /> transform: rotateY(-180deg) rotateX(18deg);<br /> }<br /> 75%{<br /> transform: rotateY(-270deg) rotateX(9deg);<br /> }<br /> 100%{<br /> transform: rotateY(-360deg) rotateX(0deg);<br /> }<br /> }<br /> .wrap .tuoluo{<br /> position: relative;<br /> width: 100%;<br /> height: 100%;<br /> /*循环动画*/<br /> animation: tuoluo 3s linear infinite;<br /> }<br /> .tuoluo-top .face-top{<br /> width: 0;<br /> height: 0;<br /> /*用border画三角形*/<br /> border-style: solid;<br /> border-color: transparent;<br /> border-width:0 50px 170px;<br /> border-bottom-color: rgba(10, 19, 136,0.5);<br /> /*设置旋转元素的基点位置*/<br /> transform-origin: center bottom;<br /> position: absolute;<br /> top: 29px;<br /> }<br /> .tuoluo-top .face-top:nth-of-type(1){<br /> transform:rotateY(0deg) translateZ(88px) rotateX(31deg);<br /> }<br /> .tuoluo-top .face-top:nth-of-type(2){<br /> transform:rotateY(60deg) translateZ(88px) rotateX(31deg);<br /> }<br /> .tuoluo-top .face-top:nth-of-type(3){<br /> transform:rotateY(120deg) translateZ(88px) rotateX(31deg);<br /> }<br /> .tuoluo-top .face-top:nth-of-type(4){<br /> transform:rotateY(180deg) translateZ(88px) rotateX(31deg);<br /> }<br /> .tuoluo-top .face-top:nth-of-type(5){<br /> transform:rotateY(240deg) translateZ(88px) rotateX(31deg);<br /> }<br /> .tuoluo-top .face-top:nth-of-type(6){<br /> transform:rotateY(300deg) translateZ(88px) rotateX(31deg);<br /> }<br /> .tuoluo-buttom .face-bottom{<br /> width: 0px;<br /> height: 0;<br /> border-style: solid;<br /> border-color: transparent;<br /> border-width:170px 50px 0px;<br /> border-top-color: rgba(209, 59, 10, 0.5);<br /> /*设置旋转元素的基点位置*/<br /> transform-origin: center top;<br /> position: absolute;<br /> top: 50%;<br /> }<br /> .tuoluo-buttom .face-bottom:nth-of-type(1){<br /> transform:rotateY(0deg) translateZ(88px) rotateX(-31deg);<br /> }<br /> .tuoluo-buttom .face-bottom:nth-of-type(2){<br /> transform:rotateY(60deg) translateZ(88px) rotateX(-31deg);<br /> }<br /> .tuoluo-buttom .face-bottom:nth-of-type(3){<br /> transform:rotateY(120deg) translateZ(88px) rotateX(-31deg);<br /> }<br /> .tuoluo-buttom .face-bottom:nth-of-type(4){<br /> transform:rotateY(180deg) translateZ(88px) rotateX(-31deg);<br /> }<br /> .tuoluo-buttom .face-bottom:nth-of-type(5){<br /> transform:rotateY(240deg) translateZ(88px) rotateX(-31deg);<br /> }<br /> .tuoluo-buttom .face-bottom:nth-of-type(6){<br /> transform:rotateY(300deg) translateZ(88px) rotateX(-31deg);<br /> }<br /> </style><br /> </head><br /> <body><br /> <div class="wrap"><br /> <div class="tuoluo"><br /> <div class="tuoluo-top"><br /> <div class="face-top"></div><br /> <div class="face-top"></div><br /> <div class="face-top"></div><br /> <div class="face-top"></div><br /> <div class="face-top"></div><br /> <div class="face-top"></div><br /> </div><br /> <div class="tuoluo-buttom"><br /> <div class="face-bottom"></div><br /> <div class="face-bottom"></div><br /> <div class="face-bottom"></div><br /> <div class="face-bottom"></div><br /> <div class="face-bottom"></div><br /> <div class="face-bottom"></div><br /> </div><br /> </div></p> <p> </div><br /> </body><br /> </html>
前端开发者
970106_lzh 2年前 (2021-01-08)说：
huihui 2年前 (2020-10-20)说：
Satisfy 3年前 (2020-06-05)说：
评论前必须登录！
注册