代码画年兽，虎年祝大家虎虎生威

2024-03-27 06:58
文章标签 代码 大家 虎年 虎虎生威 画年

本文主要是介绍代码画年兽，虎年祝大家虎虎生威，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

代码画年兽，不依赖图片，纯CSS33代码教会你画可爱的小老虎，可以动起来的小老虎：
实现效果：
在这里插入图片描述

HTML代码：

<!--* @Author: 
-->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>#Codepenchallenge: Cute Tiger</title><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"/><link rel="stylesheet" href="css/style.css" /></head><body><div class="container"><div class="tigre"><div class="body"><div class="cola"></div><div class="cola3"></div><div class="body7"></div><div class="body5"><div class="ray"></div></div><div class="legs"></div><div class="ray3"></div><div class="ray5"></div><div class="legs3"></div></div><div class="head"><div class="orejas"></div><div class="orejas3"></div><div class="face"></div><div class="face3"><div class="rayas"><span class="r1"></span><span class="r2"></span><span class="r3"></span><span class="r4"></span><span class="r5"></span><span class="r6"></span><span class="r7"></span><span class="r8"></span></div><div class="cejas"></div><div class="cejas3"></div><div class="cejas7"></div><div class="ojos"><div class="iris"><div class="iris3"></div></div></div><div class="ojos3"><div class="iris7"><div class="iris9"></div></div></div><div class="boca7"></div><div class="boca"></div><div class="boca3"></div><div class="bigotes"></div><div class="bigotes3"></div></div></div></div></div></body>
</html>

CSS3代码：

