css画图那些事

上一篇css3写了一些基本的图形，想到是不是能用css3画个动物，便在网上找图片。于是选中一只大鹏鸟

也不难，一步步的写出身体部位，再定位上去就好了。来一张效果图，后面给两个加了动画，稍微难看一点，后期慢慢修改

<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<style type="text/css">

    body{

        font-size:;

        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:;

        height:;

        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:;

        height:;

        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:;

        height:;

        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)}

    }

</style>

<body>

    <div class="wrap">

        <div class="a"></div>

        <div class="b"></div>

        <div class="c"></div>

        <div class="d"></div>

        <div class="e"></div>

        <div class="f"></div>

        <div class="g"></div>

        <div class="h"></div>

        <div class="i"></div>

        <div class="j j_"></div>

        <div class="j k"></div>

        <div class="j l"></div>

        <div class="j n"></div>

        <div class="j m"></div>

        <div class="j o"></div>

    </div>

</body>

</html>

css画图那些事的更多相关文章

基于单个 div 的 CSS 画图
原文: Single Div Drawings with CSS 译文: 基于单个 div 的 CSS 画图译者: 前端外刊评论译注:通读本文,强烈地感受到了技术与艺术的结合.赞作者的这句话:Re ...
关于CSS的那些事？
关于CSS的那些事? 它有精准定位与排版,使得网页布局.信息排版一目了然:它有多姿多彩的样式属性,使得网页中各元素千变万化:它有神奇的渲染天赋,使得网页有了如诗如画.别具一格的魅力.你知道它了吗?没错 ...
7件你不知道但可以用CSS做的事
不管你信不信,CSS和JavaScript开始重叠,就像CSS增加了更多功能一新.在我写“你可能不知道的CSS和JavaScript互相影响的5种方式”一文时,人们对于JavaScript和CSS是如 ...
有关CSS的一些事
看到两篇关于CSS的文章,总结的非常好.因为没有那个网站的账号,没法收藏转发,所以把链接贴在这里,分享给大家.这两篇文章对于初学CSS的人来说,总结得很精炼准确,而且通俗易懂.推荐~ 有关CSS的一些 ...
CSS画图
The Shapes of CSS All of the below use only a single HTML element. Any kind of CSS goes, as long as ...
背景图片与 CSS的那些事
在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:background-position: 0px 0px; 3)百分比:ba ...
css 样式那些事
1. input placeholder 的颜色修改 ::-moz-placeholder { color: #f3d999; } ::-webkit-input-placeholder { ...
css居中那些事
一.css垂直居中 1.line-height(适用于单行文本居中) eg: html:<p class="wordp">123</p>- css: .w ...
使用CSS画图之三角形(一)
简单的画一个三角形,代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

随机推荐

Css3不透明
Css3允许你使用opacity(不透明)属性设置元素的不透明度实例: <img src="1.jpg" alt=“view”> img{ opacity:0.45: ...
Emgucv(一)Aforge切换摄像头并调用摄像头属性
一.新建一个Windows窗体应用程序,在Form1窗体上添加一个PictureBox控件.一个ComboBox控件,命名为PictureBox1.cbCapture,还有两个Button控件,Tex ...
fzu 2163
Problem 2163 多米诺骨牌 Accept: 17 Submit: 50Time Limit: 1000 mSec Memory Limit : 32768 KB Problem ...
南阳nyoj 509 因子和阶乘
因子和阶乘时间限制:1000 ms | 内存限制:65535 KB 难度:2 http://acm.nyist.net/JudgeOnline/problem.php?pid=509 描述给 ...
js 数组删除元素，并获得真实长度
前言:js数组删除一般采用数组的 splice 方法和 delete 方法,但是采用 delete 方法后直接数组.kength 来获取数组长度是获取不了真实长度的,下面详细讲解一下. 一.splic ...
洛谷P4360 [CEOI2004]锯木厂选址(dp 斜率优化)
题意题目链接 Sol 枚举第二个球放的位置,用前缀和推一波之后发现可以斜率优化 // luogu-judger-enable-o2 #include<bits/stdc++.h> #de ...
textarea显示默认值
点击不显示默认值,鼠标离开如果没有内容就显示默认值,如果有内容就显示内容. <textarea class="area" onfocus="if(value=='请 ...
python 字符串的方法和注释
capitalize() 把字符串的第一个字符改为大写 casefold() 把整个字符串的所有字符改为小写 center(width) 将字符串居中,并使用空格填充至长度 width 的新字符串 c ...
CSS 小结笔记之背景
背景相关属性主要有: background-color 背景颜色 background-image 背景图片 background-repeat 是否平铺 repeat (默认平铺) | repea ...
Chrome 插件推荐
我在这里就是抛砖引玉,各位开发者,有更好的插件请不要吝啬,分享出来. 希望世界和平! 翻译类沙拉查词目前使用,感觉挺好的,各种词典,还有统计.划词划句都可以翻译出来. JSON 格式转换 JSON ...

css画图那些事

css画图那些事的更多相关文章

随机推荐

热门专题