- A+
所属分类：Web前端
网站动态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>
倾斜语法介绍：
<!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>
使用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>
快速制作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>
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>
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>
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电子时钟绘制表盘：
<!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>
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>
