一些css3简单的练习

html代码如下：

源代码下载地址：http://download.csdn.net/my

css代码如下

* {
   margin:0;
   padding:0;
}
#wrapper {
   width:255px;
   height:255px;
   position:relative;
   margin:100px auto;
   -webkit-transform:rotate(-45deg);
   -moz-transform:rotate(-45deg);
   -o-transform:rotate(-45deg);
   -ms-transform:rotate(-45deg);
   transform:rotate(-45deg);
}
.eye {
   background:rgb(94,186,44);
   width:30px;
   height:30px;
   position:absolute;
   border:60px solid rgb(94,186,44);
   border-radius:160px;
}
.left {
   background: transparent;
   left: 0;
   top: 0;
}
.right {
   right: 0;
   top: 0;
}
.right .ball {
   width:30px;
   height:30px;
   background:transparent;
   border:20px solid #fff;
   position:absolute;
   top:-20px;
   left:-20px;
   border-radius:160px;
}
.mouth {
   width:135px;
   height:45px;
   border:60px solid rgb(94,186,44);
   position:absolute;
   bottom:0;
   z-index:-1;
   border-radius:160px;

}

预览效果：

一些css3简单的练习相关推荐

h5+css3简单实现网页端五子棋游戏1.0版
H5+css3简单实现五子棋游戏原理主要使用H5的拖拽接口功能,通过拖拽移动棋子,目标位置通过接收拖拽棋子的拷贝元素,实现棋子摆放. 效果图如下步骤第一步:简单排版五子棋游戏页面,设定好棋盘排 ...
CSS3简单特效--animation实现流光按钮
CSS3简单特效–animation实现流光按钮在学习css3的过程中,发现很多看着炫酷的效果,利用css3的属性能很简单的实现,animation是css3动画效果中常见的属性.下面让我们了解一下 ...
CSS3 简单3D旋转画册
CSS3 简单3D旋转画册上次我们简单介绍了c3的一些基础知识,我们今天来做一个小练习: 这个简单的案例是3D的一个旋转画册,那么上面是我们的一个效果图,因为不能够传视屏所以就暂时只能够截图来看一下 ...
CSS3简单特效--transform实现翻书效果
CSS3简单特效–transform实现翻书效果上一篇介绍了animation如何实现流光按钮效果,现给大家介绍一下如何利用css3的transform属性实现鼠标停留实现翻书的效果,下图是鼠标停在 ...
用css3简单实现进度条
2019独角兽企业重金招聘Python工程师标准>>> css3是一个神奇的东西,刚才一时手痒,写了一个很简单的进度条不用js: 直接嵌套一个div,然后设置里面的div用anima ...
faq页面 html csdn,jQuery和css3简单实用的FAQ问答页面模板
如果你的系统需要这样一种用于为用户解答各种问题的FAQ系统,那么这个FAQ模板是你最好的选择.这个FAQ插件是响应式的,使用jQuery和css3制作,同时在不支持JAVASCRIPT的浏览器上也能正 ...
css3简单实现页面中出现雪花飘落效果
快要到圣诞节了,浏览了常去看的学习网站,发现那个网站多了一层雪花飘落的遮罩层,感觉挺有假日气氛的.就自己尝试写了个简单的雪花飘落的遮罩层,大致效果如下: 雪花是透明背景的图片,通过css动画来调整雪花 ...
教大家写几个可能用得上的css3简单动画
例子1:菊花状的Loading效果第一步画出静态的小菊花. sk-fading-circle {width: 40px;height: 40px;position: relative; } .sk- ...
CSS3简单魔方动画效果
CSS简单魔方效果在魔方效果中我们主要用到的是animation动画,transition(过渡),transform(变换) 首先我们在body里面下我们需要的标签元素 <body>& ...
SVG+CSS3 简单线条动画
CSS3: #g1 path {stroke-dasharray: 1000;/*当线条很长很长的时候,这个值也要相应的的增大,否则会导致线条变成线段*/stroke-dashoffset: 1000 ...

一些css3简单的练习

一些css3简单的练习相关推荐

最新文章

热门文章