css-失落的人

最新推荐文章于 2024-08-03 16:11:42 发布
最新推荐文章于 2024-08-03 16:11:42 发布
阅读量119 收藏
点赞数
分类专栏： css 文章标签： css html

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*居中显示：*/
            
            body {
                margin: 0;
                height: 100vh;
                display: flex;
                align-items: center;
                justify-content: center;
                background: radial-gradient(lightgray 20%, whitesmoke);
            }
            /*定义容器尺寸：*/
            
            .man {
                width: 12em;
                height: 33em;
                font-size: 10px;
                position: relative;
            }
            /*定义主色：*/
            
            .man {
                color: white;
            }
            /*画出头部：*/
            
            .head {
                position: absolute;
                width: 7em;
                height: 7em;
                background-color: currentColor;
                border-radius: 50%;
                right: 0;
            }
            /*画出身体：*/
            
            .body {
                position: absolute;
                width: 6.2em;
                height: 14.4em;
                background-color: currentColor;
                top: 7em;
                border-radius: 100% 20% 0 0;
            }
            /*画出脚，现在只能看到一只脚，是因为两只脚重叠在一起，一会儿动起来时就能看到两只脚了：*/
            
            .feet::before,
            .feet::after {
                content: '';
                position: absolute;
                width: 4em;
                height: 1.4em;
                background-color: white;
                bottom: 0;
                left: -1.6em;
                border-radius: 1em 80% 0.4em 0.4em;
            }
            /*用伪元素画出阴影：*/
            
            .man::before {
                content: '';
                position: absolute;
                width: 12em;
                height: 0.8em;
                background-color: rgba(0, 0, 0, 0.1);
                bottom: -0.2em;
                left: -3em;
                border-radius: 50%;
            }
            /*增加行走的动画效果，并使两只脚的动画时间交错：*/
            
            .feet::before,
            .feet::after {
                animation: feet-animation 2s ease-in-out infinite;
            }
            
            .feet::after {
                animation-delay: 1s;
            }
            
            @keyframes feet-animation {
                20% {
                    transform: translateX(3.4em) translateY(-1.6em) rotate(4deg);
                }
                30% {
                    transform: translateX(4.6em) translateY(-1em) rotate(0deg);
                }
                40% {
                    transform: translateX(5.6em) translateY(-0.6em) rotate(4deg);
                }
                44% {
                    transform: translateX(5.6em) translateY(0) rotate(0deg);
                }
            }
            /*增加头和身体起伏的动画效果：*/
            
            .head,
            .body {
                animation: body-animation 4s ease-in-out infinite;
            }
            
            @keyframes body-animation {
                0%,
                100% {
                    transform: translateY(0) skewX(-2deg);
                }
                25%,
                75% {
                    transform: translateY(0.5em) skewX(0deg);
                }
                50% {
                    transform: translateY(0) skewX(0deg);
                }
            }
            /*增加阴影面积随身体运动而变化的动画效果：*/
            
            .man::before {
                animation: shadow-animate 4s ease-in-out infinite;
            }
            
            @keyframes shadow-animate {
                0%,
                50%,
                100% {
                    transform: scale(1);
                }
                25%,
                75% {
                    transform: scale(1.15);
                }
            }
        </style>
    </head>

    <body>

        <!--定义 dom，容器中包含 3 个元素，分别代表头、身体和脚-->
        <div class="man">
            <span class="head"></span>
            <span class="body"></span>
            <span class="feet"></span>
        </div>

    </body>

</html>

