整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

纯CSS写出一只活泼乱跳的小白兔，非常简单，看了就会

样先放最终效果图：

动图演示：

一边听歌一边截的动图，所以图片下面有歌词闪过，大家忽视就好。

整个图像其实可以分为三个部分，一是蓝黑色的背景，二是三朵若隐若现的白云，三是这只往前跳的小兔子，背景可以直接在body里设置，因此我们的HTML主题部分就只需要下面两个div：

<div class="rabbit"></div>
<div class="clouds"></div>

接着CSS里开始设置样式，先是整体的背景：

body {
 margin: 0;
 height: 100vh;
 display: flex;
 align-items: center;
 justify-content: center;
 background: linear-gradient(midnightblue, black);
 font-size: 20px;
 margin-top: 2em;
 overflow: hidden;
}

引申一点相关知识：上面的CSS代码里display：flex其实是弹性布局，采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

flex布局有以下6个属性：

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

其中，我们的代码里面用到的justify-content：center定义了项目在主轴上的对齐方式为center。

接下来设置小白兔：

.rabbit {
 width: 5em;
 height: 3em;
 color: whitesmoke;
 background: 
 radial-gradient(
 circle at 4.2em 1.4em,
 #333 0.15em,
 transparent 0.15em
 ), /* eye */
 currentColor;
 border-radius: 70% 90% 60% 50%;
 box-shadow: -0.2em 1em 0 -0.75em #333;
 z-index: 1;
 animation: hop 1s linear infinite;
}

大体都是一些基础的设置，这里着重介绍一下 animation: hop 1s linear infinite;这句。

animation是CSS3里的一个动画设置，使用上面的代码，将把 animation 绑定到一个hop这个div元素，因此我们需要写一个hop来实现小白兔前后跳动的动画：

@keyframes hop {
 20% {
 transform: rotate(-10deg) translate(1em, -2em);
 box-shadow: -0.2em 3em 0 -1em #333;
 }
 40% {
 transform: rotate(10deg) translate(3em, -4em);
 box-shadow: -0.2em 3.25em 0 -1.1em #333;
 }
 60%, 75% {
 transform: rotate(0deg) translate(4em, 0);
 box-shadow: -0.2em 1em 0 -0.75em #333;
 }
}

就这样，我们得到了一个光头往前跳动的小白兔：

其实还挺可爱的~

下面我们给小兔子加上耳朵：

.rabbit::before {
 content: '';
 position: absolute;
 width: 0.75em;
 height: 2em;
 background-color: currentColor;
 border-radius: 50% 100% 0 0;
 transform: rotate(-30deg);
 top: -1em;
 right: 1em;
 border: 0.1em solid;
 border-color: gainsboro transparent transparent gainsboro;
 box-shadow: -0.5em 0 0 -0.1em;
 }

加上耳朵后如下：

加上尾巴和影子：

.rabbit::after {
 content: '';
 position: absolute;
 width: 1em;
 height: 1em;
 background-color: currentColor;
 border-radius: 50%;
 left: -0.3em;
 top: 0.5em;
 box-shadow:
 0.5em 1em 0,
 4em 1em 0 -0.2em,
 4em 1em 0 -0.2em;
 animation: kick 1s infinite linear;
}

最后，给小白兔加上四周的白云：

.clouds {
 width: 2em;
 height: 2em;
 color: whitesmoke;
 background: currentColor;
 border-radius: 100% 100% 0 0;
 transform: translate(0, -5em);
 animation: cloudy 1s infinite linear forwards;
 filter: opacity(0);
}

云的动画以及细节调整这里就不在赘述了，再来看一张最终效果图：

今天的小练习就到这里啦。

需要完整代码的朋友可以留言或私信我获取。

家好呀！今天小红书上来分享一篇关于友情链接HTML代码的教程，让我们一起来学习如何在网页上添加友情链接吧！

我们需要了解什么是友情链接。友情链接，顾名思义，就是在网页上相互分享链接，以增加网站之间的互相推荐和访问。通过添加友情链接，我们可以促进多个网站之间的互动和合作，共同提高网站的流量和知名度。

我们该如何在网页中添加友情链接呢？首先，我们需要使用HTML代码来实现这一功能。下面将给大家介绍一种简单的方法。

首先打开你要添加友情链接的网页，然后找到你想要添加友情链接的位置。通常，我们将这些链接放置在页面底部的“友情链接”或“合作伙伴”栏目中比较合适。

我们需要在HTML代码中插入一个“”标签，表示一个无序列表。在这个列表中，每一个链接都将被表示为一个“”标签，这样我们就可以依次添加多个链接了。

下面是一个示例代码，供大家参考：

年暑假实习了四个月的前端，接触了很多前端相关的东西，觉得前端真的比后端有趣多了啊，又好玩又有趣，相比后端千篇一律的代码，前端的千变万化一瞬间俘获了我的心~~~~~

下面列举一些基础的前端图形制作代码，希望对大家有用哟。

为了让大家能轻松愉快地跟着我的代码动手测试，更为了让一点计算机基础都没有的小伙伴也能跟着我下面的代码来自己动手玩耍，我先简单给出一个基础的HTML，大家可以像我这样新建一个HTML文件，然后复制下面的代码到文件中：(不知道怎么用记事本建html的小伙伴可以去看我的另外一篇文章：使用 Notepad 或 TextEdit 来编写 HTML。)

