css经典案例---

已于 2024-08-26 08:26:46 修改
阅读量146 收藏
点赞数 1
文章标签： css 前端 css3
于 2024-08-24 16:36:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mmkyyy/article/details/141501283
版权

1.骰子

<head>  
<style>
        .all{
            display: flex;
            flex-wrap: wrap;
        }
        /* 一 */
        .one{
            width: 200px;
            height: 200px;
            border: 1px solid #000 ;
            border-radius: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .one .circle{
            width: 50px;
            height: 50px;
            background-color: #000;
            border-radius: 50%;

        }
        /* 二 */
        .two{
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            border-radius: 30px;
            display: flex;
            justify-content: space-between;
          
        }
        .two .circle{
            width: 50px;
            height: 50px;
            background-color: #000;
            border-radius: 50%;
            margin: 10px;
        }
      
       .two .twosecend{
        display: flex;
        align-items: flex-end;

       }
       /* 三 */
       .three{
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            border-radius: 30px;
        }
        .three .circle{
            width: 50px;
            height: 50px;
            background-color: #000;
            border-radius: 50%;
            margin: 10px;
        }
        .three .threefirst{
            height: 33%;
            display: flex;
        }
        .three .threesecend{
            height: 33%;
            display: flex;
            justify-content: center;
        }
        .three .threethird{
            height: 33%;
            display: flex;
            justify-content: flex-end;
        }
        /* 四 */
        .four{
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            border-radius: 30px;
            display: flex;
            flex-wrap: wrap;
            align-content: space-between;

        }
        .four .circle{
            width: 50px;
            height: 50px;
            background-color: #000;
            border-radius: 50%;
            margin: 10px;
            display: inline-block;
            
        }
        .four .fourfirst{
            width: 100%;
            display: flex;
            justify-content: space-between;
        }
        .four .foursecend{
            width: 100%;
            display: flex;
            justify-content: space-between;
        }
        /* 五 */
        .five{
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            border-radius: 30px;
            display: flex;
            flex-wrap: wrap;
            align-content: space-between;

        }
        .five .circle{
            width: 50px;
            height: 50px;
            background-color: #000;
            border-radius: 50%;
            margin: 10px;
            display: inline-block;
            
        }
        .five .fivefirst{
            width: 100%;
            height: 33%;
            display: flex;
            justify-content: space-between;
        }
        .five .fivesecend{
            width: 100%;
            height: 33%;
            display: flex;
            justify-content: center;
        }
        .five .fivethird{
            width: 100%;
            height: 33%;
            display: flex;
            justify-content: space-between;
        }
        /* 六 */
        .six{
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            border-radius: 30px;
            display: flex;
            flex-wrap: wrap;
            align-content: space-between;
            

        }
        .six .circle{
            width: 50px;
            height: 50px;
            background-color: #000;
            border-radius: 50%;
            display: inline-block;
            margin: 5px;
            
        }
        .six .sixfirst{
            width: 100%;
            display: flex;
            justify-content: space-evenly;
        }
        .six .sixsecend{
            width: 100%;
            display: flex;
            justify-content: space-evenly;
        }
    </style>
</head>

<body>
<div class="all">
    <!-- 一 -->
    <div class="one">
        <div class="circle"></div>
    </div>
    <!-- 二 -->
    <div class="two">
            <div class="circle"></div>
        <div class="twosecend">
            <div class="circle"></div>
        </div>
    </div>
    <!-- 三 -->
    <div class="three">
        <div class="threefirst">
            <div class="circle"></div>
        </div>
         <div class="threesecend">
            <div class="circle"></div>
         </div>
         <div class="threethird">
            <div class="circle"></div>
         </div>
    </div>
    <!-- 四 -->
    <div class="four">
        <div class="fourfirst">
            <div class="circle"></div>
            <div class="circle"></div>
        </div>
         <div class="foursecend">
            <div class="circle"></div>
            <div class="circle"></div>
         </div>
    </div>
    <!-- 五 -->
    <div class="five">
        <div class="fivefirst">
            <div class="circle"></div>
            <div class="circle"></div>
        </div>
         <div class="fivesecend">
            <div class="circle"></div>
         </div>
         <div class="fivethird">
            <div class="circle"></div>
            <div class="circle"></div>
         </div>
    </div>
    <!-- 六 -->
    <div class="six">
        <div class="sixfirst">
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
        </div>
         <div class="sixsecend">
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
         </div>
    </div>
    </div>
</body>

 2.光斑+文字裁切


<head> 
<style>
        body{
            background-color: #333;
        }
        .box{
            width: 600px;
            height: 300px;
            border: 20px solid #ccc;
            margin: 0 auto ;
            font-size: 80px;
            font-weight: bold;
            text-align: center;
            line-height: 300px;
            background-image:linear-gradient(to right, rgba(255,0,0,0) 0,#fff 2%,#fff 4% ,rgba(255,0,0,0) 6% ),url(./img/bg.jpg);
            background-clip: text;
            color: transparent;
            transition: all 1s;
        }
       .box:hover{
            background-position: 580px 0,0 0; 
        } 
    </style>
</head>
<body>
    <div class="box">
        这个杀手不太冷
    </div>
</body>
</html>

 3.跳动的心❤

<html>
<head>  
<style>
        body{
            background-color: pink;
            animation: body 1s infinite linear;
            
    
        }
        @-webkit-keyframes body{
            0%{
                background-color: pink;
            }
            100%{
                background-color: lightblue;
            }
        }
        .love1{
            width: 300px;
            height: 300px;
            background-color: red;
            transform: rotate(45deg);
            margin: 200px auto;
            border: 1px solid red;
            animation: one 1s ease-in;
            animation-iteration-count: infinite ;
        
        }
        @-webkit-keyframes one{
            
            50%{
                transform:rotate(45deg) scale(1.2);
                
                
            }
        }
     
        .love1::before{
            content: "";
            width: 300px;
            height: 300px;
            background-color: red;
            position: absolute;
            top: 0;
            left: -150px;
            border-radius: 50%;

        }
        .love1::after{
            content: "";
            width: 300px;
            height: 300px;
            background-color: red;
            position: absolute;
            top: -150px;
            left: 0;
            border-radius: 50%;

        }
        .love2{
            width: 200px;
            height: 200px;
            background-color: green;
            position: relative;
            z-index: 2;
            border: 1px solid green;
            transform: rotate(45deg);
            position: absolute;
            top: 245px;
            left: 635px;
            animation: two 1s ease-out;
            animation-iteration-count: infinite ;
            
        }
        @-webkit-keyframes two{
            50%{
                transform:rotate(45deg) scale(1.2);
                
            }
        }
        .love2::before{
            content: "";
            width: 200px;
            height: 200px;
            background-color: green;
            position: absolute;
            top: 0;
            left: -100px;
            border-radius: 50%;
        }
        .love2::after{
            content: "";
            width: 200px;
            height: 200px;
            background-color: green;
            position: absolute;
            top: -100px;
            left: 0;
            border-radius: 50%;
        }
        .love3{
            width: 100px;
            height: 100px;
            z-index: 3;
            position: relative;
            background-color: blue;
            transform: rotate(45deg);
            position: absolute;
            left: 685px;
            top: 305px;
            animation: three 1s ease-in-out;
            animation-iteration-count: infinite ;
        }
        @-webkit-keyframes three{
            50%{
                transform:rotate(45deg) scale(1.2);
                
                
            }
        }
        .love3::before{
            content: "";
            width: 100px;
            height: 100px;
            background-color: blue;
            position: absolute;
            top: 0;
            left: -50px;
            border-radius: 50%;
        }
        .love3::after{
            content: "";
            width: 100px;
            height: 100px;
            background-color: blue;
            position: absolute;
            top: -50px;
            left: 0;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div class="love1"> </div>
    <div class="love2"> </div>
    <div class="love3"></div>
</body>
</html>

4.西游记

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: 0 ;
            padding: 0;
        }
        .box{
            width: 100%;
            height: 100vh;
            background:url(./img/10.jpg);
            background-repeat: repeat-x;
            animation: box 20s infinite linear ;
           position: relative;
        }
        @-webkit-keyframes box{
           0%{
            background-position: 0 0;
           }
           100%{
            background-position: 1920px 0;
           }
        }
        .wk{
            width: 200px;
            height: 180px;
            background-image: url(./img/1.png);
            position: absolute;
            top: 390px;
            left: 202px;
        animation: one steps(8,start)  1s infinite;
        }
        .bj{
            width: 200px;
            height: 180px;
            background-image: url(./img/2.png);
            position: absolute;
            top: 390px;
            left: 390px;
        animation: one steps(8,start)  1s infinite;
        }
        .ts{
            width: 170px;
            height: 240px;
            background-image: url(./img/3.png);
            position: absolute;
            top: 360px;
            left: 600px;
             animation: two steps(8,start)  1s infinite;
        }
        .swk{
            width: 210px;
            height: 200px;
            background-image: url(./img/4.png);
            position: absolute;
            top: 390px;
            left: 800px;
        animation: three steps(8,start)  1s infinite;
        }
        @-webkit-keyframes one{
            0%{
            background-position: 0 0;
           }
           100%{
            background-position: -1600px 0;
           }
        }
        @-webkit-keyframes two{
            0%{
            background-position: 0 0;
           }
           100%{
            background-position: -1360px 0;
           }
        }
        @-webkit-keyframes three{
            0%{
            background-position: 0 0;
           }
           100%{
            background-position: -1680px 0;
           }
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="wk"></div>
        <div class="bj"></div>
        <div class="ts"></div>
        <div class="swk"></div>
    </div>
</body>
</html>

mmkyyy
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS---定位练习经典案例
qq_43766304的博客
03-10 515
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compat...
HTML&CSS案例---咖啡店
qq_45021462的博客
07-13 5571
HTML&CSS案例—咖啡店 最终页面效果 页面结构为：最上面header是一个头部，主要是一张图片；下面的nav是一个导航栏，包含五个链接；下面是主体部分，左侧的上面是一个表格，下面是四张图片，当鼠标放到图片上会有一个放大的效果，右侧有4个div是四种咖啡的详细介绍；最下面有一个脚本。具体代码如下； HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l
html+css经典案例--时间轴
weixin_54106682的博客
06-27 1098
css浮动和定位相关知识案例
CSS布局大全-案例
huang714的专栏
12-10 2388
CSS布局大全 前几天面试，问我某布局感觉回答不是很OK所以研究了一下各种布局。 一、单列布局 1.普通布局（头部、内容、底部） <div class="container"> <header></header> <div class="content"></div> <footer></footer> </div> .co.
-CSS-笔记-
April_Aimer的博客
02-07 2169
目标: 学会使用CSS选择器 熟记CSS样式和外观属性 熟练掌握CSS各种选择器 熟练掌握CSS各种选择器 熟练掌握CSS三种显示模式 熟练掌握CSS背景属性 熟练掌握CSS三大特性 熟练掌握CSS盒子模型 熟练掌握CSS浮动 10.熟练掌握CSS定位 11.熟练掌握CSS高级技巧强化CSS typora-copy-images-to: media CSS的发展历程 从HTML被发明开...
CSS经典练习题-餐厅练习
qq_45623543的博客
10-20 6163
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 餐厅选择器题目目录前言二、参考答案以及解释第 1关：Type Selector第2关：Type Selector第3关：ID Selector第4关：Descendant Selector第5关：Combine the Descendant & ID Selectors第6关：Class Selector第7关：Combine the Class Selector第8关：子元素选择器+交集选择器总结 前言 CSS经典案例：餐厅练习
CSS基础 ---flex弹性布局
m0_52173534的博客
11-05 2167
CSS基础—flex弹性布局 一、了解flex布局 1.1 什么是flex布局 flex布局又叫弹性布局，顾名思义弹性布局可以使盒子变得有弹性可以伸缩，这样说不容易理解，直接进入实例来了解flex布局 1.2 弹性布局的使用场景 简单来说，弹性布局可以使盒子变得有弹性，可以让盒子可以进行伸缩， 想让一个盒子内的元素水平排列，并且均匀分布就可以使用flex布局 flex布局也可以使元素竖直排列，分布方式可以自己随意选择，来看看flex布局的属性，来更清楚他的作用 1.3 flex布局怎么使用 flex是di.
前端三剑客之 CSS - JavaEE初阶 - 细节狂魔
2401_84438654的博客
05-01 898
1、内部样式表这种就是通过 style 标签，来写 CSS。这种方式不太常见。但如果是一些比较简单的CSS，这么写也没毛病。比如：搜狗搜索里面的CSS代码，就是 这么写的。另外，前面收到的经典案例就是一个内部样式的写法。也就是当前的 style标签中，对 p标签的添加的属性 是针对当前HTML文件中的所有 p 标签。也就是说，接下来的 p标签的内容都是红色颜色。2、内联样式 / 行内样式表通过 HTML 标签中的 style 属性，来应用一些样式。保存刷新。
案例-前端web
qq_58476985的博客
12-27 646
链接：https://pan.baidu.com/s/1UwnVpj2Yn00vQQBlIJcWKA?
经典CSS案例_前端开发_实战案例-炉石传说官方网站纯CSS.rar
10-28
在压缩包内的“前端开发实战案例-炉石传说官方网站纯CSS”文件中，包含了实现上述功能的具体代码示例。通过阅读和理解这些代码，你可以了解到如何将理论知识应用于实际项目，进一步提升你的CSS技能。同时，这个案例...
css经典教程 真实案例
11-30
"CSS经典教程 真实案例"旨在通过实际的案例解析，让你掌握CSS的深层次知识，从而提升你的网页设计水平。下面将详细探讨CSS的一些关键知识点。 1. **选择器**：CSS的选择器是定位HTML或XML文档中元素的基础，包括...
50个div+css经典案例
11-16
10个div+css经典案例,宠物网、电子产品类、个人网站、欢乐餐厅、科技公司、家居、咖啡店、旅游网站、冒险岛、美食、时代财富科技、中国音乐网。。。。提供给div+css的学习者，浏览器兼容性好！！！！
CSS行元素的截断样式box-decoration-break属性，有点儿意思！
流绪@微梦
09-03 651
在CSS中，行元素默认情况下，行内元素不会独占一行，而是在一行内根据其内容的大小进行排列。行内元素的宽度和高度由其内容决定，不能直接设置宽度和高度。行内元素不能包含块级元素，只能包含其他行内元素或文本。行内元素可以设置水平方向的边距（margin）和内边距（padding），但不会影响到其他元素的布局。常用行内元素：a、span、i、em、strong、img等。
中秋之美——html5+css+js制作中秋网页
Timi2019的博客
09-02 1283
八月十五，秋已过半，是为中秋。“但愿人长久，千里共婵娟”，中秋时节，气温已凉未寒，天高气爽，月朗中天，正是观赏月亮的最佳时令。古人把圆月视为团圆的象征，因此，又称八月十五为“团圆节”。
css三点闪烁（可用于加载样式、标题等）
m0_56164131的博客
09-03 568
【代码】css三点闪烁（可用于加载样式、标题等）
音波效果（纯CSS实现）
最新发布
Muchen灬
09-05 334
【代码】音波效果（纯CSS实现）
【CSS】如何写渐变色文字并且有打光效果
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
09-02 864
效果如上，其实核心除了css的，还有就是打光效果，原理其实就是两块遮罩，如下👇。
css每日一记
weixin_43393161的博客
09-05 318
注意：这也是一个 WebKit 特有的属性，主要用于 Safari 和 Chrome 浏览器。注意：这也是一个 WebKit 特有的属性，主要用于 Safari 和 Chrome 浏览器。注意：这是一个 WebKit 特有的属性，主要用于 Safari 和 Chrome 浏览器。作用：限制元素内的文本行数，超过指定行数后使用省略号截断。作用：当内容超出元素边界时，隐藏超出部分的内容。作用：将弹性盒子的方向设置为垂直方向。含义：设置弹性盒子内最多显示的行数。含义：设置弹性盒子的方向。
提升工作效率：CSS经典教程详解
本资源是一份全面的CSS经典教程，旨在帮助用户提升网页开发效率。教程涵盖了从基础入门到进阶技术的各个方面，包括： 1. 基础篇：为初学者提供了CSS的基本概念，让读者理解CSS是如何控制网页样式和布局的，以及它与...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值