纯CSS实现
一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第20天,点击查看活动详情。
我正在参加 码上掘金体验活动,详情:show出你的创意代码块
嗨!大家好!我是手可摘棉花,一名前端开发,很开心在这里分享文章,期待着大家的点赞与关注➕。
介绍
今天来给大家介绍一下纯css实现丑萌丑萌的小熊猫动画效果,本文涉及的知识点看过前面的文章应该也有所了解,html+css,css3动画效果,旋转,放大动画使用.下面来给大家详细介绍一下整个制作的过程.
代码块
code.juejin.cn/pen/7089266…
代码介绍
本文小熊猫动画分成两部分完成,一是完成小熊猫制作,二给小熊猫添加动画效果,动画意思是小熊猫小手求抱抱的动画,旁边几个小星星放大闪动的效果。
1. 小熊猫的制作
小熊猫的制作分为头部(包括眼睛+鼻子+耳朵),身体,小手,小腿。
1.1 小熊猫的头部(包括眼睛+鼻子+耳朵)这部分实现是整个制作中比较多内容的部分,小熊猫的脸部外形篇肥嘟嘟,可能我调节的还不够很好,通过圆角去调节;鼻子两边的两边撇使用的圆角不同颜色的折叠遮罩,耳朵也是椭圆形通过定位左右两侧。用了旋转跟圆角属性还有定位去操作。
html:
<div class="head-box"> <div class="eye"></div> <div class="eye eye-right"></div> <div class="nose"> <div class="nose-line"></div> <div class="nose-line nose-line2"></div> <div class="nose-round"></div> </div> <div class="ear"></div> <div class="ear ear-right"></div> </div>
样式:
.head-box{ width: 230px; height: 200px; background: #fff; border: 4px solid; border-radius: 95% 74% 74% 60%/67% 81% 58% 63%; position: relative; } .eye{ width: 40px; height: 42px; background: #020202; border-radius: 74% 40% 65% 38%; position: absolute; top: 95px; left: 40px; transform: rotate(-10deg); z-index: 2; } .eye::after{ content: ""; width: 8px; height: 10px; background: #fff; border-radius: 80% 26% 74% 38%; position: absolute; left: 20px; top: 9px; transform: rotate(0); } .eye-right{ left: 140px; transform: rotate(-80deg); } .eye-right::after{ left: 23px; top: 12px; transform: rotate(-65deg); } .nose{ position: absolute; top: 105px; left: 100px; } .nose-round{ width: 24px; height: 18px; background: #020202; border-radius: 0 60% 70% 80%; position: absolute; } .nose-line{ width: 32px; height: 14px; background: #020202; border-radius: 50%; position: absolute; top: 12px; left: -16px; transform: rotate(-36deg); } .nose-line::after{ content: ""; width: 32px; height: 14px; background: #fff; border-radius: 50%; position: absolute; top: -6px; left: 0px; transform: rotate(-4deg); } .nose-line2{ left: 6px; transform: rotate(32deg); } .nose-line2::after{ top: -6px; left: 0px; transform: rotate(-4deg); } /* 耳朵 */ .ear{ width: 90px; height: 100px; background: #020202; border-radius: 60%; position: absolute; left: -28px; top: -16px; z-index: -1; } .ear-right{ left: 154px; } 1.2 小熊猫的身体,手,腿
小熊猫身体画的比头小一些,显得可爱一点,小手画的长一些对于后期的小手求抱抱动画比较好,小腿画的短一点。
html:
<div class="body"> <div class="body-r"></div> <div class="hand hand-left"></div> <div class="hand hand-right"></div> <div class="leg leg-left"></div> <div class="leg leg-right"></div> </div>
样式:
.body{ position: absolute; left: 51px; top: 181px; z-index: -1; } .body-r{ width: 150px; height: 104px; border-radius: 52px 50px 42px 42px; border: 4px solid; background: #fff; } /* 手 */ .hand{ width: 50px; height: 100px; background: #020202; border-radius: 46%; position: absolute; top: -42px; left: -48px; z-index: -1; transform: rotate(128deg); } .hand-right{ left: 132px; transform: rotate(63deg); } /* 腿 */ .leg{ width: 45px; height: 48px; background: #020202; border-radius: 0 0 32% 84%; position: absolute; top: 87px; left: 18px; z-index: -1; transform: rotate(6deg); } .leg-right{ left: 101px; border-radius: 0 0 84% 32%; transform: rotate(-10deg); } 1.3 小星星实现
html:
<div class="star1">✦</div> <div class="star1 star2">✦</div> <div class="star1 star3">✦</div>
样式:
.star1{ font-size: 52px; color: #FCFFB5; position: absolute; top: 74px; left: -96px; transform: rotate(9deg) skew(27deg,-13deg); } .star2{ top: -52px; left: 280px; font-size: 90px; transform: rotate(30deg) skew(27deg,-13deg); } .star3{ top: 224px; left: 238px; font-size: 40px; transform: rotate(30deg) skew(27deg,-13deg); }
2. 小熊猫动画和小星星闪动实现
2.1 小熊猫求抱抱动画小熊猫求抱抱动画先实现左手动画再实现右手动画, 左边通过控制动画基点transform-origin: right top;调整小手的位置,再通过动画旋转角度添加过去transform: rotate(106deg); 角度差不多就行,弄起来看得流畅就好,右侧一样的道理。
样式
.hand-left{ top: 56px; left: -45px; transform-origin: right top; animation: swing 0.5s linear infinite alternate; } @keyframes swing{ 0%{ transform: rotate(106deg); } 100%{ transform: rotate(132deg); } } .hand-right{ top: -90px; left: 112px; transform-origin: left bottom; animation: swingR 0.5s linear infinite alternate; } @keyframes swingR{ 0%{ transform: rotate(68deg); } 100%{ transform: rotate(43deg); } } 2.2 小星星闪动动画
小星星闪动动画就是简单的放大缩小调整一下透明度就行。
样式:
.star1{ animation: flash 0.3s ease infinite alternate; } @keyframes flash{ 0%{ transform: scale(1.5); opacity: 0.6; } 50%{ transform: scale(1.2); opacity: 0.8; } 100%{ transform: scale(1); opacity: 1; } }
总结
本文主要介绍了小熊猫制作还有求抱抱的动画过程,制作过程是比较繁琐的,一步步的通过css绘画,慢慢调节细节,圆角用的比较多。以上就介绍到这里,感谢大家的观看,谢谢~
网址:纯CSS实现 https://mxgxt.com/news/view/720761
相关内容
HTML5期末作业:明星网站设计与实现——明星薛之谦介绍网页设计7个页面HTML+CSS+JavaScript用DIV+CSS技术设计的明星个人网站制作(基于HTML+CSS+JavaScript制作明星彭于晏网页)@TOC 一、
HTML5+CSS大作业——游戏明星介绍(5页)常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、
HTML5期末大作业:明星个人介绍网站设计——杨洋(10页) HTML+CSS+JavaScript 个人网页制作 学生个人网页Dreamweaver设计作业 学生HTML个人网页作业作品下载
jquery星星评分插件Bootstrap Star Rating
jQuery动态效果显示人物结构关系图的方法
基于JavaScript实现自定义滚动条 爱问知识人
分享几个超级震憾的图片特效 爱问知识人
周冬雨马思纯,真实关...
bur…哥,所以沈翊其实是你的伪装色,你本质其实纯纯搞笑男是吧