欢迎光临
我的个人博客网站

CSS3变形透视动画-2 -cyy

网站动态logo制作:

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Document</title>      <style>         *{             margin:0;             padding:0;             box-sizing:border-box;         }         body{             width:100vw;             height:100vh;             display:flex;             justify-content:center;             align-items:center;             background:#ddd;         }         main div{            cursor:pointer;            font-size:2em;            color:#333;         }         main div strong{             display:inline-block; /*行元素不能旋转*/             transition:1s;             width:45px;             height:45px;             background:pink;             border-radius:50%;             text-align:center;         }         main div:hover strong:nth-child(1){             transform:rotate(360deg);             background:yellow;         }         main div:hover strong:nth-child(2){             transform:rotate(-360deg);             background:lightgreen;         }     </style> </head> <body>     <main>         <div><strong>c</strong>y<strong>y</strong></div>     </main> </body> </html>

CSS3变形透视动画-2 -cyy

 

 CSS3变形透视动画-2 -cyy

 

 

倾斜语法介绍:

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Document</title>      <style>         *{             margin:0;             padding:0;             box-sizing:border-box;         }       main{             width:400px;             height:400px;             border:1px solid silver;             position:absolute;             top:50%;             left:50%;             margin-top:-200px;             margin-left:-200px;         }         div{             width:200px;             height:200px;             position:absolute;             top:50%;             left:50%;             margin-top:-100px;             margin-left:-100px;         }         div:nth-child(1){             background:pink;         }         div:nth-child(2){             background:lightblue;             transition:1s;         }         main:hover div:nth-child(2){             transform:skewX(45deg);             transform:skewY(45deg);             transform:skew(45deg,-30deg);         }     </style> </head> <body>     <main>         <div></div>         <div></div>     </main> </body> </html>

CSS3变形透视动画-2 -cyy

 

 

使用skew制作炫酷按钮:

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Document</title>      <style>         *{             margin:0;             padding:0;             box-sizing:border-box;                               }         body{             width:100vw;             height:100vh;             display:flex;             justify-content:center;             align-items:center;             background:gray;         }         main{             width:200px;             display:flex;             justify-content:center;             align-items:center;         }         main a{             color:white;             border:5px solid pink;             padding:10px 50px;             font-size:1.5em;             color:white;             text-decoration:none;             position:relative;             overflow:hidden;             display:flex;             justify-content:center;             align-items:center;         }         .btn::after{             content:'';             position:absolute;             width:0;             height:100%;             background:pink;             transform:skew(45deg);             transition:.3s;             z-index:-1;         }         .btn:hover::after{             width:200%;         }     </style> </head> <body>     <main>         <a href="" class="btn">按钮</a>     </main> </body> </html>

CSS3变形透视动画-2 -cyy

 

快速制作3D立体按钮:

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Document</title>      <style>         *{             margin:0;             padding:0;             box-sizing:border-box;                               }         body{             width:100vw;             height:100vh;             display:flex;             justify-content:center;             align-items:center;             background:gray;         }         .btn{             color:white;             background:pink;             width:300px;             height:50px;             font-size:1em;             color:white;             text-decoration:none;             position:relative;             display:flex;             justify-content:center;             align-items:center;             transform:skewX(25deg) rotate(-15deg);             letter-spacing:.5em;             text-transform:uppercase;         }         .btn::before{             content:'';             position:absolute;             width:10px;             height:100%;             background:#000;             transition:.3s;             left:-10px;             transform:skewY(-45deg) translateY(5px);         }         .btn::after{             content:'';             position:absolute;             width:100%;             height:10px;             background:#000;             transition:.3s;             bottom:-10px;             transform:skewX(-45deg) translateX(-5px);         }     </style> </head> <body>     <a href="" class="btn">按钮</a> </body> </html>

CSS3变形透视动画-2 -cyy

 

 

2D变形参考点使用:

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Document</title>      <style>         *{             margin:0;             padding:0;             box-sizing:border-box;         }       main{             width:400px;             height:400px;             border:1px solid silver;             position:absolute;             top:50%;             left:50%;             margin-top:-200px;             margin-left:-200px;         }         div{             width:200px;             height:200px;             position:absolute;             top:50%;             left:50%;             margin-top:-100px;             margin-left:-100px;             transform-origin:center center;             transform-origin:left top;             transform-origin:right bottom;             transform-origin:left center;             transform-origin:0 0;             transform-origin:200% 200%;             transform-origin:left bottom;         }         div:nth-child(1){             background:pink;         }         div:nth-child(2){             background:lightblue;             transition:1s;         }         main:hover div:nth-child(2){             transform:rotate(145deg);             transform:skew(-45deg);         }     </style> </head> <body>     <main>         <div></div>         <div></div>     </main> </body> </html>

CSS3变形透视动画-2 -cyy

 

 

3D变形参考点:

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Document</title>      <style>         *{             margin:0;             padding:0;             box-sizing:border-box;         }       main{             width:400px;             height:400px;             border:1px solid silver;             position:absolute;             top:50%;             left:50%;             margin-top:-200px;             margin-left:-200px;             /* 透视加在父容器上 */             transform-style:preserve-3d;             transform:perspective(900px) rotateY(45deg) rotateX(45deg);         }         div{             width:200px;             height:200px;             position:absolute;             top:50%;             left:50%;             margin-top:-100px;             margin-left:-100px;             transform-origin:center center;             transform-origin:left top;             transform-origin:right bottom;             transform-origin:right bottom 100px;         }         div:nth-child(1){             background:pink;         }         div:nth-child(2){             background:lightblue;             transition:1s;         }         main:hover div:nth-child(2){             transform:rotateY(145deg);             /* transform:skew(-45deg); */         }     </style> </head> <body>     <main>         <div></div>         <div></div>     </main> </body> </html>

CSS3变形透视动画-2 -cyy

 

 

 

3D新年快乐贺卡制作:

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Document</title>      <style>         *{             margin:0;             padding:0;             box-sizing:border-box;         }         body{             width:100vw;             height:100vh;             display:flex;             justify-content:center;             align-items:center;             background:#ddd;         }         .card{             width:300px;             height:200px;             display:flex;             justify-content:center;             align-items:center;             background:pink;             color:#555;             position:relative;             transform-style:preserve-3d;             transform:perspective(900px) rotateX(45deg);                       }         .card::before,.card::after{                          position:absolute;             width:50%;             height:100%;             background:lightblue;             transition:1s;             box-sizing:border-box;         }         .card::before{             content:'生日';             left:0;             top:0;             display:flex;             justify-content:flex-end;             align-items:center;             transform-origin:left;             border-right:2px solid #333;             padding-right:2px;                                   }         .card::after{             content:'快乐';             right:0;             top:0;             display:flex;             justify-content:flex-start;             align-items:center;             transform-origin:right;             border-left:2px solid #333;             padding-left:2px;         }         .card:hover::before{             transform:rotateY(-180deg);         }         .card:hover::after{             transform:rotateY(180deg);         }     </style> </head> <body>     <div class="card">美少女cyy</div> </body> </html>

CSS3变形透视动画-2 -cyy

 

纯css3电子时钟绘制表盘:

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Document</title>      <style>         *{             margin:0;             padding:0;             box-sizing:border-box;         }         body{             width:100vw;             height:100vh;             display:flex;             justify-content:center;             align-items:center;             background:#01547a;         }         main{             width:400px;             height:400px;             border-radius:50%;             position:relative;         }         .clock{             width:400px;             height:400px;             border-radius:50%;             background-image:linear-gradient(to right,#ffeb3b,#ff9800,#ff5722);             position:relative;             z-index:-2;         }         .clock::after{             content:'';             position:absolute;             width:90%;             height:90%;             left:50%;             top:50%;             transform:translate(-50%,-50%);             background:#01547a;             border-radius:50%;             z-index:-1;         }         .line{             width:80%;             height:80%;             left:50%;             top:50%;             transform:translate(-50%,-50%);             position:absolute;             /* background:black; */             border-radius:50%;         }         .line::before{             content:'';             width:90%;             height:90%;             background:#01547a;             position:absolute;             left:50%;             top:50%;             transform:translate(-50%,-50%);             border-radius:50%;             z-index:2;         }         .line::after{             content:'';             width:20px;             height:20px;             background:white;             position:absolute;             left:50%;             top:50%;             transform:translate(-50%,-50%);             border-radius:50%;             z-index:2;         }         .line>div{             width:8px;             height:100%;             position:absolute;             background:white;             left:50%;             transform:translateX(-50%);         }         .line>div:nth-child(1){             transform:translateX(-50%) rotate(30deg);         }         .line>div:nth-child(2){             transform:translateX(-50%) rotate(60deg);         }         .line>div:nth-child(3){             transform:translateX(-50%) rotate(90deg);         }         .line>div:nth-child(4){             transform:translateX(-50%) rotate(120deg);         }         .line>div:nth-child(5){             transform:translateX(-50%) rotate(150deg);         }         .line>div:nth-child(6){             transform:translateX(-50%) rotate(180deg);         }         .hour{             width:8px;             height:15%;             bottom:50%;             position:absolute;             background:white;             left:50%;             transform:translateX(-50%);             transform-origin:bottom;             transition:10s;         }         .minutes{             width:5px;             height:25%;             bottom:50%;             position:absolute;             background:white;             left:50%;             transform:translateX(-50%) rotate(60deg);             transform-origin:bottom;             transition:10s;         }         .seconds{             width: 1px;             height:35%;             bottom:50%;             position:absolute;             background:white;             left:50%;             transform:translateX(-50%) rotate(120deg);             transform-origin:bottom;             transition:10s;         }         main:hover .seconds{             transform:translateX(-50%) rotate(360deg);         }     </style> </head> <body>     <main>         <div class="clock">             <div class="line">                 <div></div>                 <div></div>                 <div></div>                 <div></div>                 <div></div>                 <div></div>             </div>             <div class="hour"></div>             <div class="minutes"></div>             <div class="seconds"></div>         </div>     </main> </body> </html>

CSS3变形透视动画-2 -cyy

 

transform-origin技术做动态旋转菜单:

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Document</title>     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">      <style>         *{             margin:0;             padding:0;             box-sizing:border-box;             list-style:none;         }         body{             width:100vw;             height:100vh;             display:flex;             justify-content:center;             align-items:center;             background:#01547a;         }         nav{             width:200px;             height:200px;             background:#ff9800;             border-radius:50%;             position:relative;             display:flex;             justify-content:center;             align-items:center;             cursor:pointer;         }         nav::after{             content:'cyy';             font-size:3em;             color:white;         }         nav:hover ul{             transform:translate(-50%,-50%) scale(1);         }         ul{             transition:.5s;             width:300px;             height:300px;             /* border:1px solid black; */             position:absolute;             left:50%;             top:50%;             transform:translate(-50%,-50%) scale(0);         }         li{             width:80px;             height:80px;             background:#ff9800;             border-radius:50%;             position:absolute;             display:flex;             justify-content:center;             align-items:center;             color:white;             font-size:2em;             transition:1s;             transform-origin:150px 150px;          }         ul:hover li:nth-child(1){             transform:rotate(40deg);         }         ul:hover li:nth-child(1) span{             transform:rotate(320deg);         }          ul:hover li:nth-child(2){             transform:rotate(80deg);         }         ul:hover li:nth-child(2) span{             transform:rotate(640deg);         }          ul:hover li:nth-child(3){             transform:rotate(120deg);         }         ul:hover li:nth-child(3) span{             transform:rotate(960deg);         }          ul:hover li:nth-child(4){             transform:rotate(160deg);         }         ul:hover li:nth-child(4) span{             transform:rotate(1280deg);         }          ul:hover li:nth-child(5){             transform:rotate(200deg);         }         ul:hover li:nth-child(5) span{             transform:rotate(1600deg);         }          ul:hover li:nth-child(6){             transform:rotate(240deg);         }         ul:hover li:nth-child(6) span{             transform:rotate(1920deg);         }          ul:hover li:nth-child(7){             transform:rotate(280deg);         }         ul:hover li:nth-child(7) span{             transform:rotate(2240deg);         }          ul:hover li:nth-child(8){             transform:rotate(320deg);         }         ul:hover li:nth-child(8) span{             transform:rotate(2560deg);         }          ul:hover li:nth-child(9){             transform:rotate(360deg);         }         ul:hover li:nth-child(9) span{             transform:rotate(3240deg);         }      </style> </head> <body>     <nav>         <ul>             <li><span></span></li>             <li><span><i class="fa fa-h-square" aria-hidden="true"></i></span></li>             <li><span><i class="fa fa-address-book" aria-hidden="true"></i></span></li>             <li><span></span></li>             <li><span><i class="fa fa-calculator" aria-hidden="true"></i></span></li>             <li><span><i class="fa fa-dashcube" aria-hidden="true"></i></span></li>             <li><span></span></li>             <li><span><i class="fa fa-eercast" aria-hidden="true"></i></span></li>             <li><span><i class="fa fa-h-square" aria-hidden="true"></i></span></li>         </ul>     </nav> </body> </html>

CSS3变形透视动画-2 -cyy

赞(0) 打赏
未经允许不得转载:张拓的天空 » CSS3变形透视动画-2 -cyy
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