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 ...
随机推荐
- Git报错：error: cannot open .git/FETCH_HEAD: Read-only file system
Git:git pull时报错 error: cannot open .git/FETCH_HEAD: Read-only file system 查看该文件: 未在网上找到解决办法,重启服务器就好了 ...
- [转]SQL SERVER中openrowset与opendatasource的区别
本文转自:http://blog.sina.com.cn/s/blog_6399df820102vyy8.html SQL SERVER中openrowset与opendatasource的区别: o ...
- JS中的拖动之—— ondragstart，ondrag，ondragend ， ondragenter ， ondragover ， ondragleave， ondrop 的区别
关于 HTML5 中的拖动功能. 更多信息可以查看我们 HTML 教程中的 HTML5 拖放.以下 我只做一下简介. 1 如果你想让元素变得可拖动,首先 你得对元素设置 draggable 属性 此属 ...
- 浅谈angular2与angularJS的区别
简介 大家好,今天给大家介绍一下angular,相信做过前端的小伙伴们都知道angular的大名,angularJS自2012年发布起就受到了大家的广泛关注.他首次提出了双向绑定概念让所有人都耳目一新 ...
- 【转】手机web前端调试页面的几种方式
前言 PC端web页面调试比较容易,这里主要说几种移动端调试的方法,从简单到复杂.从模拟调试到远程调试,大概分为几部分: 1.Chrome DevTools(谷歌浏览器)的模拟手机调试 2.weinr ...
- 【转】Java线程详解
Java线程:概念与原理 一.操作系统中线程和进程的概念 现在的操作系统是多任务操作系统.多线程是实现多任务的一种方式. 进程是指一个内存中运行的应用程序,每个进程都有自己独立的一块内存空间,一个进程 ...
- vs2017调试源代码
最近刚入职 ,带我得导师发给我一堆项目,什么云端和医院端,各种wcf服务.window服务和一些公共类库来回调用.搞得是迷迷糊糊,晕头转向.反正是一脸大萌比... 不过经过几个日日夜夜得不停奋战,大致 ...
- java 内存分析之堆栈空间
package Demo; public class Demo { public static void main(String[] args) { Demo demo = new Demo(); ; ...
- 外业数据采集平台(GPS+Android Studio+Arcgis for android 100.2.1)
外业数据采集平台 1. 综述 在室外,通过平板或者手机接收GPS坐标,实时绘制点.线.面数据,以便为后续进行海域监测.土地确权.地图绘图提供有效数据和依据. 2. 技术路线 Android studi ...
- scp远程传输文件和ssh远程连接
ssh使用方法 如果从一台linux服务器通过ssh远程登录到另一台Linux机器, 这种情况通常会在多台服务器的时候用到. 如用root帐号连接一个IP为192.168.1.102的机器,输入:“ ...