正文

纯css3实现对话框和火柴人(代码片段)

hans774882968  hans774882968  2022-12-23  419

关键词：

这是一个css的练手作品。效果图：

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>对话框</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" type="text/css" href = "./index.css" />
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.5.2/vue.min.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="dialog">
        <p>关注hans774882968的csdn，看技术干货：</p>
        <a href="https://blog.csdn.net/hans774882968" target="_blank">
          https://blog.csdn.net/hans774882968
        </a>
      </div>
      <div class="man">
        <div class="head"></div>
        <div class="mid">
          <div class="left-hand"></div>
          <div class="body"></div>
          <div class="right-hand"></div>
        </div>
        <div class="bottom">
          <div class="left-leg"></div>
          <div class="right-leg"></div>
        </div>
      </div>
    </div>
  </body>
</html>

.man包含3个崽，这是为了让头、身体和腿水平居中。

CSS

body
  margin: 0;


div
  box-sizing: border-box;


:root
  --hand-top: 20px;
  --hand-len: 60px;
  --body-h: calc(var(--hand-top) + var(--hand-len));


.container
  margin: 100px 0 0 100px;


.dialog
  width: 400px;
  min-height: 100px;
  border: 2px solid red;
  border-radius: 50%;
  padding: 20px 50px;
  font-size: 14px;
  position: relative;
  color: red;


.dialog p
  margin: 4px 0;


.dialog a
  color: blue;
  text-decoration: none;


.dialog::after
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  --wl: 9px;
  --wr: 15px;
  --h: 15px;
  border-width: var(--h) var(--wr) 0 var(--wl);
  border-style: solid;
  border-color: red transparent transparent transparent;
  top: 100%;
  left: 50%;


.man
  margin: 25px 0 0 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 150px;


.man .head
  border: 2px solid red;
  width: 50px;
  height: 50px;
  border-radius: 50%;


.mid
  display: flex;


.mid .left-hand,.mid .right-hand,.bottom .left-leg,.bottom .right-leg
  width: 2px;
  height: var(--hand-len);
  background-color: red;


.mid .left-hand,.mid .right-hand/* 旋转中心调整 */
  transform-origin: top;
  margin-top: var(--hand-top);
  transition: all .3s;


.mid .left-hand
  margin-right: -2px;/* 旋转中心调整 */
  transform: rotate(35deg);


.mid .body
  width: 2px;
  height: var(--body-h);
  background-color: red;


.mid .right-hand
  margin-left: -2px;/* 旋转中心调整 */
  transform: rotate(-35deg);


.man:hover .left-hand
  transform: rotate(125deg);


.man:hover .right-hand
  transform: rotate(-125deg);


.bottom
  display: flex;


.bottom .left-leg,.bottom .right-leg  /* 旋转中心调整 */
  transform-origin: top;


.bottom .left-leg
  transform: rotate(45deg);


.bottom .right-leg
  transform: rotate(-45deg);

.dialog::after这个伪元素就是对话框下面的小三角。我们同时设置上、右、左的宽度，就能得到一个向下的三角，左和右的宽度之和决定向下三角形的底边长度，上的宽度决定向下三角形的高度。

.man容器主要是确定整个人的位置（~~所以那些确定位置的数字是试出来的~~），和设置水平居中。

身体由三条竖杠组成。.mid设置flex是为了让三条竖杠贴在一起。给左右竖杠设置margin-top让旋转中心向下偏，设置负的margin-left和margin-right产生两条手臂的旋转中心重合的视觉错觉（如果有更好的实现方案可以评论区告诉我QAQ），transform-origin: top;把旋转中心由竖杠中心改为竖杠顶部。

注意：中间那条表示身体的竖杠，为了让它的高度足够，要设为左右竖杠margin-top和手臂长度的和。

腿部的两条竖杠，相当于身体做法的简化版。

qtqt登录对话框(纯代码实现)(代码片段)

...环境03.程序设计04.程序测试05.预留06.附录01.概述实现登录对话框。02.开发环境Windows系统：Windows10Qt版本：Qt5.15或者Qt603.程序设计3.1新建QtWidgetsApplication，项目名称为3Login，在类信息页面保持类名和基类为MainWind 查看详情

