CSS3之绽放的花朵(网页效果--每日一更)
今天,带来的是纯CSS3打造的效果--绽放的花朵。
先来看效果吧:亲,请点击这里
这是纯CSS3样式打造的效果,关键是采用了animation属性和transform属性。详细请看下面代码。
HTML结构:
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
<div class="div6"></div>
<div class="div7"></div>
<div class="div8"></div>
<div class="div9"></div>
CSS样式:
<style type="text/css">
.div1{
position:absolute;
top:300px;left:500px;
background:pink;opacity:0.6;width:300px;height:300px;
z-index:;
border-radius:300px 0px;;
-webkit-transform-origin: 0px 300px;
-webkit-transform: rotate(-45deg);
-webkit-animation:wa1 10s ease 2s infinite alternate;
transform-origin: 0px 300px;
transform: rotate(-45deg);
animation:a1 10s ease 2s infinite alternate;
}
.div2{
position:absolute;
top:300px;left:500px;
background:pink;opacity:0.6;width:300px;height:300px;
z-index:;
border-radius:300px 0px;;
-webkit-transform-origin: 0px 300px;
-webkit-transform: rotate(-45deg);
-webkit-animation:wa2 10s ease 2s infinite alternate;
transform-origin: 0px 300px;
transform: rotate(-45deg);
animation:a2 10s ease 2s infinite alternate; }
.div3{
position:absolute;
top:300px;left:500px;
background:pink;opacity:0.6;width:300px;height:300px;
z-index:;
border-radius:300px 0px;;
-webkit-transform-origin: 0px 300px;
-webkit-transform: rotate(-45deg);
-webkit-animation:wa3 10s ease 2s infinite alternate;
transform-origin: 0px 300px;
transform: rotate(-45deg);
animation:a3 10s ease 2s infinite alternate;
}
.div4{
position:absolute;
top:300px;left:500px;
background:pink;opacity:0.6;width:300px;height:300px;
z-index:;
border-radius:300px 0px;;
-webkit-transform-origin: 0px 300px;
-webkit-transform: rotate(-45deg);
-webkit-animation:wa4 10s ease 2s infinite alternate;
transform-origin: 0px 300px;
transform: rotate(-45deg);
animation:a4 10s ease 2s infinite alternate;
}
.div5{
position:absolute;
top:300px;left:500px;
background:pink;opacity:0.6;width:300px;height:300px;
z-index:;
border-radius:300px 0px;;
-webkit-transform-origin: 0px 300px;
-webkit-transform: rotate(-45deg);
-webkit-animation:wa5 10s ease 2s infinite alternate;
transform-origin: 0px 300px;
transform: rotate(-45deg);
animation:a5 10s ease 2s infinite alternate;
}
.div6{
position:absolute;
top:300px;left:500px;
background:pink;opacity:0.6;width:300px;height:300px;
z-index:;
border-radius:300px 0px;;
-webkit-transform-origin: 0px 300px;
-webkit-transform: rotate(-45deg);
-webkit-animation:wa6 10s ease 2s infinite alternate;
transform-origin: 0px 300px;
transform: rotate(-45deg);
animation:a6 10s ease 2s infinite alternate;
}
.div7{
position:absolute;
top:300px;left:500px;
background:pink;opacity:0.6;width:300px;height:300px;
z-index:;
border-radius:300px 0px;;
-webkit-transform-origin: 0px 300px;
-webkit-transform: rotate(-45deg);
-webkit-animation:wa7 10s ease 2s infinite alternate;
transform-origin: 0px 300px;
transform: rotate(-45deg);
animation:a7 10s ease 2s infinite alternate;
}
.div8{
position:absolute;
top:300px;left:500px;
background:pink;opacity:0.6;width:300px;height:300px;
z-index:;
border-radius:300px 0px;;
-webkit-transform-origin: 0px 300px;
-webkit-transform: rotate(-45deg);
-webkit-animation:wa8 10s ease 2s infinite alternate;
transform-origin: 0px 300px;
transform: rotate(-45deg);
animation:a8 10s ease 2s infinite alternate;
}
.div9{
position:absolute;
top:300px;left:500px;
background:pink;opacity:0.6;width:300px;height:300px;
z-index:;
border-radius:300px 0px;;
-webkit-transform-origin: 0px 300px;
-webkit-transform: rotate(-45deg);
transform-origin: 0px 300px;
transform: rotate(-45deg);
}
@-webkit-keyframes wa1{
from{-webkit-transform: rotate(-45deg);}
to{-webkit-transform: rotate(-125deg);}
}
@keyframes a1{
from{transform: rotate(-45deg);}
to{transform: rotate(-125deg);}
}
@-webkit-keyframes wa2{
from{-webkit-transform: rotate(-45deg);}
to{-webkit-transform: rotate(-105deg);}
}
@keyframes a2{
from{transform: rotate(-45deg);}
to{transform: rotate(-105deg);}
}
@-webkit-keyframes wa3{
from{-webkit-transform: rotate(-45deg);}
to{-webkit-transform: rotate(-85deg);}
}
@keyframes a3{
from{transform: rotate(-45deg);}
to{transform: rotate(-85deg);}
}
@-webkit-keyframes wa7{
from{-webkit-transform: rotate(-45deg);}
to{-webkit-transform: rotate(-65deg);}
}
@keyframes a7{
from{transform: rotate(-45deg);}
to{transform: rotate(-65deg);}
}
@-webkit-keyframes wa4{
from{-webkit-transform: rotate(-45deg);}
to{-webkit-transform: rotate(35deg);}
}
@keyframes a4{
from{transform: rotate(-45deg);}
to{transform: rotate(35deg);}
}
@-webkit-keyframes wa5{
from{-webkit-transform: rotate(-45deg);}
to{-webkit-transform: rotate(15deg);}
}
@keyframes a5{
from{transform: rotate(-45deg);}
to{transform: rotate(15deg);}
}
@-webkit-keyframes wa6{
from{-webkit-transform: rotate(-45deg);}
to{-webkit-transform: rotate(-5deg);}
}
@keyframes a6{
from{transform: rotate(-45deg);}
to{transform: rotate(-5deg);}
}
@-webkit-keyframes wa8{
from{-webkit-transform: rotate(-45deg);}
to{-webkit-transform: rotate(-25deg);}
}
@keyframes a8{
from{transform: rotate(-45deg);}
to{transform: rotate(-25deg);}
}
</style>
首先,先将一个正方形的盒子,通过border-radius属性控制圆角边框,令其展现出花瓣的效果。因为,调整出来的花瓣的顶点是在右上角,所以我们需要将其逆时针旋转45度,令其垂直。然后,就需要定义动画效果了。此例,仅仅是对webkit内核的浏览器和标准浏览器进行配置,如需要对其他浏览器设置兼容,可以将动画效果,@keyfarmes改为-o-keyframes(Opera浏览器),@-moz-keyframes(FireFox浏览器),@-webkit-keyframes(Safari and Chrome浏览器)。当定义好了动画,就可以进行调用了。使用animation:动画名 即可。在此,不详细介绍其参数的含义。小编,觉得应由读者自行了解,方能印象深刻。
注:其中,tranform属性、tranform-origin等属性,对于不同浏览器会产生兼容性问题,只需添加对应的浏览器私有头即可,如上。
享受代码,享受生活,网页效果,每日一更。
CSS3之绽放的花朵(网页效果--每日一更)的更多相关文章
- CSS3之图片3D翻转效果(网页效果--每日一更)
今天,带来的是纯CSS3的效果--图片3D翻转. 请看效果:亲,请点击这里 这个效果主要还是运用了CSS3的transform变形属性,与上个效果不同的是,这次并不是动画,所以没有采用animatio ...
- HTML5之Canvas时钟(网页效果--每日一更)
今天,带来的是使用HTML5中Canvas标签实现的动态时钟效果. 话不多说,先看效果:亲,请点击这里 众所周知,Canvas标签是HTML5中的灵魂,HTML5 Canvas是屏幕上的一个由Java ...
- JQuery图片轮播滚动效果(网页效果--每日一更)
今天,带来的是一个图片的轮播滚动效果! 先来看一下效果展示:亲,请点击这里 原理很简单,设置一个定时器,使图片列表在每隔一段时间后滚动一次.而循环效果,就是在每一滚动的时候,将第一张图片放到最后一张的 ...
- 用户从手机的浏览器访问www.baidu.com,看到的可能跟桌面PC电脑,是不太一样的网页效果,会更适合移动设备使用。请简要分析一下,实现这种网页区分显示的原因及技术原理。
手机的网速问题.屏幕大小.内存.CPU等.通过不同设备的特征,实现不同的网页展现或输出效果.根据useragent.屏幕大小信息.IP.网速.css media Query等原理,实现前端或后端的特征 ...
- 使用 CSS3 动感的图片标题动画效果【附源码下载】
在网站中,有很多地方会需要在图片上显示图片标题.使用 CSS3 过渡和变换可以实现动感的鼠标悬停显示效果.没有使用 JavaScript,所以只能在支持 CSS3 动画的现代浏览器中才能正常工作.您可 ...
- Codrops 教程:基于 CSS3 的精美模态窗口效果
Codrops 分享了漂亮的模态窗口效果实现方法,希望给前端开发人员提供一些创新显示对话框的启示.这个方案使用了触发按钮(或任何的 HTML 元素),在点击的时候出现一个模态窗口,带有简单的过渡(或动 ...
- 使用 jQuery & CSS3 实现优雅的手风琴效果
手风琴效果常用于切换显示一组内容,这种方式既可以节省网页空间又可以有动画效果.今天,我们将创造一个优雅的手风琴内容效果.这个想法是有悬停时滑出一些垂直手风琴标签.我们将添加一些 CSS3 属性来提升外 ...
- 使用css3来实现边框圆角效果
经常看到别人的网站有个边框来修饰文字区域,类似圆角矩形把文字环绕起来,特别有感觉,于是就试着用图片边框来修饰,但是用图片过多会拉慢网页的加载速度,能不能使用css3来实现边框圆角效果呢?当然borde ...
- CSS3实战开发:使用CSS3实现photoshop的过滤效果
原文:CSS3实战开发:使用CSS3实现photoshop的过滤效果 我们知道,使用Photoshop来调整图像的亮度和对比度,或者将图片转化为灰度等等是很常见的功能.今天我将给大家介绍几个新特性,我 ...
随机推荐
- linux环境下jdk的安装步骤
JDK的安装步骤:1. 把jdk文件cp到服务器上2. 加权限 chmod +x 文件3. 执行 ./4.修改配置 vi /etc/profile 最后一行添加:export JAVA_HOME=/ ...
- Android安全之Intent Scheme Url攻击
0X01 前言 Intent scheme url是一种用于在web页面中启动终端app activity的特殊URL,在针对intent scheme URL攻击大爆发之前,很多android的浏览 ...
- mysql将一张表中多条记录按联系整合成一条
现有表如下:id time is_login 3 2012-07-03 11:20:20 13 2012-07-03 11:25:20 04 2012-07-03 12:30:20 14 2012-0 ...
- 在Xcode中使用Git进行源码版本控制
http://www.cocoachina.com/ios/20140524/8536.html 资讯 论坛 代码 工具 招聘 CVP 外快 博客new 登录| 注册 iOS开发 Swift Ap ...
- 大前端学习笔记整理【二】CSS视觉格式化模型
1. 概念 在视觉格式化模型中,文档树中的每个元素都将会根据盒模型产生零到多个盒子.这些盒子的布局由如下因素决定: 盒子的尺寸和类型 定位策略(正常文档流,浮动或者绝对定位) 和文档树中其他元素的关系 ...
- UIScrollView的三个属性
contentSize.contentOffset.contentInset UIScrollView的frame的size 指的是可视范围 contentSize 内容大小,滚动的范围 创 ...
- exp
想将远程机器上的数据库备份,搞了一上午,终于解决了: exp 用户名/密码@ip/service名 file=地址+文件名
- 使用内存虚拟硬盘 提高ArcGIS server并发性能的一种方法
1 问题提出 1.1 概述 提高ArcGIS server并发性能的方法很多,本文讨论在用户硬件足够强大的情况下(主要是内存足够大),使用内存模拟硬盘来提高数据的读取效率,以达到提高ArcGIS se ...
- SQLServer : 几个特殊函数(RAND,CHECKSUM, NEWID)
这一篇我们来捋捋在T-SQL中可能会用到的几个特殊的函数 1. 随机数: RAND 返回从 0 到 1 之间的随机 float 值. 语法: RAND ( [ seed ] ) seed 提供种子值的 ...
- Python小练习二
# 以正确的宽度在居中的"盒子"内打印一个句子 # 注意,整数除法运算符(//)只能用在Python 2.2及后续版本,在之前的版本中,只使用普通除法(/) sentence = ...