乡下孩子丶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css 插件_10个很棒的PostCSS插件，使您成为CSS向导
cune1359的博客
07-05 1879
PostCSS是一种用途广泛的工具，可以使用JavaScript插件转换CSS样式 。 它的灵活性在于其构建方式。 PostCSS的核心部分是一个Node.js模块 ，您可以使用npm进行安装，它具有生态系统，其中包含200多个插件，您可以选择在项目中使用。 PostCSS既不是预处理器，也不是后处理器，因为不同的PostCSS插件可能属于这两个类别，或者属于这两个类别。 这完全取决于...
postcss-css-variables:PostCSS插件将CSS自定义属性（CSS变量）语法转换为静态表示形式
05-01
npm install postcss-css-variables --save-dev 目录 -- ---嵌套规则 为什么？ -互操作性-与postcss-custom-properties差异 注意事项 选项 快速参考/注释 测验 变更日志 代码游乐场 在操场上尝试一下，看看您的想法...
css花心形状
milijiangjun的博客
09-06 347
<style> .heart { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; background-color: pink; height: 50px; width: 50px; transform:rotate(45deg) ; } .he...
css--概述、选择器
小白小白从不日别的博客
05-08 399
目录 一、概述 1.1 语法 1.2 css的特点 1.3 css的注释 1.4常见属性介绍 1.5Css的书写位置(引入方式) 1.6link和@import的区别 1.7css书写方式之间的区别 1.8颜色的表达方式 二、选择器概述 2.1 选择器分类 2.2 选择器的优先级 三、基础选择器 3.1 标签(元素)选择器 3.2 类选择器 3.3 ID选择器 3.4 通配符选择器 3.5 合并选择器 3.6交集选择器（标签指定选择器） 3.7后代选择器...
postcss入门_PostCSS快速入门指南：探索插件
Web design 教程小屋
07-08 483
正如您将从本系列中的先前文章中所了解的那样，PostCSS就是关于插件的。 您选择的插件将完全定义您对PostCSS的体验。 鉴于它们是如此不可或缺的基础，在我们继续通过PostCSS实际生成样式表之前，我们将看一下如何探索PostCSS插件生态系统。 通过此操作，您还将了解PostCSS的功能强大，以及它如何提供无法通过其他任何现有方式均等创建的功能。 我们将介绍可以去哪里查看最新和...
postcss安装和使用
Python老吕的博客
03-29 2731
是一个用 JavaScript 工具和插件转换 CSS 代码的工具PostCSS 本身是一个功能比较单一的工具。它提供了一种方式用 JavaScript 代码来处理 CSS。它负责把 CSS 代码解析成抽象语法树结构（Abstract Syntax Tree，AST），再交由插件来进行处理。
CSS学习
yezishuibuxing的博客
09-17 223
css快速热门（适合后端人员简单学习）
CSS实现平行四边形
热门推荐
qq_45768871的博客
01-21 2万+
作者：晴栀Sunset 平行四边形 文章目录平行四边形背景知识难题嵌套元素方案伪元素方案总结 时间有三种步伐：未来姗姗来迟，现在象箭一样飞逝，过去永远静止不动。 背景知识 基本的 CSS 变形 难题 平行四边形其实是矩形的超集：它的各条边是两两平行的，但各个角则不一定都是直角。在视觉设计中，平行四边形往往可以传达出一种动感。 让我们试着用 CSS 创建一个按钮状的平行四边形链接。我们的起点就是一个普通的块状按钮，辅以一些简单的样式，如图 3-13 所示。然后，我们可以通过skew() ..
css布局-div中实现resize的拉动分栏
weixin_30645617的博客
09-29 1485
resize的鼠标拉动分栏效果：主要通过resize设置横向自由拉伸来调整目标元素的宽度 resize 属性规定是否可由用户调整元素的尺寸。如果希望此属性生效，需要设置元素的 overflow 属性，值可以是 auto、hidden 或 scroll。 resize: none|both|horizontal|vertical; 结合多行文本输入框实现效果： 下面是代...
如何用纯 CSS 创作一个失落的人独自行走的动画
hellogril前端库
12-09 253
效果预览 在线演示 按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。 https://codepen.io/comehope/pen/MqpOdR/ 可交互视频 此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。 请用 chrome, safari, edge 打开观看。 https://scrimba.com/p/pEgDAM/czZnbsr 源代码下载 本地下载 ...
postcss-selector-namespace:使用postcss命名CSS选择器
05-13
postcss-选择器命名空间 安装 $ npm install postcss-selector-namespace 用法 var postcss = require ( 'postcss' ) var selectorNamespace = require ( 'postcss-selector-namespace' ) var output = postcss ( ) ...
postcss-windicss:Windi CSS的PostCSS集成
04-01
postcss-windicss :test_tube: 过期的。 :warning: 不鼓励使用此软件包，因为PostCSS的API存在一些限制。 将我们用于每个专用框架/构建工具，以获取最佳的开发经验和性能。 该插件应该是使用Windi CSS的最后选择...
strip-css-comments:从CSS中删除注释
05-26
$ npm install strip-css-comments 用法 const stripCssComments = require ( 'strip-css-comments' ) ; // By default important comments `/*!` are preserved stripCssComments ( '/*! <copyright> */ body { /...
postcss-prefix-selector:使用选择器为所有CSS规则添加前缀
05-12
$ npm install postcss-prefix-selector 与PostCSS结合使用 const prefixer = require ( 'postcss-prefix-selector' ) // css to be processed const css = fs . readFileSync ( "input.css" , "utf8" ) const out ...
css中使用data中的变量
weixin_45580774的博客
08-03 323
一、定义变量 data() { return { myColor:"#2a9efb", }; }, 二、在templete中激活 <template> <div class="chat-message" :style="{'--myColor':myColor}"> 你好 </div> </template> 三、在css中使用 .chat-message { background: var(--myColor);
CSS学习 - 选择器
Aaron121314的博客
08-03 785
伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。它们表现得会像是你向你的文档的某个部分应用了一个类一样，帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护。没有了这个标记的话，值会按照文档语言对大小写的处理方式，进行匹配——HTML 中是大小写敏感的。以上是基本选择器的用法，可以用来实现各种样式，但是为了使用简便和优化，还要学习一些进阶的选择器。的属性的元素，其值的字符串中的任何地方，至少出现了一次。
HTML 基础结构
m0_74012211的博客
08-03 450
HTML 基础结构
基于Python+OpenCV实现双目立体视觉的图像匹配与测距代码+文档说明（大作业）
最新发布
08-06
基于Python+OpenCV实现双目立体视觉的图像匹配与测距代码+文档说明（大作业）含有代码注释，新手也可看懂，个人手打98分项目，导师非常认可的项目，期末大作业和课程设计高分必看，下载下来，简单部署，就可以使用。 基于Python+OpenCV实现双目立体视觉的图像匹配与测距代码+文档说明（大作业） 基于Python+OpenCV实现双目立体视觉的图像匹配与测距代码+文档说明（大作业） 基于Python+OpenCV实现双目立体视觉的图像匹配与测距代码+文档说明（大作业） 基于Python+OpenCV实现双目立体视觉的图像匹配与测距代码+文档说明（大作业） 基于Python+OpenCV实现双目立体视觉的图像匹配与测距代码+文档说明（大作业） 基于Python+OpenCV实现双目立体视觉的图像匹配与测距代码+文档说明（大作业） 基于Python+OpenCV实现双目立体视觉的图像匹配与测距代码+文档说明（大作业）基于Python+OpenCV实现双目立体视觉的图像匹配与测距代码+文档说明（大作业）基于Python+OpenCV实现双目立体视觉的图像匹配与测距代码+文档说明。
css-in-css
02-05
CSS-in-CSS是一种前端开发技术，也被称为CSS嵌套或CSS模块化。它的主要思想是将CSS样式定义在组件级别，使得样式与组件的逻辑和结构紧密关联，提高代码的可维护性和可重用性。 在传统的CSS开发中，样式是全局共享的，容易造成样式冲突和难以维护。而CSS-in-CSS通过将样式封装在组件内部，实现了样式的局部作用域。这样一来，每个组件都可以拥有自己独立的样式规则，不会相互干扰。 CSS-in-CSS有多种实现方式，其中比较常见的有以下几种： 1. CSS Modules：CSS Modules是一种使用Webpack等构建工具实现的CSS-in-CSS方案。它通过给每个CSS类名添加唯一的哈希值，实现了样式的局部作用域。在使用时，可以通过import语法引入CSS文件，并在组件中使用对应的类名。 2. CSS-in-JS：CSS-in-JS是一种将CSS样式直接写在JavaScript代码中的方式。它通过使用JavaScript对象来描述样式规则，并在运行时动态生成对应的CSS。常见的CSS-in-JS库有styled-components、Emotion等。 3. CSS Nesting：CSS Nesting是一种提案，旨在原生CSS中实现嵌套样式的语法。它使用类似于Sass的嵌套语法，可以更方便地描述组件内部的样式关系。目前，CSS Nesting还处于实验阶段，尚未得到所有浏览器的广泛支持。 总的来说，CSS-in-CSS是一种将CSS样式与组件紧密结合的开发方式，可以提高代码的可维护性和可重用性。不同的实现方式适用于不同的项目需求和开发环境。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值