经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » CSS » 查看文章
CSS3变形透视动画-2 -cyy
来源：cnblogs　　作者：陈莺莺呀　　时间：2020/11/16 10:08:19　　对本文有异议

网站动态logo制作：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.  
  7.     <style>
  8.         *{
  9.             margin:0;
  10.             padding:0;
  11.             box-sizing:border-box;
  12.         }
  13.         body{
  14.             width:100vw;
  15.             height:100vh;
  16.             display:flex;
  17.             justify-content:center;
  18.             align-items:center;
  19.             background:#ddd;
  20.         }
  21.         main div{
  22.            cursor:pointer;
  23.            font-size:2em;
  24.            color:#333;
  25.         }
  26.         main div strong{
  27.             display:inline-block; /*行元素不能旋转*/
  28.             transition:1s;
  29.             width:45px;
  30.             height:45px;
  31.             background:pink;
  32.             border-radius:50%;
  33.             text-align:center;
  34.         }
  35.         main div:hover strong:nth-child(1){
  36.             transform:rotate(360deg);
  37.             background:yellow;
  38.         }
  39.         main div:hover strong:nth-child(2){
  40.             transform:rotate(-360deg);
  41.             background:lightgreen;
  42.         }
  43.     </style>
  44. </head>
  45. <body>
  46.     <main>
  47.         <div><strong>c</strong>y<strong>y</strong></div>
  48.     </main>
  49. </body>
  50. </html>

 

 

 

 

倾斜语法介绍：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.  
  7.     <style>
  8.         *{
  9.             margin:0;
  10.             padding:0;
  11.             box-sizing:border-box;
  12.         }
  13.       main{
  14.             width:400px;
  15.             height:400px;
  16.             border:1px solid silver;
  17.             position:absolute;
  18.             top:50%;
  19.             left:50%;
  20.             margin-top:-200px;
  21.             margin-left:-200px;
  22.         }
  23.         div{
  24.             width:200px;
  25.             height:200px;
  26.             position:absolute;
  27.             top:50%;
  28.             left:50%;
  29.             margin-top:-100px;
  30.             margin-left:-100px;
  31.         }
  32.         div:nth-child(1){
  33.             background:pink;
  34.         }
  35.         div:nth-child(2){
  36.             background:lightblue;
  37.             transition:1s;
  38.         }
  39.         main:hover div:nth-child(2){
  40.             transform:skewX(45deg);
  41.             transform:skewY(45deg);
  42.             transform:skew(45deg,-30deg);
  43.         }
  44.     </style>
  45. </head>
  46. <body>
  47.     <main>
  48.         <div></div>
  49.         <div></div>
  50.     </main>
  51. </body>
  52. </html>

 

 

使用skew制作炫酷按钮：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.  
  7.     <style>
  8.         *{
  9.             margin:0;
  10.             padding:0;
  11.             box-sizing:border-box;
  12.             
  13.         
  14.         }
  15.         body{
  16.             width:100vw;
  17.             height:100vh;
  18.             display:flex;
  19.             justify-content:center;
  20.             align-items:center;
  21.             background:gray;
  22.         }
  23.         main{
  24.             width:200px;
  25.             display:flex;
  26.             justify-content:center;
  27.             align-items:center;
  28.         }
  29.         main a{
  30.             color:white;
  31.             border:5px solid pink;
  32.             padding:10px 50px;
  33.             font-size:1.5em;
  34.             color:white;
  35.             text-decoration:none;
  36.             position:relative;
  37.             overflow:hidden;
  38.             display:flex;
  39.             justify-content:center;
  40.             align-items:center;
  41.         }
  42.         .btn::after{
  43.             content:'';
  44.             position:absolute;
  45.             width:0;
  46.             height:100%;
  47.             background:pink;
  48.             transform:skew(45deg);
  49.             transition:.3s;
  50.             z-index:-1;
  51.         }
  52.         .btn:hover::after{
  53.             width:200%;
  54.         }
  55.     </style>
  56. </head>
  57. <body>
  58.     <main>
  59.         <a href="" class="btn">按钮</a>
  60.     </main>
  61. </body>
  62. </html>

 