一，正方形

<html>
<body>
<h1>有趣的前端图形</h1>
<div id="square">
</div>
<style>
 #square {
 width: 100px;
 height: 100px;
 background: red;
 }
</style>
</body>
</html>

好了，现在点击使用浏览器打开上面的文件，是不是看到了下面的图像呢：

如果你已经看到了上面的图像，那么恭喜你，你可以继续往下看下去了，下面有更多有趣的图形等着你哦。

二、圆形

将下面的代码放到<style></style>中，并把<div>中的id改为circle

#circle {
 width: 100px;
 height: 100px;
 background: red;
 -moz-border-radius: 50px;
 -webkit-border-radius: 50px;
 border-radius: 50px;
}

你就得到了一个可爱的圆：

当然颜色啥的，可以随便改啊~

三、椭圆

#oval {
 width: 200px;
 height: 100px;
 background: red;
 -moz-border-radius: 100px / 50px;
 -webkit-border-radius: 100px / 50px;
 border-radius: 100px / 50px;
}

结果如下：

四、三角形

正三角：

#triangle-up {
 width: 0;
 height: 0;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 border-bottom: 100px solid red;
}

倒三角：

#triangle-down {
 width: 0;
 height: 0;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 border-top: 100px solid red;
}

五、五角星

#star-five {
 margin: 50px 0;
 position: relative;
 display: block;
 color: red;
 width: 0px;
 height: 0px;
 border-right: 100px solid transparent;
 border-bottom: 70px solid red;
 border-left: 100px solid transparent;
 -moz-transform: rotate(35deg);
 -webkit-transform: rotate(35deg);
 -ms-transform: rotate(35deg);
 -o-transform: rotate(35deg);
}
#star-five:before {
 border-bottom: 80px solid red;
 border-left: 30px solid transparent;
 border-right: 30px solid transparent;
 position: absolute;
 height: 0;
 width: 0;
 top: -45px;
 left: -65px;
 display: block;
 content: '';
 -webkit-transform: rotate(-35deg);
 -moz-transform: rotate(-35deg);
 -ms-transform: rotate(-35deg);
 -o-transform: rotate(-35deg);
 
}
#star-five:after {
 position: absolute;
 display: block;
 color: red;
 top: 3px;
 left: -105px;
 width: 0px;
 height: 0px;
 border-right: 100px solid transparent;
 border-bottom: 70px solid red;
 border-left: 100px solid transparent;
 -webkit-transform: rotate(-70deg);
 -moz-transform: rotate(-70deg);
 -ms-transform: rotate(-70deg);
 -o-transform: rotate(-70deg);
 content: '';
}

结果：

六、六角星

#star-six {
 width: 0;
 height: 0;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 border-bottom: 100px solid red;
 position: relative;
}
#star-six:after {
 width: 0;
 height: 0;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 border-top: 100px solid red;
 position: absolute;
 content: "";
 top: 30px;
 left: -50px;
}

七、无穷符号

长这样：

#infinity {
 position: relative;
 width: 212px;
 height: 100px;
}
 
#infinity:before,
#infinity:after {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 60px;
 height: 60px;
 border: 20px solid red;
 -moz-border-radius: 50px 50px 0 50px;
 border-radius: 50px 50px 0 50px;
 -webkit-transform: rotate(-45deg);
 -moz-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
 -o-transform: rotate(-45deg);
 transform: rotate(-45deg);
}
 
#infinity:after {
 left: auto;
 right: 0;
 -moz-border-radius: 50px 50px 50px 0;
 border-radius: 50px 50px 50px 0;
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 transform: rotate(45deg);
}

八、心形~~

最后来一个爱你的形状吧~~~~

心形~~~

先放最终结果：

代码：

#heart {
 position: relative;
 width: 100px;
 height: 90px;
}
#heart:before,
#heart:after {
 position: absolute;
 content: "";
 left: 50px;
 top: 0;
 width: 50px;
 height: 80px;
 background: red;
 -moz-border-radius: 50px 50px 0 0;
 border-radius: 50px 50px 0 0;
 -webkit-transform: rotate(-45deg);
 -moz-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
 -o-transform: rotate(-45deg);
 transform: rotate(-45deg);
 -webkit-transform-origin: 0 100%;
 -moz-transform-origin: 0 100%;
 -ms-transform-origin: 0 100%;
 -o-transform-origin: 0 100%;
 transform-origin: 0 100%;
}
#heart:after {
 left: 0;
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 transform: rotate(45deg);
 -webkit-transform-origin: 100% 100%;
 -moz-transform-origin: 100% 100%;
 -ms-transform-origin: 100% 100%;
 -o-transform-origin: 100% 100%;
 transform-origin :100% 100%;
}

更多好玩的图形，尽在hello程序媛哦~~

当然，上面的代码我也已经整理好啦，需要的童鞋可以私信我领取代码呀。

另外，不懂如何使用电脑自带的记事本编辑html的小伙伴，也可以私信问我哦，我一定知无不答答无不尽~~


在线咨询
上一篇：15个好看的Bootstrap HTML网站模板下载
下一篇：IT兄弟连 HTML5教程 多媒体应用 HTML图像地图

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 长宁县 曲阳县 府谷县 施甸县 抚顺 江洲区 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服