body{background:black;
}
.container{position:relative;width:800px;height:600px;background:#24292E;margin:0px auto;}
.tigre{position:absolute;margin:271px 350px
}
.face{position:absolute;width:251px;height:172px;border-radius: 90px ;background:#D8D3D6;margin:-90px -90px;}
.face::before{content:"";position:absolute;width:152px;height:152px;border-radius:700px 700px 5000px 700px;background:#D8D3D6;-webkit-transform:rotate(225deg);transform:rotate(225deg);margin:30px 55px
}
.face3{position:absolute;width: 231px;height: 182px;border-radius: 50%  50%  50%  50%  / 60%   60%   40%  40%;background:#e4393c;margin:-102px -80px;
}
.face3::before{content:"";position:absolute;width:90px;height:90px;border-radius:700px 700px 5000px 700px;background:#e4393c;-webkit-transform:rotate(225deg);transform:rotate(225deg);margin:95px 73px
}
.face5{position:absolute;width:152px;height:132px;border-radius:100%;background:#eda65e;margin:40px 40px;
}
.orejas,.orejas3{position:absolute;width:60px;height:65px;border-radius:100%;background:#fff;border:12px solid #e4393c;}
.orejas{margin:-121px -83px}
.orejas3{margin:-121px 63px}
.ojos,.ojos3{position:absolute;width: 90px;height: 80px;border-radius: 50%  50%  50%  50%  / 60%   60%   40%  40%;background:#937B54;border-top:7px solid black;-webkit-animation: cerrar 3s alternate infinite;animation: cerrar 3s alternate infinite;}
.ojos{margin:70px 12px;border-left:7px solid black;
}
.ojos3{margin:70px 121px;border-right:7px solid black;
}
.ojos::before, .ojos3::before{content:"";position:absolute;width: 80px;height: 60px;border-radius: 50%  50%  50%  50%  / 60%   60%   40%  40%;background:#C99621;}
.ojos::before{margin:17px 3px}
.ojos3::before{margin:17px 8px}
.iris,.iris7{position:absolute;width: 63px;height: 77px;border-radius: 50%  50%  50%  50%  / 60%   60%   40%  40%;background:black;margin:0 14px
}
.iris{-webkit-transform:rotate(-12deg);transform:rotate(-12deg)}
.iris7{-webkit-transform:rotate(12deg);transform:rotate(12deg)}
.iris::before,.iris7::before{content:"";position:absolute;width:35px;height:50px;border-radius:100%;background:white;
}
.iris::before{-webkit-transform:rotate(33deg);transform:rotate(33deg);margin:0px 5px
}
.iris7::before{-webkit-transform:rotate(-33deg);transform:rotate(-33deg);margin:0px 23px
}
.iris3,.iris9{position:absolute;width:14px;height:12px;border-radius:100%;background:white;margin:62px 30px}
.iris3::before,.iris9::before{content:"";position:absolute;width: 80px;height:35px;border-radius: 50%  50%  50%  50%  / 60%   60%   40%  40%;opacity:.3;background: #937B54;}
.iris3::before{margin:-60px -30px;-webkit-transform:rotate(33deg);transform:rotate(33deg)
}
.iris9::before{margin:-60px -49px;-webkit-transform:rotate(-33deg);transform:rotate(-33deg)
}
.boca{position:absolute;width:21px;height:21px;border-radius:100%;background:#eaeaea;margin:152px 95px;-webkit-animation:go7 2.1s alternate infinite;animation:go7 2.1s alternate infinite;
}
.boca::before{content:"";position:absolute;width:21px;height:21px;border-radius:100%;background:#eaeaea;margin:0px 21px
}
.boca3{position:absolute;width: 18px;height: 16px;border-radius: 50%  50%  50%  50%  / 60%   60%   40%  40%;background:#8c4b59;margin:145px 107px;
}
.boca7{position:absolute;width:21px;height:12px;border-radius:0 0 21px 21px;background:#8c4b59;border:1px solid black;margin:162px 105px;}
.cejas{position:absolute;width:25px;height:12px;border-radius:100%;background:black;margin:50px 35px;-webkit-transform:rotate(-21deg);transform:rotate(-21deg)
}
.cejas::before{content:"";position:absolute;width:25px;height:12px;border-radius:100%;background:black;margin:50px 125px;-webkit-transform:rotate(42deg);transform:rotate(42deg)
}
.cejas3,.cejas7{position:absolute;width:21px;height:21px;border-radius:100%;}
.cejas3{border-bottom:5px solid black;margin:63px 12px;
}
.cejas7{border-bottom:5px solid black;margin:63px 195px;
}
.cejas3::before,.cejas7::before{content:"";position:absolute;width:21px;height:21px;border-radius:100%;border-bottom:5px solid black;}
.cejas3::before{margin:9px -3px;-webkit-transform:rotate(-30deg);transform:rotate(-30deg)
}
.cejas7::before{margin:9px 0px;-webkit-transform:rotate(21deg);transform:rotate(21deg)
}
.bigotes,.bigotes3{position:absolute;width:35px;height:1px;background: black;-webkit-animation:go7 2.1s alternate infinite;animation:go7 2.1s alternate infinite;}
.bigotes{margin:162px 73px;}
.bigotes3{margin:162px 123px;}
.bigotes::before,.bigotes3::before{content:"";position:absolute;width:35px;height:1px;background:black;}
.bigotes::before{margin:7px 3px;-webkit-transform:rotate(-21deg);transform:rotate(-21deg)}
.bigotes3::before{margin:7px -3px;-webkit-transform:rotate(21deg);transform:rotate(21deg)}
.body5{position:absolute;width:95px;height:95px;border-radius:100%;background:#f4b09f;margin:80px -21px
}
.body7{position:absolute;width:60px;height:102px;border-radius:100%;background:#B94535; margin:77px -45px}
.body7::before{content:"";position:absolute;width:65px;height:102px;border-radius:100%;background:#B94535; margin:0px 105px}.legs,.legs3{position:absolute;width: 90px;height: 150px;border-top: 40px solid #e4393c;border-left: 40px solid transparent;border-right: 40px solid transparent;border-radius: 100px / 100px;}
.legs{-webkit-transform: rotate(85deg);transform: rotate(85deg);margin:30px -75px
}
.legs3{-webkit-transform: rotate(-85deg);transform: rotate(-85deg);margin:30px -12px;
}
.legs::before, .legs3::before{content:"";position:absolute;width:33px;height:50px;border-radius: 100%;background:#e4393c;}
.legs::before{margin:-21px 77px}
.legs3::before{margin:-21px -19px}
.legs7::before{content:"";position:absolute;width:33px;height:21px;border-radius: 0 0 50px 50px;background:#cc9666;margin:1px 87px}
.cola{position:absolute;width:25px;height:125px;border-radius:30px;background:#e4393c;margin:50px -55px;-webkit-transform:rotate(-21deg);transform:rotate(-21deg);
}
.cola3{position:absolute;width:35px;height:35px;border-radius:100%;background:#e4393c; border-right:1px solid gray;margin:50px -90px;-webkit-animation:go3 3s alternate infinite;animation:go3 3s alternate infinite;
}
.r1,.r2,.r3{position:absolute;width:7px;height:35px;border-radius:3px;background:black
}
.r1{margin:3px 93px}
.r2{margin:5px 112px}
.r3{margin:3px 132px}
.r4,.r5,.r6,.r7,.r8{position:absolute;width:21px;height:5px;border-radius:3px;background:black;}
.r4{margin:70px 9px}
.r5{margin:70px 201px}
.r6{margin:50px 107px}
.r7{margin:162px 50px;-webkit-transform:rotate(-12deg);transform:rotate(-12deg)
}
.r8{margin:162px 162px;-webkit-transform:rotate(12deg);transform:rotate(12deg)
}
.ray{position:absolute;width:21px;height:12px;border-top:3px solid black;border-bottom:3px solid black;margin:45px 50px;z-index:333;}
.ray::before{content:"";position:absolute;width:9px;height:21px;border-radius:100%;border-left:3px solid black;margin:-30px -80px;-webkit-transform:rotate(50deg);transform:rotate(50deg);z-index:333;}
.ray::after{content:"";position:absolute;width:9px;height:21px;border-radius:100%;border-left:3px solid black;margin:-45px -85px;-webkit-transform:rotate(60deg);transform:rotate(60deg);z-index:333;}
.ray3,.ray5{position:absolute;width:33px;height:30px;border-radius:100%;border-top:5px solid black;z-index:777;}
.ray3{margin:121px -16px;}
.ray5{margin:121px 65px;}
.ray3::before,.ray5::before{content:"";position:absolute;width:33px;height:30px;border-radius:100%;border-top:5px solid black;z-index:777;}
.ray3:after,.ray5::after{content:"";position:absolute;width:21px;height:9px;border-radius:100%;border-top:5px solid black;z-index:777;}
.ray3::before{margin:12px 0px;}
.ray3::after{margin:9px -25px;}
.ray5::before{margin:12px 0px;}
.ray5::after{ margin:9px 37px;}@-webkit-keyframes go {0%{-webkit-transform:translatex(0px) translatey(0px);transform:translatex(0px) translatey(0px) }100% {-webkit-transform:translatex(3px) translatey(3px);transform:translatex(3px) translatey(3px) }}@keyframes go {0%{-webkit-transform:translatex(0px) translatey(0px);transform:translatex(0px) translatey(0px) }100% {-webkit-transform:translatex(3px) translatey(3px);transform:translatex(3px) translatey(3px) }}
@-webkit-keyframes go3 {0%{-webkit-transform:translatex(0px) translatey(0px) scale(1);transform:translatex(0px) translatey(0px) scale(1)}100% {-webkit-transform:translatex(-3px) translatey(-12px) scale(.9);transform:translatex(-3px) translatey(-12px) scale(.9)}}
@keyframes go3 {0%{-webkit-transform:translatex(0px) translatey(0px) scale(1);transform:translatex(0px) translatey(0px) scale(1)}100% {-webkit-transform:translatex(-3px) translatey(-12px) scale(.9);transform:translatex(-3px) translatey(-12px) scale(.9)}}
@-webkit-keyframes go7{0%{-webkit-transform:translatey(0px);transform:translatey(0px) }100% {-webkit-transform:translatey(-5px);transform:translatey(-5px)}}
@keyframes go7{0%{-webkit-transform:translatey(0px);transform:translatey(0px) }100% {-webkit-transform:translatey(-5px);transform:translatey(-5px)}}
@-webkit-keyframes cerrar {0%,25%{opacity:1}35%{opacity: 0}50%{opacity:1;}100%{opacity:1}
}
@keyframes cerrar {0%,25%{opacity:1}35%{opacity: 0}50%{opacity:1;}100%{opacity:1}
}

这只小老虎可爱吧，他还会眨眼睛呢！你也赶快来试一试吧！

这篇关于代码画年兽，虎年祝大家虎虎生威的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/851272。

相关文章

Java中有什么工具可以进行代码反编译详解

Java中有什么工具可以进行代码反编译详解

《Java中有什么工具可以进行代码反编译详解》：本文主要介绍Java中有什么工具可以进行代码反编译的相关资,料,包括JD-GUI、CFR、Procyon、Fernflower、Javap、Byte... 目录1.JD-GUI2.CFR3.Procyon Decompiler4.Fernflower5.Jav
阅读更多...
javaScript在表单提交时获取表单数据的示例代码

javaScript在表单提交时获取表单数据的示例代码

《javaScript在表单提交时获取表单数据的示例代码》本文介绍了五种在JavaScript中获取表单数据的方法：使用FormData对象、手动提取表单数据、使用querySelector获取单个字... 方法 1：使用 FormData 对象FormData 是一个方便的内置对象，用于获取表单中的键值
阅读更多...
Vue ElementUI中Upload组件批量上传的实现代码

Vue ElementUI中Upload组件批量上传的实现代码

《VueElementUI中Upload组件批量上传的实现代码》ElementUI中Upload组件批量上传通过获取upload组件的DOM、文件、上传地址和数据,封装uploadFiles方法,使... ElementUI中Upload组件如何批量上传首先就是upload组件 <el-upl
阅读更多...
C++使用栈实现括号匹配的代码详解

C++使用栈实现括号匹配的代码详解

《C++使用栈实现括号匹配的代码详解》在编程中,括号匹配是一个常见问题,尤其是在处理数学表达式、编译器解析等任务时,栈是一种非常适合处理此类问题的数据结构,能够精确地管理括号的匹配问题,本文将通过C+... 目录引言问题描述代码讲解代码解析栈的状态表示测试总结引言在编程中，括号匹配是一个常见问题，尤其是在
阅读更多...
Java调用DeepSeek API的最佳实践及详细代码示例

Java调用DeepSeek API的最佳实践及详细代码示例

《Java调用DeepSeekAPI的最佳实践及详细代码示例》：本文主要介绍如何使用Java调用DeepSeekAPI,包括获取API密钥、添加HTTP客户端依赖、创建HTTP请求、处理响应、... 目录1. 获取API密钥2. 添加HTTP客户端依赖3. 创建HTTP请求4. 处理响应5. 错误处理6.
阅读更多...
使用 sql-research-assistant进行 SQL 数据库研究的实战指南(代码实现演示)

使用 sql-research-assistant进行 SQL 数据库研究的实战指南(代码实现演示)

《使用sql-research-assistant进行SQL数据库研究的实战指南(代码实现演示)》本文介绍了sql-research-assistant工具,该工具基于LangChain框架,集... 目录技术背景介绍核心原理解析代码实现演示安装和配置项目集成LangSmith 配置（可选）启动服务应用场景
阅读更多...
Python中顺序结构和循环结构示例代码

Python中顺序结构和循环结构示例代码

《Python中顺序结构和循环结构示例代码》：本文主要介绍Python中的条件语句和循环语句,条件语句用于根据条件执行不同的代码块,循环语句用于重复执行一段代码,文章还详细说明了range函数的使... 目录一、条件语句（1）条件语句的定义（2）条件语句的语法（a）单分支 if（b）双分支 if-else（
阅读更多...
MySQL数据库函数之JSON_EXTRACT示例代码

MySQL数据库函数之JSON_EXTRACT示例代码

《MySQL数据库函数之JSON_EXTRACT示例代码》：本文主要介绍MySQL数据库函数之JSON_EXTRACT的相关资料,JSON_EXTRACT()函数用于从JSON文档中提取值,支持对... 目录前言基本语法路径表达式示例示例 1: 提取简单值示例 2: 提取嵌套值示例 3: 提取数组中的值注意
阅读更多...
CSS3中使用flex和grid实现等高元素布局的示例代码

CSS3中使用flex和grid实现等高元素布局的示例代码

《CSS3中使用flex和grid实现等高元素布局的示例代码》：本文主要介绍了使用CSS3中的Flexbox和Grid布局实现等高元素布局的方法，通过简单的两列实现、每行放置3列以及全部代码的展示，展示了这两种布局方式的实现细节和效果，详细内容请阅读本文，希望能对你有所帮助... 过往的实现方法是使用浮动加
阅读更多...
JAVA调用Deepseek的api完成基本对话简单代码示例

JAVA调用Deepseek的api完成基本对话简单代码示例

《JAVA调用Deepseek的api完成基本对话简单代码示例》：本文主要介绍JAVA调用Deepseek的api完成基本对话的相关资料,文中详细讲解了如何获取DeepSeekAPI密钥、添加H... 获取API密钥首先，从DeepSeek平台获取API密钥，用于身份验证。添加HTTP客户端依赖使用Jav
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2