纯css做一个吃豆人动画(代码片段)

我们先来看看将要实现的效果：可以单击这个链接打开查看效果和代码：https://codepen.io/sd237720488/pen/LMyNxJ 接下来我们来看看怎么实现的，首先它可以分为两个部分，“吃豆人”和“豆子”首先HTML部分长这样：<divcl... 查看详情

过分了，别人用来做桌面应用开发，这家伙却用来撩妹--运动的火柴人(代码片段)

...系列文章前言原理解析需求说明材料图片第一步：实现一个弹框第二步：插入图片第三步：实现图片轮播总结系列文章1、过分了，别人用来做桌面应用开发&# 查看详情

过分了，别人用来做桌面应用开发，这家伙却用来撩妹--运动的火柴人(代码片段)

过分了，别人用来做桌面应用开发，这家伙却用来撩妹--双向奔赴的火柴人(代码片段)

目录一、运动的火柴人。二、跟随移动方向奔跑的火柴人三、自动移动的火柴人可还记得上期我们研究的会奔跑的机器人吗？没错，就是他，整个画面一闪一闪的，非常不好看。而且，只能单项奔跑，不能... 查看详情

过分了，别人用来做桌面应用开发，这家伙却用来撩妹--双向奔赴的火柴人(代码片段)

纯javascript实现表白代码(代码片段)

纯JavaScript实现表白代码文章目录纯JavaScript实现表白代码代码效果图在国庆节当天，大家都在表达着对祖国的热爱，当然这也是个对自己爱的人表白的一个好机会，本文旨在使用JavaScript实现表白的代码。代码首先是实... 查看详情

纯javascript实现表白代码(代码片段)

python实现21根火柴游戏(代码片段)

游戏规则：：有21根火柴，人和计算机轮流拿，人先拿（输入拿几根）计算机后拿，每次至少1根最多4根，拿到最后一根火柴的算输，要确保计算机一定可以获胜tips：保证计算机最后能拿到20... 查看详情

c/c++项目开发：《火柴人游戏》，500行源代码开发(代码片段)

hello，各位学编程的小伙伴们！学习C语言C++已经这么久了，你们的语法知识已经学到哪里了来了呢？不会还只停留在完成学校老师布置的小作业这样的基础层次吧！今天这篇文章主要就是带你突破目前的... 查看详情

css纯css3按钮(代码片段)

查看详情

取火柴游戏||nim博弈(代码片段)

好久之前看的sg函数了好像就记住一个nim博弈qwq第一次啊看的时候很迷，现在感觉可以了qwq首先我们来看一个其他的游戏。（以下游戏只有两个人参与，且足够聪明）两个人在一张圆形的桌子上放等大的盘子，最后一个无法放盘... 查看详情

css纯css3渐变背景动画(代码片段)

查看详情

单词辨析(代码片段)

#######################2949match?????|n.火柴；比赛，竞赛；对手，配偶v.匹配，相称psmatch-比赛，早就有匹配的意思。因为比赛需要的是匹配。男的和男的比，女的和女的比。70公斤和70公斤比~现在的人不用火柴了，考不到的~2929March???????... 查看详情

为你心仪的她做一个“旋转木马“告白相册零基础纯css3实现(代码片段)

💳效果展示：旋转相册效果里面就不放女朋友的美照了防止虐狗🥰🥰🥰，就用个前端技能树的图片代替哈，有需要大家自行替换。💳源码获取：源码我已经上传到了资源里，... 查看详情

为你心仪的她做一个“旋转木马“告白相册零基础纯css3实现(代码片段)

p1247取火柴游戏(代码片段)

P1247取火柴游戏题意：有n堆火柴，两个人轮流操作，每次只能在从一堆中取若干火柴，拿走最后一根火柴的为胜者，给你一个状态，问先手是赢是输题解：很经典的nim博弈，结论大家应该都知道就... 查看详情

纯css3实现按钮的hover和active时颜色的明暗变化效果

效果：在任意HTML标签上增加样式类f-color-control就可以为此元素增加hover和avtive时颜色的变化;代码如下：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>.btn{widt 查看详情