摘要:上一篇写了一些基本的图形,想到是不是能用画个动物,便在网上找图片。于是选中一只大鹏鸟也不难,一步步的写出身体部位,再定位上去就好了。来一张效果图,后面给两个加了动画,稍微难看一点,后期慢慢修改
上一篇css3写了一些基本的图形,想到是不是能用css3画个动物,便在网上找图片。于是选中一只大鹏鸟
也不难,一步步的写出身体部位,再定位上去就好了。来一张效果图,后面给两个加了动画,稍微难看一点,后期慢慢修改
</>复制代码
- body{
- font-size: 0;
- text-align: center;
- }
- .wrap{
- position: relative;
- width: 500px;
- margin: 0 auto;
- }
- .a{
- display: inline-block;
- margin-top: 30px;
- width: 250px;
- height: 240px;
- background-color:#f2b22e;
- border: 1px solid #f2b22e;
- border-radius: 60% 60% 70% 70%;
- }
- .b{
- display: inline-block;
- width: 0;
- height: 0;
- border-bottom:40px solid #f2b22e;
- border-right: 60px solid transparent;
- border-left: 12px solid transparent;
- transform: rotate(40deg);
- position: absolute;
- top: 26px;
- right: 115px;
- }
- .c{
- display: inline-block;
- width: 0;
- height: 0;
- border-top:60px solid #f2b22e;
- border-right: 60px solid transparent;
- border-left: 12px solid transparent;
- transform: rotate(140deg);
- position: absolute;
- top: 26px;
- left: 105px;
- }
- .d{
- width: 100px;
- height: 40px;
- border-radius: 50%;
- border:1px solid #f2b22e;
- background-color: #f2b22e;
- transform: rotate(0deg);
- position: absolute;
- top: 150px;
- right: 72px;
- animation: bird_right 0.5s linear infinite;
- }
- .e{
- width: 100px;
- height: 40px;
- border-radius: 50%;
- border:1px solid #f2b22e;
- background-color: #f2b22e;
- transform: rotate(0deg);
- position: absolute;
- top: 150px;
- left: 72px;
- animation: bird_left 0.5s linear infinite;
- }
- .f{
- width: 40px;
- height: 40px;
- border: 20px solid #fff;
- border-radius: 50%;
- background-color: #000;
- position: absolute;
- top: 80px;
- left: 155px;
- }
- .g{
- width: 40px;
- height: 40px;
- border: 20px solid #fff;
- border-radius: 50%;
- background-color: #000;
- position: absolute;
- top: 80px;
- right: 155px;
- }
- .h{
- width: 0;
- height: 0;
- border-top:20px solid #e27326;
- border-left:20px solid transparent;
- border-right:20px solid transparent;
- position: absolute;
- top: 147px;
- left: 230px;
- }
- .i{
- width: 160px;
- height: 100px;
- border:1px solid #f3cc74;
- background-color: #f3cc74;
- border-radius: 50%;
- position: absolute;
- bottom: 0px;
- left: 170px;
- }
- .j{
- width: 12px;
- border-bottom:20px solid #e27326;
- border-radius: 50%;
- position: absolute;
- }
- .j_{
- bottom: 14px;
- left: 163px;
- }
- .k{
- left: 155px;
- bottom: 18px;
- }
- .l{
- left: 170px;
- bottom: 10px;
- }
- .n{
- bottom: 10px;
- right: 163px;
- }
- .m{
- bottom: 18px;
- right: 155px;
- }
- .o{
- bottom: 5px;
- right: 170px;
- }
- @-webkit-keyframes bird_left{
- 0% {transform:rotate(0deg)}
- 10% {transform:rotate(-10deg)}
- 20% {transform:rotate(-20deg)}
- 40% {transform:rotate(-30deg)}
- 60% {transform:rotate(-40deg)}
- 80% {transform:rotate(-50deg)}
- 100% {transform:rotate(-60deg)}
- }
- @-webkit-keyframes bird_right{
- 0% {transform:rotate(0deg)}
- 10% {transform:rotate(10deg)}
- 20% {transform:rotate(20deg)}
- 40% {transform:rotate(30deg)}
- 60% {transform:rotate(40deg)}
- 80% {transform:rotate(50deg)}
- 100% {transform:rotate(60deg)}
- }
- @-moz-keyframes bird_right{
- 0% {transform:rotate(0deg)}
- 10% {transform:rotate(10deg)}
- 20% {transform:rotate(20deg)}
- 40% {transform:rotate(30deg)}
- 60% {transform:rotate(40deg)}
- 80% {transform:rotate(50deg)}
- 100% {transform:rotate(60deg)}
- }
- @-moz-keyframes bird_left{
- 0% {transform:rotate(0deg)}
- 10% {transform:rotate(-10deg)}
- 20% {transform:rotate(-20deg)}
- 40% {transform:rotate(-30deg)}
- 60% {transform:rotate(-40deg)}
- 80% {transform:rotate(-50deg)}
- 100% {transform:rotate(-60deg)}
- }
- @-o-keyframes bird_left{
- 0% {transform:rotate(0deg)}
- 10% {transform:rotate(-10deg)}
- 20% {transform:rotate(-20deg)}
- 40% {transform:rotate(-30deg)}
- 60% {transform:rotate(-40deg)}
- 80% {transform:rotate(-50deg)}
- 100% {transform:rotate(-60deg)}
- }
- @-o-keyframes bird_right{
- 0% {transform:rotate(0deg)}
- 10% {transform:rotate(10deg)}
- 20% {transform:rotate(20deg)}
- 40% {transform:rotate(30deg)}
- 60% {transform:rotate(40deg)}
- 80% {transform:rotate(50deg)}
- 100% {transform:rotate(60deg)}
- }
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/1982.html
摘要:闲来无事,写写图形。当时巩固一下吧。前端小白,写的不好还请前辈多指教。正方形,椭圆,和梯形。然后在设置一个倾斜就好了闲来无事,写写图形。当时巩固一下css3吧.。前端小白,写的不好还请前辈多指教。 三角形 { width: 0; height: 0; border-bottom: 140px solid red ; border-right: 70...
摘要:声明的变量不得改变值,这意味着,一旦声明变量,就必须立即初始化,不能留到以后赋值。 虽然今年没有换工作的打算 但为了跟上时代的脚步 还是忍不住整理了一份最新前端知识点 知识点汇总 1.HTML HTML5新特性,语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签IE6 bug,和一些定位写法css js放置位置和原因...
摘要:声明的变量不得改变值,这意味着,一旦声明变量,就必须立即初始化,不能留到以后赋值。 虽然今年没有换工作的打算 但为了跟上时代的脚步 还是忍不住整理了一份最新前端知识点 知识点汇总 1.HTML HTML5新特性,语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签IE6 bug,和一些定位写法css js放置位置和原因...
摘要:声明的变量不得改变值,这意味着,一旦声明变量,就必须立即初始化,不能留到以后赋值。 虽然今年没有换工作的打算 但为了跟上时代的脚步 还是忍不住整理了一份最新前端知识点 知识点汇总 1.HTML HTML5新特性,语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签IE6 bug,和一些定位写法css js放置位置和原因...
摘要:小程序和的页面展示特殊字体有一个网站,叫有字库。这就是直接再页面上显示文字的办法这个在和小程序上面都可以使用的,非常方便。接下来就是画图了。引入就是用小程序的引入字体方法啦。 请看清楚我虚线下面所有的话。横线上的废话随便你看不看。说实话这个字体已经把我折腾的死去活来了一段时间,而且我们项目还经常要画分享图去刷朋友圈,默认字体没办法达到设计的那种效果,查了不少资料,也自己摸索了半天,最后...
阅读 3287·2021-10-12 10:20
阅读 2979·2021-09-27 13:56
阅读 917·2021-09-27 13:36
阅读 1533·2021-09-26 09:46
阅读 2557·2019-08-30 14:02
阅读 2768·2019-08-28 18:14
阅读 1353·2019-08-26 10:32
阅读 1796·2019-08-23 18:25