html+css画一个潇洒哥

小时候大家应该都看过《喜洋洋与灰太狼》动画片吧？还记得里面的潇洒哥吗？经典台词：“我要画个圈圈诅咒你”，今天这个形象大使站出来出来替你们对心中不悦之人画个圈圈吧？为什么不是羊和狼，又或者是黑大帅，不瞒你们，因为它们比较难，而且实现它们的技术应该有其他的，我选择了一个简单的潇洒哥来锻炼自己的html+css。

主要是css用的比较多，需要用到动画，不会动画的，可以学习一下哦CSS 动画 | 菜鸟教程

讲解潇洒哥之前我想说一下，写这个的动机是什么，是看到了一个可爱的不倒翁，就玩起了不倒翁，这个不倒翁比较简单，“倒”那里用到了动画，挺简单的我就不详细说明了，直接上代码。

不倒翁的html结构：

  <div class="cont"><!-- 蛋 --><div class="ellipse"><!-- 内容 --><div class="egg"><!-- 蛋眼镜 --><div class="eye"></div><div class="eye"></div><!-- 蛋嘴巴 --><div class="mouth"></div><!-- 蛋齿纹 --><ul><li></li><li></li><li></li><li></li><li></li></ul></div></div></div>

不倒翁的css样式：

 *{margin: 0;padding: 0;box-sizing: border-box;list-style: none;}.cont{width: 500px;height: 500px;margin: 50px auto;display: flex;justify-content: center;align-items: center;position: relative;}.ellipse{position: relative;}.egg{width: 290px;height: 340px;border: 18px solid black;border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;position: relative;z-index: 5;}.eye{position: absolute;width: 30px;height: 30px;border-radius: 50%;background-color: #000;top:18%}.eye:nth-child(1){left: 23%;}.eye:nth-child(2){right: 23%;}.eye::after{content: "";width: 13px;height: 13px;background-color: #fff;border-radius: 50%;position: absolute;left: 2px;top: 3px;}.mouth{width: 28px;height: 28px;background-color: #000;/* border-radius: 12% / 4%; */border-radius: 50%;transform: rotate(45deg) translateX(-50%);transform-origin: left;position: absolute;top: 35%;left: 50%;}.egg ul li {position: absolute;height: 51px;transform: rotate(220deg);border-left: 18px solid black;border-top: 18px solid black;}.egg ul li:nth-child(1) {top: 53%;height: 40px;width: 45px;left: -4px;}.egg ul li:nth-child(2) {top: 49.5%;width: 58px;left: 16%;}.egg ul li:nth-child(3) {top: 49.5%;width: 58px;left: 36.5%;}.egg ul li:nth-child(4) {top: 49.5%;width: 58px;left: 57%;}.egg ul li:nth-child(5) {top: 49.5%;width: 62px;left: 77.5%;}/* 下半身 */.ellipse::after{content: "";position: absolute;width: calc(100% - 25px);height: 39%;background-color: pink;bottom: 0;left: 10px;border-radius: 0 0 50% 50%/ 0 0 100% 100%;z-index: 0;}.ellipse {animation: swing 3s linear infinite;transform-origin: center bottom;}@keyframes swing {0% {transform: rotate(0deg);}25% {transform: rotate(10deg);}50% {transform: rotate(0deg);}75% {transform: rotate(-10deg);}100% {transform: rotate(0deg);}}

可爱的不倒翁先告一段落了，鉴于不倒翁，现在说一下潇洒哥。

首先需要html结构来打底：

<div class="cont"><!-- 蛋 --><div class="ellipse"><!-- 内容 --><div class="egg"></div><!-- 手 --><div class="hand"><div class="fang"></div><div class="yuan"></div><div class="gun"></div></div><!-- 乌云 --><div class="cloudy"></div><!-- 椭圆 --><div class="circle"></div><div class="text">我是潇洒哥，画个圈圈诅咒你</div></div></div>

潇洒哥的css:

 * {margin: 0;padding: 0;box-sizing: border-box;list-style: none;}.cont {width: 500px;height: 500px;margin: 150px auto;display: flex;justify-content: center;align-items: center;position: relative;}.ellipse {position: relative;/* width: 500px;height: 500px; */}.egg {width: 190px;height: 240px;border: 4px solid black;border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;position: absolute;z-index: 5;transform: rotate(10deg);background: linear-gradient(to top, rgb(254, 238, 198), rgb(254, 238, 198, 0.6));}.cloudy {width: 50px;height: 50px;position: absolute;top: -80px;left: 100px;margin-left: -60px;background: #ccc;border-radius: 50%;box-shadow: #ccc 65px -10px 0 -5px,#ccc 25px -25px,#ccc 30px 10px,#ccc 60px 15px 0 -10px,#ccc 85px 5px 0 -5px;animation: cloudy 5s ease-in-out infinite;}@keyframes cloudy {50% {transform: translateY(-20px);}}.cloudy::after {content: '';width: 260px;height: 15px;position: absolute;bottom: -280px;left: -90px;background: #000;border-radius: 50%;opacity: 0.2;animation: cloudy-shadow 5s ease-in-out infinite;transform: scale(0.7);}@keyframes cloudy-shadow {50% {transform: translateY(20px) scale(1);opacity: 0.05;}}.hand{width: 100px;height: 100px;position: relative;}.fang{position: absolute;top: 127%;left: 168%;width: 20px;height: 26px;border-top: 4px solid #000;border-left: 4px solid #000;border-right: 1px solid #000;background-color: rgb(254, 238, 198);border-radius: 50% 0 10% 50%;z-index: 9;transform: rotate(-40deg);}.yuan{position: absolute;top: 142%;left: 184%;width: 20px;height: 16px;border: 2px solid #000;background-color: rgb(254, 238, 198);border-radius: 50% 50% 50% 50%;z-index: 9;transform: rotate(10deg);}.gun{position: absolute;top: 142%;left: 192%;width: 4px;height: 100px;border-radius: 0% 0% 50% 50%;background-color: #000;}.circle{height: 60px;width: 100px;position: absolute;top: 200%;left: 192%;/* margin-left: -60px; */box-sizing: border-box;border: 2px solid #000;border-radius: 50%;}.text{width: 100px;position: absolute;top: 10%;left: 192%;font-size: 20px;}

以上潇洒哥头上的云和脚下的阴影是动态的。圆圈是可以通过动画做成动态的，先准备一个圆，通过一个遮板动画旋转，来使得圆是被画出来的假象

写到这里，我希望路过的大神，能指导一下，潇洒哥画圈想要做一个动态的，需要如何将棍子靠近手的那端固定，另一端沿着圆圈画圆呢？

html+css画一个潇洒哥相关推荐

如何用 css 画一个心形
如何用 css 画一个心形 (How to draw hearts using CSS) 用两个长方形切圆角倾斜位移并合并为一个心形第一步画一个长方形 (Draw a rectangle) 这个长 ...
[css] 用css画一个太阳
[css] 用css画一个太阳 // css.sun {margin: 200px;width: 200px;height: 200px;border-radius: 50%;background: ...
[css] 请使用css画一个圆，方法可以多种
[css] 请使用css画一个圆,方法可以多种 <div class="circle"></div>1.border-radius.cirlce{width ...
[css] 请使用CSS画一个带锯齿形边框圆圈
[css] 请使用CSS画一个带锯齿形边框圆圈 @import 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关前端面试题
[css] 用css画一个五边形和一个六边形
[css] 用css画一个五边形和一个六边形五边形:clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); 六边形:cli ...
css画心形原理,如何用 css 画一个心形
如何用 css 画一个心形 (How to draw hearts using CSS) 用两个长方形切圆角倾斜位移并合并为一个心形第一步画一个长方形 (Draw a rectangle) 这个长 ...
用html和css画太极图,利用css画一个太极图(阴阳八卦)实例
这篇文章介绍利用css画一个太极图(阴阳八卦)实例 #yin-yang { width: 96px; height: 48px; background: #eee; border-color: red ...
用 CSS 画一个带阴影的三角形
1. 思路怎么用CSS画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题假设我们做一个向下的三角形箭头常见的方法大致有两种 ...
用css画一个原型里有一个对号或者叉叉的图标
用css画一个圆形里有一个对勾或者叉叉的图标 <!DOCTYPE html> <html lang="en"><head><meta ch ...
使用CSS画一个三角形
效果图全部代码 <!DOCTYPE html> <html> <head><title></title><style type=&q ...

html+css画一个潇洒哥

html+css画一个潇洒哥相关推荐

最新文章

热门文章