用HTML、CSS实现动画

最新推荐文章于 2024-06-19 14:45:15 发布
最新推荐文章于 2024-06-19 14:45:15 发布
阅读量83 收藏
点赞数 3
分类专栏： 前端学习 文章标签： javascript 前端 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_79896868/article/details/138849581
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        :root{
            --h1:#1b2f90;
            --bg:#f9f9f6;
            --t:2s;
        }
        body{
            /* background: url(1.png) no-repeat center top; */
            background: orange;
            background-size: 100% auto;
        }
        .dog{
            width:300px;
            height: 400px;
            position: relative;
            top: 560px;
            left: 270px;
        }
        .center{
            position: absolute;
            left: 50%;
            transform: translate(-50%,0);
        }
        .forhead{
            width: 102px;
            height: 48px;
            background: var(--bg);
            z-index: 1;
            border-radius: 51px/40px 40px 8px 8px;
        }
        .face{
            width: 110px;
            height: 68px;
            background: var(--bg);
            border-radius: 50%;
            z-index: 1;
            top: 20px;
        }
        .chin{
            width: 104px;
            height:36px;
            background: var(--bg);
            border-radius: 52px/0px 0px 36px 36px;
            z-index: 1;
            top: 60px;
        }
        .ear{
            width: 16px;
            height:70px;
            background: var(--h1);
            border-radius: 50%;
            position: absolute;
            z-index: 0;
            left:50%;
            top:34px;
            transform-origin: 50% 0;
            transform: translate(-42px,0) rotate(10deg);
            animation: rotate var(--t) ease-out infinite;
        }
        .ear.right{
            transform: scale(-1,1) translate(-26px,0) rotate(10deg) ;
            animation: rotate-r var(--t) ease-out infinite;
        }
        .birthmark{
            width: 30px;
            height:36px;
            background: var(--h1);
            border-radius:15px/17px 23px 2px 13px;
            position: absolute;
            z-index: 1;
            left:50%;
            top:10px;
            transform: translate(15px,0) rotate(-10deg);
        }
        .eye{
            width: 24px;
            height:24px;
            background: var(--bg);
            border-radius: 12px/13px 12px 12px 0px;
            position: absolute;
            z-index: 2;
            left:50%;
            top:20px;
            transform-origin: 50% 0;
            transform: translate(-44px,0) rotate(10deg);
            box-shadow: 1px 0px 0 0px #000 inset,-1px 0px 5px 1px #ddd;
            overflow: hidden;
        }
        .eye.right{
            transform: scale(-1,1) translate(-20px,0) rotate(10deg) ;
            box-shadow: 1px 0px 0 0px #000 inset;
        }
        .pupil{
            width: 26px;
            height:26px;
            background: #e79101;
            border-radius: 50%;
            position: absolute;
            left: 3px;
            top:1px;
            box-shadow: 0 0 8px 0 #000 inset;            
            animation: translate var(--t) ease-out infinite;
        }
        .pupil:before{
            width: 18px;
            height: 18px;
            background: #000;
            border-radius: 50%;
            position: absolute;
            left: 50%;
            top:50%;
            transform:translate(-50%,-50%);
            content: '';
        }
        .pupil:after{
            width: 5px;
            height: 5px;
            background: #fff;
            border-radius: 50%;
            position: absolute;
            left: 3px;
            top:7px;
            content: '';
        }
        .nose{
            width: 62px;
            height: 32px;
            top: 42px;
            background: #363035;
            z-index: 3;
            border-radius: 31px/10px 10px 22px 22px;
        }
        .nose::before{
            content: '';
            width: 60px;
            height: 10px;
            position: absolute;
            left: 50%;
            top: 1px;
            transform: translate(-50%,0);
            border-radius: 30px / 8px 8px 2px 2px;
            background: linear-gradient(30deg,#fff 0%,#fff 8%,#b1aeb1 15%,#b1aeb1 50%,#544d53 100%);
        }
        .nostrill{
            width: 15px;
            height: 4px;
            top: 19px;
            background: linear-gradient(0deg,#363035 0%,#000 100%);
            position: absolute;
            left: 50%;
            border-radius: 50%;
            transform: translate(-21px,0) rotate(30deg);
            animation: resize var(--t) ease-out infinite;
        }
        .nostrill.right{
            transform:scale(-1,1) translate(-7px,0) rotate(30deg);
        }
        .mouth{
            width: 68px;
            height: 25px;
            background: #671316;
            border-radius: 34px/0px 0px 27px 27px;
            z-index: 1;
            box-shadow: 0 0 4px 0 #000 inset;
            top: 68px;
            animation: open var(--t) ease-out infinite;
        }
        .mouth::before{
            width: 68px;
            height: 8px;
            background: var(--bg);
            border-radius: 34px/0 0 5px 5px;
            content: '';
            position: absolute;
            /*display:block;*/
            z-index:1 ;
        }
        .teen{
            width:8px ;
            height: 3px;
            background: var(--bg);
            border-radius:4px/0 0 0 1px ;
            position: absolute;
            left: 50%;
            top:7px;
            transform: translate(-8px,0);
            z-index: 1;
        }
        .teen.right{
            transform: scale(-1,1) translate(0px,0);
            border-right:.5px solid #ddd;
        }
        .tongue{
            width: 34px;
            height: 14px;
            background:#a2504f;
            border-radius: 17px/0 0 7px 7px;
            z-index: 0;
            box-shadow:0 0 4px 0 #111 inset;
            animation: extend var(--t) ease-out infinite;
        }
        .body{
            width:66px;
            height: 70px;
            background: var(--bg);
            top:89px;
            border-radius: 50%;
        }
        .arm{
            width:26px;
            height: 40px;
            background: var(--bg);
            position:absolute ;
            top:5px;
            left: 50%;
            border-radius: 13px/20px 0 14px 20px;
            transform: translate(-43px,0) rotate(21deg);
        }
        .arm::before{
            content: '';
            width: 5px;
            height: 20px;
            border-radius: 5px/10px 0 0 10px;
            box-shadow: -1px 0 0px 0 rgba(200,200,200,0.5);
            position: absolute;
            right: 6px;
            top: 14px;
            transform: rotate(-5deg);
        }
        .arm.right{
            transform: scale(-1,1) translate(-17px,0) rotate(21deg);
        }
        .leg{
            width: 29px;
            height: 50px;
            background: linear-gradient(-85deg,#ddd 0%,#ddd 5%,#fff 20%,#fff 100%);
            position: absolute;
            left: 50%;
            top: 40px;
            border-radius: 15px/5px 5px  15px 45px ;
            transform: translate(-32px,0);
        }
        .leg.right{
            transform:scale(-1,1) translate(-3px,0);
        }
        .foot{
            width: 29px;
            height: 15px;
            background:linear-gradient(-120deg,#ddd 0%,#ddd 10%,#fff 30%,#fff 100%);
            position: absolute;
            left: 2px;
            bottom: -8px;
            border-radius: 15px/10px 10px 5px 5px;
        }.belly{
            z-index: 2;
            width: 60px;
            height: 36px;
            background:linear-gradient(0deg,#ddd 0%,#fff 20%,#fff 100%);
            border-radius: 30px/0 0 36px 36px;
            top:34px
        }
        @keyframes rotate{
            0%{transform: translate(-42px,0) rotate(10deg);}
            50%{transform: translate(-42px,0) rotate(30deg);}
            100%{transform: translate(-42px,0) rotate(10deg);}
        }
        @keyframes rotate-r{
            0%{transform: scale(-1,1) translate(-26px,0) rotate(10deg) ;}
            50%{transform: scale(-1,1) translate(-26px,0) rotate(30deg) ;}
            100%{transform: scale(-1,1) translate(-26px,0) rotate(10deg) ;}
        }
        @keyframes translate{
            0%{left: 3px;}
            50%{left: 6px;}
            100%{left: 3px;}
        }
        @keyframes resize{
            0%{height: 4px;}
            50%{height: 3px;}
            100%{height: 4px;}
        }
        @keyframes extend{
            0%{height: 14px;}
            50%{height: 23px;}
            100%{height: 14px;}
        }
        @keyframes open{
            0%{height: 27px;border-radius: 34px/0px 0px 27px 27px;}
            50%{height: 20px;border-radius: 34px/0px 0px 20px 27px;}
            100%{height: 27px;border-radius: 34px/0px 0px 27px 27px;}
        }
    </style>
</head>
<body>
    <div class="dog">
        <div class="forhead center"></div>
        <div class="face center"></div>
        <div class="chin center"></div>
        <div class="ear"></div>
        <div class="ear right"></div>
        <div class="birthmark"></div>
        <div class="eye">
            <div class="pupil"></div>
        </div>
        <div class="eye right">
            <div class="pupil"></div>
        </div>
        <div class="nose center">
            <div class="nostrill"></div>
            <div class="nostrill right"></div>
        </div>
        <div class="mouth center">
            <div class="teen"></div>
            <div class="teen right"></div>
            <div class="tongue center"></div>
        </div>
        <div class="body center">
            <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 class="belly center "></div>
        </div>
    </div>
</body>
</html>

ZIM学编程
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html+css翻页动画效果
01-27
【html+css】翻页动画效果，64行代码实现翻页动画效果
用CSS实现动画.docx
02-22
用css实现方块的动画效果。在逆战班学习有一段时间了，学到了很多有关HTML5的知识，接下来讲一讲CSS3实现动画。 动画是使元素从一种样式逐渐变化为另一种样式的效果。可通过设置多个节点来精确控制一个或一组动画，...
HTML+CSS实现动画效果
weixin_46058007的博客
03-01 555
前端html+css渲染的页面，有动画效果，三行情诗列表，回旋镖，旋转太极，背景颜色的动画
纯HTML+CSS实现动画
cnds123的专栏
06-11 2099
这是从网上收集来的纯HTML+CSS实现的几个网页动画，生动形象，比较有参考价值。
HTML+CSS实现加载动画
weixin_44260108的博客
12-30 466
使用CSS、HTML来实现内容加载的动画效果
HTML CSS实现翻页效果（动画）
boundle_ss的博客
01-05 5326
有详情注释说明 <html> <style> * { padding: 0; margin: 0; } body, html { height: 100%; } body { /*perspective 属性指定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果。z>0的三维元素比正常大，而z<0时则比正常小， 大小程度由该属性的值决定。默认情况下，消失点位于元素的中心，但是可以通..
CSS实现展开动画
Runnymmede的博客
06-05 1270
展开收起效果是比较常见的一种交互方式，通常的做法是控制display属性值在none和其它值之间切换，虽说功能可以实现，但是效果略显生硬，所以会有这样的需求——希望元素展开收起能具有平滑的效果。
HTML+CSS3实现扩散圈动画
西柚2015地信小白GISer
05-11 2616
实现原理： 一个扩散圈整个为一个大盒子 中间有一个小圆点 周围有扩散的圆圈（利用动画来实现，通过控制每个小圆圈的动画延迟来实现扩散效果） 代码： !important关键词可以提升样式权重 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=ed...
css实现炫酷充电动画
分享互联网的有趣知识~
03-15 4258
一直以来，css实现水流动画是非常困难的，这里通过一些css技巧来实现水流的动画效果，通过电池充电来体现该效果的真实感。
纯CSS实现点击动画
小多的博客
08-30 5998
暂不推荐该方法，a标签会跳转页面，且不能直接第二次点击取消样式，需要设置href和id。：点击label内部文本可以触发该控件，实现点击选择框或文字都可以出现动画效果。＃ 锚的名称是在一个文件中链接到某个元素的URL。元素被链接到目标元素。选择器可用于当前活动的target元素的样式。属性实现选中未选择变化。...
CSS 实现音频loding动画
苏苏就是小苏苏的博客
12-06 2887
CSS 实现音频loding动画
html用css完成动画效果图,利用CSS Sprite实现PNG图片动画
weixin_31047023的博客
06-04 893
利用CSS Sprite实现PNG图片动画12月 6, 2012评论 (6)Sponsor如题，今天将会和大家讲解如何利用CSS Sprite(CSS雪碧)来实现PNG图片动画，就像GIF一样，也许你会问为什么不直接用GIF来制作，哪是因为GIF制作出来的色彩实际太低，为了得到更好的颜色，所以使用PNG是最好不过了。1.HTML代码：2.CSS代码：div {width: 50px;height:...
html+css实现火箭飞行动画.zip
11-30
这是一款用纯CSS3打造的3D太空飞船动画，从夜空背景，到飞船上的每一个细节，都使用了CSS3来实现，所以尽管是比较复杂的页面，加载速度也很快。另外，这款CSS3飞船动画可以在左上角的控制面板中控制飞船的不同视角，...
纯CSS实现语音动画.docx
05-11
总结起来，这个纯CSS实现的语音动画利用了CSS的动画框架和伪类选择器，巧妙地创建了一种动态的波浪形视觉效果，适用于微信小程序或其他Web应用中的录音界面，以提升交互体验。这种技术的优点在于它不依赖JavaScript...
html+css实现雪花飘落动画.rar
08-17
html+css实现雪花慢慢向下飘落的动画效果
工具链--nuxt框架 简介（一）
qq_35876316的博客
06-16 382
Nuxt框架是一个基于Vue.js的服务器端渲染（SSR）框架，旨在提供一套完整的前端开发解决方案，帮助开发者构建高性能、可扩展的Web应用。是一个功能强大、易于使用的Web开发框架，适用于多种开发场景和需求。Nuxt框架建立在Vue.js之上，它抽象出了管理异步数据、中间件和路由所涉及的大部分复杂配置。Nuxt不仅继承了Vue.js的所有优点，如易用性、灵活性等，还与Node.js紧密集成，使得开发者可以在项目中轻松地使用Node.js的各种功能。
一个很好用的地图工具的使用：思极地图，以及vue+思极地图的使用
浩星
06-18 407
思极地图，给我们带来了很多便利，这里分享下他的信息与使用。
使用nvm管理nodejs版本，设置淘宝NPM镜像源
最新发布
d312697510的博客
06-19 185
使用nvm管理nodejs版本，设置淘宝NPM镜像源，修改新的镜像源地址
【element 】修改下拉菜单＜el-dropdown样式为横向（超简单）
qq_61798306的博客
06-18 274
【element 】修改下拉菜单
html中css实现动画
06-06
HTML中可以通过CSS实现动画效果。以下是一个简单的例子： ```html <!DOCTYPE html> <html> .box { width: 100px; height: 100px; background-color: red; position: relative; animation-name:...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值