快速制作3D立体按钮：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.  
  7.     <style>
  8.         *{
  9.             margin:0;
  10.             padding:0;
  11.             box-sizing:border-box;
  12.             
  13.         
  14.         }
  15.         body{
  16.             width:100vw;
  17.             height:100vh;
  18.             display:flex;
  19.             justify-content:center;
  20.             align-items:center;
  21.             background:gray;
  22.         }
  23.         .btn{
  24.             color:white;
  25.             background:pink;
  26.             width:300px;
  27.             height:50px;
  28.             font-size:1em;
  29.             color:white;
  30.             text-decoration:none;
  31.             position:relative;
  32.             display:flex;
  33.             justify-content:center;
  34.             align-items:center;
  35.             transform:skewX(25deg) rotate(-15deg);
  36.             letter-spacing:.5em;
  37.             text-transform:uppercase;
  38.         }
  39.         .btn::before{
  40.             content:'';
  41.             position:absolute;
  42.             width:10px;
  43.             height:100%;
  44.             background:#000;
  45.             transition:.3s;
  46.             left:-10px;
  47.             transform:skewY(-45deg) translateY(5px);
  48.         }
  49.         .btn::after{
  50.             content:'';
  51.             position:absolute;
  52.             width:100%;
  53.             height:10px;
  54.             background:#000;
  55.             transition:.3s;
  56.             bottom:-10px;
  57.             transform:skewX(-45deg) translateX(-5px);
  58.         }
  59.     </style>
  60. </head>
  61. <body>
  62.     <a href="" class="btn">按钮</a>
  63. </body>
  64. </html>

 

 

2D变形参考点使用：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.  
  7.     <style>
  8.         *{
  9.             margin:0;
  10.             padding:0;
  11.             box-sizing:border-box;
  12.         }
  13.       main{
  14.             width:400px;
  15.             height:400px;
  16.             border:1px solid silver;
  17.             position:absolute;
  18.             top:50%;
  19.             left:50%;
  20.             margin-top:-200px;
  21.             margin-left:-200px;
  22.         }
  23.         div{
  24.             width:200px;
  25.             height:200px;
  26.             position:absolute;
  27.             top:50%;
  28.             left:50%;
  29.             margin-top:-100px;
  30.             margin-left:-100px;
  31.             transform-origin:center center;
  32.             transform-origin:left top;
  33.             transform-origin:right bottom;
  34.             transform-origin:left center;
  35.             transform-origin:0 0;
  36.             transform-origin:200% 200%;
  37.             transform-origin:left bottom;
  38.         }
  39.         div:nth-child(1){
  40.             background:pink;
  41.         }
  42.         div:nth-child(2){
  43.             background:lightblue;
  44.             transition:1s;
  45.         }
  46.         main:hover div:nth-child(2){
  47.             transform:rotate(145deg);
  48.             transform:skew(-45deg);
  49.         }
  50.     </style>
  51. </head>
  52. <body>
  53.     <main>
  54.         <div></div>
  55.         <div></div>
  56.     </main>
  57. </body>
  58. </html>

 

 

3D变形参考点：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.  
  7.     <style>
  8.         *{
  9.             margin:0;
  10.             padding:0;
  11.             box-sizing:border-box;
  12.         }
  13.       main{
  14.             width:400px;
  15.             height:400px;
  16.             border:1px solid silver;
  17.             position:absolute;
  18.             top:50%;
  19.             left:50%;
  20.             margin-top:-200px;
  21.             margin-left:-200px;
  22.             /* 透视加在父容器上 */
  23.             transform-style:preserve-3d;
  24.             transform:perspective(900px) rotateY(45deg) rotateX(45deg);
  25.         }
  26.         div{
  27.             width:200px;
  28.             height:200px;
  29.             position:absolute;
  30.             top:50%;
  31.             left:50%;
  32.             margin-top:-100px;
  33.             margin-left:-100px;
  34.             transform-origin:center center;
  35.             transform-origin:left top;
  36.             transform-origin:right bottom;
  37.             transform-origin:right bottom 100px;
  38.         }
  39.         div:nth-child(1){
  40.             background:pink;
  41.         }
  42.         div:nth-child(2){
  43.             background:lightblue;
  44.             transition:1s;
  45.         }
  46.         main:hover div:nth-child(2){
  47.             transform:rotateY(145deg);
  48.             /* transform:skew(-45deg); */
  49.         }
  50.     </style>
  51. </head>
  52. <body>
  53.     <main>
  54.         <div></div>
  55.         <div></div>
  56.     </main>
  57. </body>
  58. </html>

 

 

 

