devbox
你好赵伟
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【带给你不一样的思路】纯 CSS + HTML 实现几个好看的案例_好看的html css代码

作者：你好赵伟 | 2024-02-29 17:28:30

赞

踩

好看的html css代码

1.六边形战士

        像这种多边形案例的实现，很多小朋友都会采用调整角度的方法慢慢调，但是着这种方法真的会很麻烦，甚至我们的角度计算还会用到勾股定理，勾股定理是啥，啊？？不过放心，今天带给大家一个新的思路，拼接。

        实现原理：将我们的多边形分成两半，采用定位的方式进行拼接，只需要折合两个非常简单的角度即可，废话不多说，直接上代码。

        代码示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         * {
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  13.  
  14.         div {
  15.             transform-style: preserve-3d;
  16.             width: 600px;
  17.             height: 600px;
  18.             margin: 400px;
  19.             position: relative;
  20.             transform: rotate3d(1, 1, 1, 0deg);
  21.             perspective: 1000px;
  22.             animation: rotate 5s linear 10s infinite;
  23.         }
  24.  
  25.         .one {
  26.             transform-style: preserve-3d;
  27.             width: 200px;
  28.             height: 200px;
  29.             list-style: none;
  30.             font-size: 30px;
  31.             line-height: 200px;
  32.             text-align: center;
  33.             font-weight: bolder;
  34.             transform: rotate3d(1, 1, 1, 0deg);
  35.  
  36.             background-size: contain;
  37.         }
  38.  
  39.         .two {
  40.             position: absolute;
  41.             top: 0;
  42.             left: 0;
  43.             transform-style: preserve-3d;
  44.             width: 200px;
  45.             height: 200px;
  46.             list-style: none;
  47.             font-size: 30px;
  48.             line-height: 200px;
  49.             text-align: center;
  50.             font-weight: bolder;
  51.             transform: rotate3d(1, 1, 1, 0deg);
  52.             transition: top 3s linear 0s;
  53.         }
  54.  
  55.         li {
  56.             width: 200px;
  57.             height: 200px;
  58.             background-color: antiquewhite;
  59.             position: absolute;
  60.             transition: transform 5s linear 3s;
  61.             background-size: contain;
  62.         }
  63.  
  64.         .one li:nth-child(1) {
  65.             background-image: url(images-follow/flower4.jpg);
  66.         }
  67.  
  68.         .one li:nth-child(2) {
  69.             background-image: url(images-follow/flower1.jpg);
  70.         }
  71.  
  72.         .one li:nth-child(3) {
  73.             background-image: url(images-follow/flower2.jpg);
  74.         }
  75.  
  76.         .two li:nth-child(1) {
  77.             background-image: url(images-follow/flower10.jpg);
  78.         }
  79.  
  80.         .two li:nth-child(2) {
  81.             background-image: url(images-follow/flower11.jpg);
  82.         }
  83.  
  84.         .two li:nth-child(3) {
  85.             background-image: url(images-follow/flower12.jpg);
  86.         }
  87.  
  88.         div:hover .one li:nth-child(1) {
  89.             transform: rotateX(90deg);
  90.         }
  91.  
  92.         div:hover .one li:nth-child(2) {
  93.             transform-origin: 0 100px;
  94.             transform: rotateX(90deg) translateX(200px) rotateY(60deg);
  95.         }
  96.  
  97.         div:hover .one li:nth-child(3) {
  98.             transform-origin: 200px 100px;
  99.             transform: rotateX(90deg) translateX(-200px) rotateY(-60deg);
  100.         }
  101.  
  102.         div:hover .two li:nth-child(1) {
  103.             transform: rotateX(90deg);
  104.         }
  105.  
  106.         div:hover .two li:nth-child(2) {
  107.             transform-origin: 200px 100px;
  108.             transform: rotateX(90deg) translateX(-200px) rotateY(60deg);
  109.         }
  110.  
  111.         div:hover .two li:nth-child(3) {
  112.             transform-origin: 0 100px;
  113.             transform: rotateX(90deg) translateX(200px) rotateY(-60deg);
  114.         }
  115.  
  116.         div:hover .two {
  117.             top: 345px
  118.         }
  119.  
  120.         @keyframes rotate {
  121.             from {
  122.                 transform: rotate3d(1, 1, 1, 0deg);
  123.             }
  124.  
  125.             to {
  126.                 transform: rotate3d(1, 1, 1, 360deg);
  127.             }
  128.         }
  129.     </style>
  130. </head>
  131.  
  132. <body>
  133.     <div>
  134.         <ul class="one">
  135.             <li></li>
  136.             <li></li>
  137.             <li></li>
  138.         </ul>
  139.         <ul class="two">
  140.             <li></li>
  141.             <li></li>
  142.             <li></li>
  143.         </ul>
  144.     </div>
  145. </body>
  146.  
  147. </html>

   注意事项，这个六边形有点叛逆，需要鼠标滑动上去才能展示它的魅力，整体实现思路也能通过动画展示出来，赶紧试试吧。

2.水波文字

        实现原理：背景定位 + 我们的动画 + 背景裁切

        代码示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         div{
  9.             margin: 0 auto;
  10.             text-align: center;
  11.             width: 600px;
  12.             height: 600px;
  13.             background-color: gainsboro;
  14.         }
  15.         h1{
  16.             font-size: 10em;
  17.             padding-top: 100px;
  18.             color: rgba(0, 0, 0,.1);
  19.             background-image: url(images/17.jpg) ;
  20.             background-repeat: repeat-x; 
  21.             background-position: -100px -20px;
  22.             -webkit-background-clip: text;
  23.             animation: move 15s linear infinite;
  24.         }
  25.         @keyframes move{
  26.             0%{
  27.                 background-position: 40px -20px;
  28.             }
  29.             20%{
  30.                 background-position: 80px -50px;
  31.             }
  32.             40%{
  33.                 background-position: 120px -20px;
  34.             }
  35.             80%{
  36.                 background-position: 180px -50px;
  37.             }
  38.             100%{
  39.                 background-position: 220px -20px;
  40.             }  
  41.         }
  42.     </style>
  43. </head>
  44. <body>
  45.     <div>
  46.         <h1>WATER</h1>
  47.     </div>
  48. </body>
  49. </html>

   注意事项：这里的图片使用的是自己的图片，背景图片可以找一个自己喜欢的水波纹效果，换一下即可。

3.美女

        这种小案例是我们最常见的一种，看起来非常的炫酷，鼠标放上去会有放大效果，是不是可以等你女哦嗯有过生日的时候，发一个这个给她呢，也算是一个惊喜吧哈哈哈哈！！！

        实现原理：3D 旋转 + 背景图片

        代码示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         ul {
  10.             position: absolute;
  11.             top: 50%;
  12.             left: 50%;
  13.             margin-top: -260px;
  14.             margin-left: -260px;
  15.             transform-style: preserve-3d;
  16.             width: 520px;
  17.             height: 520px;
  18.             list-style: none;
  19.             animation: rotate 5s linear infinite;
  20.             cursor: pointer;
  21.         }
  22.  
  23.         li {
  24.             position: absolute;
  25.             left: 50%;
  26.             top: 50%;
  27.             background-size: contain;
  28.         }
  29.  
  30.         .one li {
  31.             width: 100px;
  32.             height: 100px;
  33.             margin-top: -50px;
  34.             margin-left: -50px;
  35.         }
  36.  
  37.         .two li {
  38.             width: 200px;
  39.             height: 200px;
  40.             margin-top: -100px;
  41.             margin-left: -100px;
  42.             opacity: 0.1;
  43.             transition: all .3s linear 0s;
  44.         }
  45.  
  46.         .one li:nth-child(1) {
  47.             transform: translateZ(50px);
  48.             background-image: url(images/01.png);
  49.         }
  50.  
  51.         .one li:nth-child(2) {
  52.             transform: rotateY(-90deg) translateZ(50px);
  53.             background-image: url(images/02.png);
  54.         }
  55.  
  56.         .one li:nth-child(3) {
  57.             transform: rotateX(90deg) translateZ(50px);
  58.             background-image: url(images/03.png);
  59.         }
  60.  
  61.         .one li:nth-child(4) {
  62.             transform: rotateX(-90deg) translateZ(50px);
  63.             background-image: url(images/04.png);
  64.         }
  65.  
  66.         .one li:nth-child(5) {
  67.             transform: rotateY(90deg) translateZ(50px);
  68.             background-image: url(images/05.png);
  69.         }
  70.  
  71.         .one li:nth-child(6) {
  72.             transform: rotateY(180deg) translateZ(50px);
  73.             background-image: url(images/06.png);
  74.         }
  75.  
  76.  
  77.         .two li:nth-child(1) {
  78.             transform: translateZ(100px) scale(1);
  79.             background-image: url(images/1.png);
  80.  
  81.         }
  82.  
  83.         .two li:nth-child(2) {
  84.             transform: rotateY(-90deg) translateZ(100px) scale(1);
  85.             background-image: url(images/2.png);
  86.         }
  87.  
  88.         .two li:nth-child(3) {
  89.             transform: rotateX(90deg) translateZ(100px) scale(1);
  90.             background-image: url(images/3.png);
  91.         }
  92.  
  93.         .two li:nth-child(4) {
  94.             transform: rotateX(-90deg) translateZ(100px) scale(1);
  95.             background-image: url(images/4.png);
  96.         }
  97.  
  98.         .two li:nth-child(5) {
  99.             transform: rotateY(90deg) translateZ(100px) scale(1);
  100.             background-image: url(images/5.png);
  101.         }
  102.  
  103.         .two li:nth-child(6) {
  104.             transform: rotateY(-180deg) translateZ(100px) scale(1);
  105.             background-image: url(images/6.png);
  106.         }
  107.  
  108.         ul:hover li:nth-child(6) {
  109.             transform: rotateY(-180deg) translateZ(300px) scale(2);
  110.             background-image: url(images/6.png);
  111.         }
  112.  
  113.         ul:hover li:nth-child(5) {
  114.             transform: rotateY(90deg) translateZ(300px) scale(2);
  115.             background-image: url(images/5.png);
  116.         }
  117.  
  118.         ul:hover li:nth-child(4) {
  119.             transform: rotateX(-90deg) translateZ(300px) scale(2);
  120.             background-image: url(images/4.png);
  121.         }
  122.  
  123.         ul:hover li:nth-child(3) {
  124.             transform: rotateX(90deg) translateZ(300px) scale(2);
  125.             background-image: url(images/3.png);
  126.         }
  127.  
  128.         ul:hover li:nth-child(2) {
  129.             transform: rotateY(-90deg) translateZ(300px) scale(2);
  130.             background-image: url(images/2.png);
  131.         }
  132.  
  133.         ul:hover li:nth-child(1) {
  134.             transform: translateZ(300px) scale(2);
  135.             background-image: url(images/1.png);
  136.         }
  137.  
  138.         @keyframes rotate {
  139.             from {
  140.                 transform: rotate3d(0, 1, 1, 0deg);
  141.             }
  142.  
  143.             to {
  144.                 transform: rotate3d(0, 1, 1, 360deg);
  145.             }
  146.         }
  147.     </style>
  148. </head>
  149.  
  150. <body>
  151.     <ul class="one" id="box1">
  152.         <li></li>
  153.         <li></li>
  154.         <li></li>
  155.         <li></li>
  156.         <li></li>
  157.         <li></li>
  158.     </ul>
  159.     <ul class="two" id="box2">
  160.         <li></li>
  161.         <li></li>
  162.         <li></li>
  163.         <li></li>
  164.         <li></li>
  165.         <li></li>
  166.     </ul>
  167. </body>
  168.  
  169. </html>

  注意事项：图片由于是本地图片，会导致复制代码运行没有图片展示，大家可以将自己的图片进行一个替换就能够看到自己想要的效果了，快去拿你女朋友试试吧。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/167151
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号