网站动态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>