纯css3+html仓鼠动画代码html特效免费分享可以预览animation

 2021-11-16    1425  

css3+html仓鼠动画代码

需要熟练掌握animation用法

定义和用法

animation 属性是一个简写属性,用于设置六个动画属性:

  • animation-name

  • animation-duration

  • animation-timing-function

  • animation-delay

  • animation-iteration-count

  • animation-direction

注释:请始终规定 animation-duration 属性,否则时长为 0,就不会播放动画了。



2222.JPG 纯css3+html仓鼠动画代码html特效免费分享可以预览animation  div 网页设计作业 网页制作作业 第1张 

效果预览

http://www.202class.com/css/cangshu.html

代码:两部分 css+html , 直接复制,建立先的html文件就可以打开

 <!DOCTYPE html>    
<html lang="en">    
<head>    
<meta charset="UTF-8">    
<title>css3+html仓鼠动画代码 🐹</title>    
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">    
<link rel="stylesheet" href="./style.css">    
<style>    
* {    
border: 0;    
box-sizing: border-box;    
margin: 0;    
padding: 0    
}    
:root {    
--bg: hsl(90, 90%, 20%);    
--fg: hsl(223, 10%, 10%);    
font-size: calc(16px+(24 - 16) *(100vw - 320px) /(1280 - 320))    
}    
body {    
background: var(--bg);    
color: var(--fg);    
font: 1em/1.5 sans-serif;    
height: 100vh;    
display: grid;    
place-items: center    
}    
.wheel-and-hamster {    
--dur: 1s;    
position: relative;    
width: 12em;    
height: 12em    
}    
.wheel,    
.hamster,    
.hamster div,    
.spoke {    
position: absolute    
}    
.wheel,    
.spoke {    
border-radius: 50%;    
top: 0;    
left: 0;    
width: 100%;    
height: 100%    
}    
.wheel {    
background: radial-gradient(100% 100% at center, hsla(0, 0%, 60%, 0) 47.8%, hsl(0, 0%, 60%) 48%);    
z-index: 2    
}    
.hamster {    
animation: hamster var(--dur) ease-in-out infinite;    
top: 50%;    
left: calc(50% - 3.5em);    
width: 7em;    
height: 3.75em;    
transform: rotate(4deg) translate(-0.8em, 1.85em);    
transform-origin: 50% 0;    
z-index: 1    
}    
.hamster__head {    
animation: hamsterHead var(--dur) ease-in-out infinite;    
background: hsl(30, 90%, 55%);    
border-radius: 70% 30% 0 100% / 40% 25% 25% 60%;    
box-shadow: 0 -0.25em 0 hsl(30, 90%, 80%) inset, 0.75em -1.55em 0 hsl(30, 90%, 90%) inset;    
top: 0;    
left: -2em;    
width: 2.75em;    
height: 2.5em;    
transform-origin: 100% 50%    
}    
.hamster__ear {    
animation: hamsterEar var(--dur) ease-in-out infinite;    
background: hsl(0, 90%, 85%);    
border-radius: 50%;    
box-shadow: -0.25em 0 hsl(30, 90%, 55%) inset;    
top: -0.25em;    
right: -0.25em;    
width: .75em;    
height: .75em;    
transform-origin: 50% 75%    
}    
.hamster__eye {    
animation: hamsterEye var(--dur) linear infinite;    
background-color: hsl(0, 0%, 0%);    
border-radius: 50%;    
top: .375em;    
left: 1.25em;    
width: .5em;    
height: .5em    
}    
.hamster__nose {    
background: hsl(0, 90%, 75%);    
border-radius: 35% 65% 85% 15% / 70% 50% 50% 30%;    
top: .75em;    
left: 0;    
width: .2em;    
height: .25em    
}    
.hamster__body {    
animation: hamsterBody var(--dur) ease-in-out infinite;    
background: hsl(30, 90%, 90%);    
border-radius: 50% 30% 50% 30% / 15% 60% 40% 40%;    
box-shadow: .1em .75em 0 hsl(30, 90%, 55%) inset, 0.15em -0.5em 0 hsl(30, 90%, 80%) inset;    
top: .25em;    
left: 2em;    
width: 4.5em;    
height: 3em;    
transform-origin: 17% 50%;    
transform-style: preserve-3d    
}    
.hamster__limb--fr,    
.hamster__limb--fl {    
clip-path: polygon(0 0, 100% 0, 70% 80%, 60% 100%, 0% 100%, 40% 80%);    
top: 2em;    
left: .5em;    
width: 1em;    
height: 1.5em;    
transform-origin: 50% 0    
}    
.hamster__limb--fr {    
animation: hamsterFRLimb var(--dur) linear infinite;    
background: linear-gradient(hsl(30, 90%, 80%) 80%, hsl(0, 90%, 75%) 80%);    
transform: rotate(15deg) translateZ(-1px)    
}    
.hamster__limb--fl {    
animation: hamsterFLLimb var(--dur) linear infinite;    
background: linear-gradient(hsl(30, 90%, 90%) 80%, hsl(0, 90%, 85%) 80%);    
transform: rotate(15deg)    
}    
.hamster__limb--br,    
.hamster__limb--bl {    
border-radius: .75em .75em 0 0;    
clip-path: polygon(0 0, 100% 0, 100% 30%, 70% 90%, 70% 100%, 30% 100%, 40% 90%, 0% 30%);    
top: 1em;    
left: 2.8em;    
width: 1.5em;    
height: 2.5em;    
transform-origin: 50% 30%    
}    
.hamster__limb--br {    
animation: hamsterBRLimb var(--dur) linear infinite;    
background: linear-gradient(hsl(30, 90%, 80%) 90%, hsl(0, 90%, 75%) 90%);    
transform: rotate(-25deg) translateZ(-1px)    
}    
.hamster__limb--bl {    
animation: hamsterBLLimb var(--dur) linear infinite;    
background: linear-gradient(hsl(30, 90%, 90%) 90%, hsl(0, 90%, 85%) 90%);    
transform: rotate(-25deg)    
}    
.hamster__tail {    
animation: hamsterTail var(--dur) linear infinite;    
background: hsl(0, 90%, 85%);    
border-radius: .25em 50% 50% .25em;    
box-shadow: 0 -0.2em 0 hsl(0, 90%, 75%) inset;    
top: 1.5em;    
right: -0.5em;    
width: 1em;    
height: .5em;    
transform: rotate(30deg) translateZ(-1px);    
transform-origin: .25em .25em    
}    
.spoke {    
animation: spoke var(--dur) linear infinite;    
background: radial-gradient(100% 100% at center, hsl(0, 0%, 60%) 4.8%, hsla(0, 0%, 60%, 0) 5%), linear-gradient(hsla(0, 0%, 55%, 0) 46.9%, hsl(0, 0%, 65%) 47% 52.9%, hsla(0, 0%, 65%, 0) 53%) 50% 50% / 99% 99% no-repeat    
}    
@keyframes hamster {    
from,    
to {    
transform: rotate(4deg) translate(-0.8em, 1.85em)    
}    
50% {    
transform: rotate(0) translate(-0.8em, 1.85em)    
}    
}    
@keyframes hamsterHead {    
from,    
25%,    
50%,    
75%,    
to {    
transform: rotate(0)    
}    
12.5%,    
37.5%,    
62.5%,    
87.5% {    
transform: rotate(8deg)    
}    
}    
@keyframes hamsterEye {    
from,    
90%,    
to {    
transform: scaleY(1)    
}    
95% {    
transform: scaleY(0)    
}    
}    
@keyframes hamsterEar {    
from,    
25%,    
50%,    
75%,    
to {    
transform: rotate(0)    
}    
12.5%,    
37.5%,    
62.5%,    
87.5% {    
transform: rotate(12deg)    
}    
}    
@keyframes hamsterBody {    
from,    
25%,    
50%,    
75%,    
to {    
transform: rotate(0)    
}    
12.5%,    
37.5%,    
62.5%,    
87.5% {    
transform: rotate(-2deg)    
}    
}    
@keyframes hamsterFRLimb {    
from,    
25%,    
50%,    
75%,    
to {    
transform: rotate(50deg) translateZ(-1px)    
}    
12.5%,    
37.5%,    
62.5%,    
87.5% {    
transform: rotate(-30deg) translateZ(-1px)    
}    
}    
@keyframes hamsterFLLimb {    
from,    
25%,    
50%,    
75%,    
to {    
transform: rotate(-30deg)    
}    
12.5%,    
37.5%,    
62.5%,    
87.5% {    
transform: rotate(50deg)    
}    
}    
@keyframes hamsterBRLimb {    
from,    
25%,    
50%,    
75%,    
to {    
transform: rotate(-60deg) translateZ(-1px)    
}    
12.5%,    
37.5%,    
62.5%,    
87.5% {    
transform: rotate(20deg) translateZ(-1px)    
}    
}    
@keyframes hamsterBLLimb {    
from,    
25%,    
50%,    
75%,    
to {    
transform: rotate(20deg)    
}    
12.5%,    
37.5%,    
62.5%,    
87.5% {    
transform: rotate(-60deg)    
}    
}    
@keyframes hamsterTail {    
from,    
25%,    
50%,    
75%,    
to {    
transform: rotate(30deg) translateZ(-1px)    
}    
12.5%,    
37.5%,    
62.5%,    
87.5% {    
transform: rotate(10deg) translateZ(-1px)    
}    
}    
@keyframes spoke {    
from {    
transform: rotate(0)    
}    
to {    
transform: rotate(-1turn)    
}    
}    
</style>    
</head>    
<body>    
<!-- partial:index.partial.html -->    
<h1>css3+html仓鼠动画代码</h1>    
<h2><a href="http://www.202class.com/css">网页设计与制作作业</a> <a href="http://www.202class.com/css">www.202class.com</a>整理 </h2>    
<div class="wheel-and-hamster" role="img" aria-label="Orange and tan hamster running in a metal wheel">    
<div class="wheel"></div>    
<div class="hamster">    
<div class="hamster__body">    
<div class="hamster__head">    
<div class="hamster__ear"></div>    
<div class="hamster__eye"></div>    
<div class="hamster__nose"></div>    
</div>    
<div class="hamster__limb hamster__limb--fr"></div>    
<div class="hamster__limb hamster__limb--fl"></div>    
<div class="hamster__limb hamster__limb--br"></div>    
<div class="hamster__limb hamster__limb--bl"></div>    
<div class="hamster__tail"></div>    
</div>    
</div>    
<div class="spoke"></div>    
</div>    
<!-- partial -->    
</body>    
</html>


  • 评论列表
  •   w***8(匿名)
    发布于 2022-08-20 14:06:16  回复
  • 这家网站设计的很不错,设计人员的服务态度都是很不错的,在设计的过程中遇到的问题也能及时的得到解决。刚开始觉得自己对这方面没什么经验,抱着试试的心态试一试,把自己的想法告诉了技术人员,没想到效果是出乎意料的好,设计出的网站就是我想要的。技术人员也都很专业,有什么不满意的也可以告诉他们,让他们进行修改。
  •   浅***妈(匿名
    发布于 2022-08-20 14:06:16  回复
  • 客服非常有耐心,会一步一步地指导。回复速度也很快,提的要求都能满足,是一次非常好的体验。
  •   程***e(匿名)
    发布于 2022-08-20 14:06:16  回复
  • 很负责,很有耐心,做出来的效果跟我预期的一样,强烈推荐

发表评论:

原文链接:http://www.202class.com/post/2021-11-16-16-47-50-ycz.html

=========================================

http://www.202class.com/ 为 “202Class网页程序开发站” 唯一官方服务平台,请勿相信其他任何渠道。


电话