3D新年快乐贺卡制作：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.  
  7.     <style>
  8.         *{
  9.             margin:0;
  10.             padding:0;
  11.             box-sizing:border-box;
  12.         }
  13.         body{
  14.             width:100vw;
  15.             height:100vh;
  16.             display:flex;
  17.             justify-content:center;
  18.             align-items:center;
  19.             background:#ddd;
  20.         }
  21.         .card{
  22.             width:300px;
  23.             height:200px;
  24.             display:flex;
  25.             justify-content:center;
  26.             align-items:center;
  27.             background:pink;
  28.             color:#555;
  29.             position:relative;
  30.             transform-style:preserve-3d;
  31.             transform:perspective(900px) rotateX(45deg);
  32.             
  33.  
  34.         }
  35.         .card::before,.card::after{
  36.             
  37.             position:absolute;
  38.             width:50%;
  39.             height:100%;
  40.             background:lightblue;
  41.             transition:1s;
  42.             box-sizing:border-box;
  43.         }
  44.         .card::before{
  45.             content:'生日';
  46.             left:0;
  47.             top:0;
  48.             display:flex;
  49.             justify-content:flex-end;
  50.             align-items:center;
  51.             transform-origin:left;
  52.             border-right:2px solid #333;
  53.             padding-right:2px;
  54.             
  55.             
  56.         }
  57.         .card::after{
  58.             content:'快乐';
  59.             right:0;
  60.             top:0;
  61.             display:flex;
  62.             justify-content:flex-start;
  63.             align-items:center;
  64.             transform-origin:right;
  65.             border-left:2px solid #333;
  66.             padding-left:2px;
  67.         }
  68.         .card:hover::before{
  69.             transform:rotateY(-180deg);
  70.         }
  71.         .card:hover::after{
  72.             transform:rotateY(180deg);
  73.         }
  74.     </style>
  75. </head>
  76. <body>
  77.     <div class="card">美少女cyy</div>
  78. </body>
  79. </html>

 

