css3画半圆 , 加上一点动画
border-radius制作半圆与制作圆形的方法是一样的,只是元素的宽度与圆角方位要配合一致,不同的宽度和高度比例,以及圆角方位,可以制作上半圆、下半圆、左半圆和右半圆效果。例如:
.semicircle { margin: 30px;
}
.top {
width: 100px;/*宽度为高度的2倍*/
height: 50px;
border-radius: 50px 50px 0 0;/*圆角半径为高度的值*/
}
.right {
height: 100px;/*高度为宽度的2倍*/
width: 50px;
border-radius: 0 50px 50px 0;/*圆角半径为宽度的值*/
}
.bottom {
width: 100px;/*宽度为高度的2倍*/
height: 50px;
border-radius: 0 0 50px 50px;/*圆角半径为高度的值*/
}
.left {
width: 50px;
height: 100px;/*高度为宽度的2倍*/
border-radius: 50px 0 0 50px;/*圆角半径为宽度的值*/
}
转自:http://www.cnblogs.com/afuge/p/4631173.html
-----------------------------
补充下,需要,我的实际使用, 加了点动画
.circlebg{
background-color: #0081EE;
width: 200px;/*宽度为高度的2倍*/
height: 100px;
border-radius: 100px 100px 0 0;/*圆角半径为高度的值*/ -webkit-transform: rotate(320deg);
filter:alpha(Opacity=70);
-moz-opacity:0.7;
opacity: 0.7; //-webkit-animation:gogogo 2s infinite linear ; // infinite 无限次 -webkit-animation:gogogo 0.2s linear ;
}
@-webkit-keyframes gogogo {
0%{
-webkit-transform: rotate(0deg);
filter:alpha(Opacity=30);
-moz-opacity:0.3;
opacity: 0.3;
}
50%{
-webkit-transform: rotate(160deg);
filter:alpha(Opacity=50);
-moz-opacity:0.5;
opacity: 0.5;
}
100%{
-webkit-transform: rotate(320deg);
filter:alpha(Opacity=70);
-moz-opacity:0.7;
opacity: 0.7;
}
}
效果就是 一个0.2 会旋转的一个半圆 效果。
css3画半圆 , 加上一点动画的更多相关文章
- css3画半圆的两种方法
<html lang="en"> <head> <meta charset="UTF-8"> <meta name=& ...
- css3画半圆
border-radius制作半圆与制作圆形的方法是一样的,只是元素的宽度与圆角方位要配合一致,不同的宽度和高度比例,以及圆角方位,可以制作上半圆.下半圆.左半圆和右半圆效果.例如:.semicirc ...
- css3 画半圆和1/4圆
半圆: #circle1 { width: 100px; height: 200px; background-color: #a72525; -webkit-border-radius: 100px ...
- html5+css3画太极并添加动画效果
可兼容移动端视图 效果图如下:太极图是可以旋转的 具体实现如下: <!DOCTYPE html> <html lang="zh"> <head> ...
- 纯CSS3画出小黄人并实现动画效果
前言 前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的 ...
- 一款纯css3实现的超炫动画背画特效
之前为大家介绍了很多款由纯css3实现的特效.今天要再给大家带来一款纯css3实现的超炫动画背画特效.代码非常简单,没有引用任何其它js代码.css代码也不多.效果非常炫.一起看下效果图: 在线预览 ...
- 使用CSS3画出一个叮当猫
刚学习了这个案例,然后觉得比较好玩,就练习了一下.然后发现其实也不难,如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易的事,至少我是这么觉得.但是,用CSS3画出来确实是第一次接触 ...
- 如何使用CSS3画出一个叮当猫
刚学习了这个案例,然后觉得比较好玩,就练习了一下.然后发现其实也不难,如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易 的事,至少我是这么觉得.但是,用CSS3画出来确实是第一次接 ...
- (转)利用 SVG 和 CSS3 实现有趣的边框动画
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
随机推荐
- 实现可搜索仿select下拉选中
由于在优化项目中,发现先前写的一个活化石级的的可搜索下拉功能在高速搜索中会出现卡顿现象 1.起初的解决方法是在搜索事件中加入防抖函数隔一段时间才去触发他,同时搜索的不再是html文档片段,而是直接对数 ...
- 剑指offer四十一之和为S的连续正数序列
一.题目 题目描述:小明很喜欢数学,有一天他在做数学作业时,要求计算出9~16的和,他马上就写出了正确答案是100.但是他并不满足于此,他在想究竟有多少种连续的正数序列的和为100(至少包括两个数 ...
- Explorer内存占用偶尔变高导致卡顿
症状: 打开 "这台电脑",加载缓慢.此时查看任务管理器,explorer内存可能飙升到几G.cpu也很高 创建和删除文件缓慢,删除单个文件也会出现进度条.此时查看任务管理器,会出 ...
- Dubbo-使用Maven构建Dubbo服务的可执行jar包
一.为什么要构建Dubbo服务的可执行jar包? 1.1 Dubbo服务运行方式比较 ✎使用Servlet容器运行(Tomcat.Jetty等) ---不可取 --缺点:增加复杂性(多了容器的端口) ...
- 【树】Sum Root to Leaf Numbers
题目: Given a binary tree containing digits from 0-9 only, each root-to-leaf path could represent a nu ...
- Jar包的格式
jar包目录格式: |-- com | |-- test.class |-- META-INF | |-- MAINFEST.MF 一个正常的jar包下必有META-INF/MANIFEST.MF清单 ...
- java.io.Serializable的作用
Serializable,之前一直有使用,默认的实体类就会实现Serializable接口,对具体原因一直不是很了解,同时如果没有实现序列化,同样没什么影响,什么时候应该进行序列化操作呢?今天查了下资 ...
- Deep Residual Learning for Image Recognition(残差网络)
深度在神经网络中有及其重要的作用,但越深的网络越难训练. 随着深度的增加,从训练一开始,梯度消失或梯度爆炸就会阻止收敛,normalized initialization和intermediate n ...
- java 使用 pdf.js 在线查看 pdf 文档
1. 下载对应的 pdf.js 文件: 推荐地址: https://github.com/mozilla/pdf.js/ http://mozilla.g ...
- Tornado异步IO
Tornado提供了强大的异步IO机制,提高了服务器的响应能力. @tornado.web.asynchronous tornado默认在处理函数返回时关闭链接,@tornado.web.asynch ...