CSS3之动画狗

已于 2023-02-15 09:36:38 修改
阅读量334 收藏
点赞数 1
分类专栏： 寒假前端 文章标签： css3 css 前端
于 2020-01-30 21:27:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lbs311709000127/article/details/104119203
版权

这个会动的哦，今天花了一下午的时间做的。

效果：

html代码：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="{CHARSET}"/>
		<title></title>
		<link rel="stylesheet" href="3.css">
	</head>
	<body>
		<div class="bg">
			<div>生</div>
			<div>日</div>
			<div>快</div>
			<div>乐</div>
		</div>
		<div class="dog">
			<div class="head"></div>
			<div class="face"></div>
			<div class="chin"></div>
			<div class="eye right">
				<div class="pupil"></div>
			</div>
			<div class="eye left">
				<div class="pupil"></div>
			</div>
			<div class="birthmark"></div>
			<div class="nose">
				<div class="nosehole"></div>
				<div class="nosehole right"></div>
			</div>
			<div class="mouth">
				<div class="teeth"></div>
				<div class="teeth right"></div>
				<div class="tongue"></div>
			</div>
			<div class="ear"></div>
			<div class="ear right"></div>
			<div class="body">
				<div class="arm"></div>
				<div class="arm right"></div>
				<div class="leg">
					<div class="foot"></div>
				</div>
				<div class="leg right">
					<div class="foot"></div>
				</div>
			</div>
			<div class="belly"></div>
		</div>
	</body>
</html>

css3代码：