纯css3电子时钟绘制表盘：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.  
  7.     <style>
  8.         *{
  9.             margin:0;
  10.             padding:0;
  11.             box-sizing:border-box;
  12.         }
  13.         body{
  14.             width:100vw;
  15.             height:100vh;
  16.             display:flex;
  17.             justify-content:center;
  18.             align-items:center;
  19.             background:#01547a;
  20.         }
  21.         main{
  22.             width:400px;
  23.             height:400px;
  24.             border-radius:50%;
  25.             position:relative;
  26.         }
  27.         .clock{
  28.             width:400px;
  29.             height:400px;
  30.             border-radius:50%;
  31.             background-image:linear-gradient(to right,#ffeb3b,#ff9800,#ff5722);
  32.             position:relative;
  33.             z-index:-2;
  34.         }
  35.         .clock::after{
  36.             content:'';
  37.             position:absolute;
  38.             width:90%;
  39.             height:90%;
  40.             left:50%;
  41.             top:50%;
  42.             transform:translate(-50%,-50%);
  43.             background:#01547a;
  44.             border-radius:50%;
  45.             z-index:-1;
  46.         }
  47.         .line{
  48.             width:80%;
  49.             height:80%;
  50.             left:50%;
  51.             top:50%;
  52.             transform:translate(-50%,-50%);
  53.             position:absolute;
  54.             /* background:black; */
  55.             border-radius:50%;
  56.         }
  57.         .line::before{
  58.             content:'';
  59.             width:90%;
  60.             height:90%;
  61.             background:#01547a;
  62.             position:absolute;
  63.             left:50%;
  64.             top:50%;
  65.             transform:translate(-50%,-50%);
  66.             border-radius:50%;
  67.             z-index:2;
  68.         }
  69.         .line::after{
  70.             content:'';
  71.             width:20px;
  72.             height:20px;
  73.             background:white;
  74.             position:absolute;
  75.             left:50%;
  76.             top:50%;
  77.             transform:translate(-50%,-50%);
  78.             border-radius:50%;
  79.             z-index:2;
  80.         }
  81.         .line>div{
  82.             width:8px;
  83.             height:100%;
  84.             position:absolute;
  85.             background:white;
  86.             left:50%;
  87.             transform:translateX(-50%);
  88.         }
  89.         .line>div:nth-child(1){
  90.             transform:translateX(-50%) rotate(30deg);
  91.         }
  92.         .line>div:nth-child(2){
  93.             transform:translateX(-50%) rotate(60deg);
  94.         }
  95.         .line>div:nth-child(3){
  96.             transform:translateX(-50%) rotate(90deg);
  97.         }
  98.         .line>div:nth-child(4){
  99.             transform:translateX(-50%) rotate(120deg);
  100.         }
  101.         .line>div:nth-child(5){
  102.             transform:translateX(-50%) rotate(150deg);
  103.         }
  104.         .line>div:nth-child(6){
  105.             transform:translateX(-50%) rotate(180deg);
  106.         }
  107.         .hour{
  108.             width:8px;
  109.             height:15%;
  110.             bottom:50%;
  111.             position:absolute;
  112.             background:white;
  113.             left:50%;
  114.             transform:translateX(-50%);
  115.             transform-origin:bottom;
  116.             transition:10s;
  117.         }
  118.         .minutes{
  119.             width:5px;
  120.             height:25%;
  121.             bottom:50%;
  122.             position:absolute;
  123.             background:white;
  124.             left:50%;
  125.             transform:translateX(-50%) rotate(60deg);
  126.             transform-origin:bottom;
  127.             transition:10s;
  128.         }
  129.         .seconds{
  130.             width: 1px;
  131.             height:35%;
  132.             bottom:50%;
  133.             position:absolute;
  134.             background:white;
  135.             left:50%;
  136.             transform:translateX(-50%) rotate(120deg);
  137.             transform-origin:bottom;
  138.             transition:10s;
  139.         }
  140.         main:hover .seconds{
  141.             transform:translateX(-50%) rotate(360deg);
  142.         }
  143.     </style>
  144. </head>
  145. <body>
  146.     <main>
  147.         <div class="clock">
  148.             <div class="line">
  149.                 <div></div>
  150.                 <div></div>
  151.                 <div></div>
  152.                 <div></div>
  153.                 <div></div>
  154.                 <div></div>
  155.             </div>
  156.             <div class="hour"></div>
  157.             <div class="minutes"></div>
  158.             <div class="seconds"></div>
  159.         </div>
  160.     </main>
  161. </body>
  162. </html>

 

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  7.  
  8.     <style>
  9.         *{
  10.             margin:0;
  11.             padding:0;
  12.             box-sizing:border-box;
  13.             list-style:none;
  14.         }
  15.         body{
  16.             width:100vw;
  17.             height:100vh;
  18.             display:flex;
  19.             justify-content:center;
  20.             align-items:center;
  21.             background:#01547a;
  22.         }
  23.         nav{
  24.             width:200px;
  25.             height:200px;
  26.             background:#ff9800;
  27.             border-radius:50%;
  28.             position:relative;
  29.             display:flex;
  30.             justify-content:center;
  31.             align-items:center;
  32.             cursor:pointer;
  33.         }
  34.         nav::after{
  35.             content:'cyy';
  36.             font-size:3em;
  37.             color:white;
  38.         }
  39.         nav:hover ul{
  40.             transform:translate(-50%,-50%) scale(1);
  41.         }
  42.         ul{
  43.             transition:.5s;
  44.             width:300px;
  45.             height:300px;
  46.             /* border:1px solid black; */
  47.             position:absolute;
  48.             left:50%;
  49.             top:50%;
  50.             transform:translate(-50%,-50%) scale(0);
  51.         }
  52.         li{
  53.             width:80px;
  54.             height:80px;
  55.             background:#ff9800;
  56.             border-radius:50%;
  57.             position:absolute;
  58.             display:flex;
  59.             justify-content:center;
  60.             align-items:center;
  61.             color:white;
  62.             font-size:2em;
  63.             transition:1s;
  64.             transform-origin:150px 150px;
  65.  
  66.         }
  67.         ul:hover li:nth-child(1){
  68.             transform:rotate(40deg);
  69.         }
  70.         ul:hover li:nth-child(1) span{
  71.             transform:rotate(320deg);
  72.         }
  74.         ul:hover li:nth-child(2){
  75.             transform:rotate(80deg);
  76.         }
  77.         ul:hover li:nth-child(2) span{
  78.             transform:rotate(640deg);
  79.         }
  81.         ul:hover li:nth-child(3){
  82.             transform:rotate(120deg);
  83.         }
  84.         ul:hover li:nth-child(3) span{
  85.             transform:rotate(960deg);
  86.         }
  88.         ul:hover li:nth-child(4){
  89.             transform:rotate(160deg);
  90.         }
  91.         ul:hover li:nth-child(4) span{
  92.             transform:rotate(1280deg);
  93.         }
  95.         ul:hover li:nth-child(5){
  96.             transform:rotate(200deg);
  97.         }
  98.         ul:hover li:nth-child(5) span{
  99.             transform:rotate(1600deg);
  100.         }
  102.         ul:hover li:nth-child(6){
  103.             transform:rotate(240deg);
  104.         }
  105.         ul:hover li:nth-child(6) span{
  106.             transform:rotate(1920deg);
  107.         }
  109.         ul:hover li:nth-child(7){
  110.             transform:rotate(280deg);
  111.         }
  112.         ul:hover li:nth-child(7) span{
  113.             transform:rotate(2240deg);
  114.         }
  116.         ul:hover li:nth-child(8){
  117.             transform:rotate(320deg);
  118.         }
  119.         ul:hover li:nth-child(8) span{
  120.             transform:rotate(2560deg);
  121.         }
  123.         ul:hover li:nth-child(9){
  124.             transform:rotate(360deg);
  125.         }
  126.         ul:hover li:nth-child(9) span{
  127.             transform:rotate(3240deg);
  128.         }
  129.  
  130.     </style>
  131. </head>
  132. <body>
  133.     <nav>
  134.         <ul>
  135.             <li><span>后</span></li>
  136.             <li><span><i class="fa fa-h-square" aria-hidden="true"></i></span></li>
  137.             <li><span><i class="fa fa-address-book" aria-hidden="true"></i></span></li>
  138.             <li><span>盾</span></li>
  139.             <li><span><i class="fa fa-calculator" aria-hidden="true"></i></span></li>
  140.             <li><span><i class="fa fa-dashcube" aria-hidden="true"></i></span></li>
  141.             <li><span>人</span></li>
  142.             <li><span><i class="fa fa-eercast" aria-hidden="true"></i></span></li>
  143.             <li><span><i class="fa fa-h-square" aria-hidden="true"></i></span></li>
  144.         </ul>
  145.     </nav>
  146. </body>
  147. </html>

原文链接：http://www.cnblogs.com/chenyingying0/p/13956622.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

CSS热门文章

  • CSS实现文字两端对齐
  • 【WEB基础】HTML & CSS 基础入门（6）超链接
  • Javascript 对象 - 数学对象
  • 对移动端兼容适配的分析
  • Element FORM结合Vue实现横向排列表单项
  • 如何让一个input输入框居中
  • CSS Grid 布局完全指南(图解 Grid 详细教程)
  • css常见的各种布局上（两列布局）
  • vue+element导入导出excel
  • WEB前端动态背景集

    • CSS推荐文章

  • CSS布局概念与技术教程
  • 15 分钟带你感受 CSS :has() 选择器的强大 - xingba-coder
  • 现代 CSS 解决方案：文字颜色自动适配背景色！
  • 脚踏esbuild祥云，胸怀tsx利刃，身披scss羽衣，追寻前端的本质
  • 深入解析css-笔记
  • CSS 还原拉斯维加斯球数字动画
  • 震惊！CSS 也能实现碰撞检测？
  • 前端开发如何更好的避免样式冲突？级联层(CSS@layer)
  • 现代 CSS 解决方案：CSS 原生支持的三角函数
  • 利用css var函数让你的组件样式输出规范样式API，可定制性更高；

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号