.dog{
	position:relative;
	width: 200px; 
	height: 200px; 
	margin: 30px auto;
	transform: scale(2.5, 2.5);
	transform-origin: 50% 0;
	text-align: center;
}
.bg{
	position:absolute;
	width: 500px; 
	height: 500px; 
	top: 30px;
    left: 420px;
	animation: bg 8s ease-out infinite;
}
.head{
	position: absolute;
	width: 102px;
    height: 48px;
    background: rgb(249, 249, 246);
    left: 48px;
    top: 5px;
    border-radius: 48px 48px 3px 3px;
    z-index: 2;
}
.face{
	width: 110px;
    height: 68px;
    position: absolute;
    background: rgb(249, 249, 246);
    top: 30px;
    left: 44px;
    border-radius:100%;
    z-index: 2;
}
.chin{
	width: 104px;
    height: 36px;
    position: absolute;
    top: 70px;
    left: 47px;
    background:rgb(249, 249, 246);
    border-radius: 50% / 0px 0px 36px 36px;
    z-index: 2;
}
.eye{
	width: 24px;
    height: 24px;
    position:absolute;
    border-radius:50%/12px 22px 2px 12px;
    background:#f9f9f6;
    top: 28px;
    left: 124px;
    transform: rotate(-7deg);
    transform-origin: 50% 100%;
    overflow: hidden;
    box-shadow: -1px 1px 0px 0px  #333 inset;
    z-index: 3;
}
.pupil{
	width: 26px;
    height: 26px;
    border-radius: 50%;
    position: absolute;
    left: -5px;
    bottom: -5px;
    background: #e79101;
    box-shadow: 0px 0px 4px 1px #333 inset;
    z-index: 2;
}
.pupil::before{
	content: "";
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    position: absolute;
    top: 6px;
    left: 18px;
    background: #fff;
    z-index: 4;
}
.pupil::after{
	content: "";
    display: block;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    position: absolute;
    top: 4px;
    left: 3px;
    background: black;
    z-index: 2;
}
.eye.left{
	top: 28px;
    left: 51px;
    transform: scale(-1,1) rotate(-6deg);
    box-shadow:  -1px 1px 0px 0px #333 inset, 0px -2px 4px 2px #bbb;
    z-index: 2;
}
.left .pupil{
	 animation: leye 2s ease-out infinite;
}
.right .pupil{
	 animation: reye 2s ease-out infinite;
}
.birthmark{
	width: 30px;
    height: 36px;
    position: absolute;
    background: #1b2f90;
    top: 18px;
    left: 117px;
    transform: rotate(-7deg);
    border-radius: 36px / 43px 72px 0px 43px;
    z-index: 2;
}
.nose{
	    width: 62px;
    height: 32px;
    position: absolute;
    top: 48px;
    left: 68px;
    background: #363035;
    border-radius: 31px / 12px 12px 19px 19px;
    z-index: 4;
}
.nose::before{
	width: 60px;
    height: 12px;
    position: absolute;
    top: 1px;
    left: 1px;
    border-radius: 30px/10px 10px 2px 2px;
    content: "";
    display: block;
    background: linear-gradient(30deg, #fff 0%, #fff 8%, #b1aeb1 15%, #b1aeb1 50%, #544d53 100%);
    z-index: 2;
}
.nosehole{
	position: absolute;
    top: 20px;
    left: 10px;
    width: 15px;
    height: 4px;
    background: linear-gradient(347deg, #363035 0%, #000 50%, #000 100%);
    border-radius: 50%;
    transform: rotate(48deg);
    z-index: 2;
}
.nosehole.right{
	transform: scale(-1,1) rotate(48deg);
    position: absolute;
    left: 36px;
    top: 20px;
    z-index: 2;
}
.mouth{
	width: 68px;
    height: 27px;
    position: absolute;
    left: 65px;
    top: 72px;
    background: #671316;
    border-radius: 50%/0px 0px 100% 100%;
    z-index: 2;
    animation: mouth 2s ease-out infinite;
}
.mouth::before{
	content: '';
    width: 72px;
    height: 12px;
    background: #f9f9f6;
    position: absolute;
    left: -1px;
    top: 0px;
    border-radius: 36px / 0px 0px 14px 14px;
    box-shadow: -1px 7px 8px 2px rgba(155,155,155, 0.2);
    z-index: 3;
}
.teeth{
	width: 8px;
    height: 4px;
    background: #f9f9f6;
    position: absolute;
    top: 11px;
    left: 26px;
    border-radius: 3px / 0 0 0 1px;
    border-right: .2px solid rgba(0, 0, 0, 0.5);
    z-index: 3;
}
.teeth.right{
	transform: scale(-1,1);
    top: 11px;
    left: 34px;
}
.tongue{
	width: 34px;
    height: 14px;
	box-shadow: 0px 0px 2px 0px rgba(143, 32, 33, 1) inset;
	position: absolute;
	top: 11px;
	left: 17px;
	border-radius: 17px / 0px 0px 11px 11px;
	background: #a2504f;
	z-index: 1;
	animation: tongue 2s ease-out infinite;
}
.ear{
	background: #1b2f90;
    width: 16px;
    height: 70px;
    border-radius: 50%;
    position: absolute;
    top: 42px;
    left: 52px;
    transform: rotate(10deg);
    animation: lear 2s ease-out infinite;
}
.ear.right{
	top: 42px;
    left: 130px;
	transform: rotate(-10deg);
	z-index: 0;
	animation: rear 2s ease-out infinite;
}
.body{
	width: 66px;
    height: 70px;
    position: absolute;
    top: 100px;
    left: 67px;
    background: #f9f9f6;
    border-radius: 50%;
}
.arm{
	width: 26px;
    height: 40px;
    position: absolute;
    top: 5px;
    left: -7px;
    background: #f9f9f6;
    border-radius: 26px / 26px 0 0 45px;
    transform: rotate(20deg);
}
.arm.right{
	transform: scale(-1, 1) rotate(20deg);
    left: 47px;
}
.arm:before {
    content: '';
    position: absolute;
    right: 3px;
    top: 10px;
    height: 30px;
    width: 10px;
    border-radius: 10px / 10px 0 0 30px;
    box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1);
}
.leg{
	width: 29px;
    height: 50px;
    position: absolute;
    top: 36px;
    left: 0px;
    background: linear-gradient(-90deg, #ccc 0%, #f9f9f6 20%, #f9f9f6 100%);
    border-radius: 26px / 26px 0 26px 74px;
}
.leg.right{
	transform: scale(-1, 1);
    left: 37px;
}
.foot{
	width: 29px;
    height: 15px;
    position: absolute;
    bottom: -10px;
    left: 2px;
    background: linear-gradient(227deg, #ccc 0%, #f9f9f6 30%, #f9f9f6 100%);
    border-radius: 15px / 20px 24px 5px 5px;
}
.belly{
	width: 60px;
    height: 36px;
    position: absolute;
    bottom: 28px;
    left: 70px;
    background: linear-gradient(0deg, #ccc 0%, #f9f9f6 20%, #f9f9f6 100%);
    border-radius: 33px / 0px 0px 35px 35px;
}
@keyframes lear{
	0%{transform: rotate(10deg);}
	50%{transform: rotate(20deg);}
	100%{transform: rotate(0deg);}
}
@keyframes rear{
	0%{transform: rotate(-10deg);}
	50%{transform: rotate(-20deg);}
	100%{transform: rotate(0deg);}
}
@keyframes tongue{
	0%{top: 0px;}
	50%{top: 11px;}
	100%{top: 0px;}
}
@keyframes mouth{
	0%{height: 27px;}
	50%{height: 15px;}
	100%{height: 27px;}
}
@keyframes reye{
	0%{left: -5px;bottom: -5px;}
	50%{left: -8px;bottom: -5px;}
	100%{left: -5px;bottom: -5px;}
}
@keyframes leye{
	0%{left: -5px;bottom: -5px;}
	50%{left: -8px;bottom: -5px;}
	100%{left: -5px;bottom: -5px;}
}
@keyframes bg{
	0%{transform:  rotate(0deg) ;background: skyblue;}
	25%{transform: rotate(-90deg) ;background: sienna;}
	50%{transform: rotate(-180deg) ;background: sandybrown;}
	75%{transform: rotate(-270deg) ;background: gold;}
	100%{transform: rotate(-360deg) ;background: tomato;}
}
@font-face {
	font-family:"龙吟体";
	src: url("font字体/FZZJ-LongYTJW.TTF");
}
.bg>div{
	font-family: "龙吟体";
	font-size: 100px;
}
.bg>div:nth-child(1){
	position: absolute;
	left: 0px;
	top: 0px;
}
.bg>div:nth-child(2){
	position: absolute;
	left: 400px;
	top: 0px;
}
.bg>div:nth-child(3){
	position: absolute;
	left: 0px;
	top: 380px;
}
.bg>div:nth-child(4){
	position: absolute;
	left: 400px;
	top: 380px;
}
body:hover .bg{
	animation-play-state: paused;
}

我在这里面还用了一个字体，可能显示不了。

弄完就一个感觉，累！！ 

小青龙8085
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3 动画
H.千面的博客
12-17 149
一、相关知识点 1、动画的基本使用 制作动画分为两步： （1） 先定义动画 （2）再使用（调用）动画 （1）用keyframes 定义动画（类似定义类选择器） @keyframes 动画名称 { 0%{ width:100px; } 100%{ width:200px; } } （2）元素使用动画 2、动画常用属性 3、动画简写属性 二、案例：热点图案例 波纹的部分是缩放的 其中图片是资源，如下图： 代码： 定义动画： 70%不要使用transform: scale(
纯CSS3卡通小黄狗动画特效
07-24
在本文中，我们将深入探讨如何使用CSS3技术创建一个纯卡通风格的小黄狗动画特效。这个特效展示了小黄狗摇动尾巴的动态画面，既可爱又生动，充分体现了CSS3的强大功能。 首先，CSS3（Cascading Style Sheets level 3...
css3的动画效果
xuxuechao6的博客
11-11 302
CSS3 @keyframes 规则 如需在 CSS3 中创建动画，您需要学习 @keyframes 规则。 @keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。 浏览器支持 属性 浏览器支持 @keyframes      
CSS3动画（秒懂创建与使用动画）
最新发布
百赢出品，必属精品
04-18 1202
要创建 CSS3 动画，你需要了解 @keyframes 规则。@keyframes 规则是创建动画。@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。CSS动画是通过CSS样式表来创建动态效果的技术。使用@keyframes规则定义动画的关键帧，描述动画在不同时间点的状态。使用animation属性将动画应用到元素上，包括动画名称、持续时间、时间函数、延迟等。使用等属性控制动画的延迟、重复次数、方向等。使用transition。
html下拉 小狗,纯CSS3小狗动画
weixin_35089515的博客
06-03 306
csshtml, body {background: #1D4569;height: 100%;width: 100%;}.dog {width: 120px;position: relative;left: 50%;top: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}.body {...
CSS3热狗下雨背景动画特效
07-24
本话题聚焦于一个独特的CSS3应用——“热狗下雨背景动画特效”。 这个特效将网页背景设置为一个热狗下雨的情景，给用户带来新颖且有趣的视觉体验。在描述中提到的“玉米狗下雨背景”，可能是指热狗形状的雨滴形象...
纯css3卡通小狗动画特效
07-24
在本文中，我们将深入探讨如何使用CSS3技术创建一个生动有趣的卡通小狗动画特效。这个特效主要涉及HTML结构和CSS3的动画属性，使得一个小黄狗的形象能够栩栩如生地摇动尾巴，带给用户视觉上的趣味体验。 首先，我们...
CSS3动画
m0_73442777的博客
06-17 55
动画( animation)是[CSS3]中具有颠覆性的特征之ー,可通过设置多个节点来精确控制一个或一组动画常用来实现复杂的动画效果。 相比较过渡，动画可以实现更多变化，更多控制，连续自动插放等效果。
CSS3可爱小狗摇尾巴动画特效
12-29
CSS3可爱小狗摇尾巴动画特效 html5代码 纯css的 兼容性好
css3垂直动画特效
08-20
CSS3垂直动画特效是指使用CSS3技术实现的一种垂直方向上的动画效果。CSS3提供了一系列的动画特性，如transform、transition、animation等，可以让开发者通过设置属性值来实现各种各样的动画效果。 常见的CSS3垂直...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值