用css做（花的绽放）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>花的绽放</title>
<style type="text/css">
.header {
width: 800px;
height: 800px;
margin: 0 auto;
position: relative;
}
.header div {
height: 300px;
width: 300px;
background: blue;
border-radius: 300px 0;
position: absolute;
bottom: 100px;
left:200px;
opacity:0.6;
transform-origin:0 300px;
transform:rotate(-45deg);
transition:all 8s;
}
.header:hover .header1{
transform:rotate(-23deg);
}
.header:hover .header2{
transform:rotate(5deg);
}
.header:hover .header3{
transform:rotate(-68deg);
}
.header:hover .header4{
transform:rotate(-95deg);
}
.header:hover .header5{
transform:rotate(30deg);
}
.header:hover .header6{
transform:rotate(-120deg);
}
.header:hover .header7{
transform:rotate(50deg);
}
.header:hover .header8{
transform:rotate(-140deg);
}
</style>
</head>
<body>
<div class="header">
<div class="header1"></div>
<div class="header2"></div>
<div class="header3"></div>
<div class="header4"></div>
<div class="header5"></div>
<div class="header6"></div>
<div class="header7"></div>
<div class="header8"></div>
<div class="header9"></div>

</div>
</body>
</html>

用css做（花的绽放）相关推荐

【4003】通过html+css做一个图片列表的静态页面。
[4003]通过html+css做一个图片列表的静态页面. 学习目标: [ 1]学习前端第三天掌握 html与css(基础选择器,有.无序列表相关)入门知识,梳理今天的学习知识点: [ 2]通过已学知 ...
css响应式布局_Web前端新手怎么入门如何用CSS做响应式布局
Web前端新手怎么入门?如何用CSS做响应式布局?很多Web前端新手对响应式布局和自适应布局的概念以及制作方法分不清,简单来说响应式布局相当于流动网格布局,而自适应布局等于使用固定分割点来进行布局.接 ...
[css] 当拿到一个新的项目，让你对这个项目的css做下架构设计，你该如何下手？
[css] 当拿到一个新的项目,让你对这个项目的css做下架构设计,你该如何下手? 公共变量(主题色/主要空隙/主要字号字体等) 编译器(scss/less/postcss/stylus) 自适应方案 ...
window safari 怎么进入响应式_Web前端新手怎么入门如何用CSS做响应式布局
Web前端新手怎么入门?如何用CSS做响应式布局?很多Web前端新手对响应式布局和自适应布局的概念以及制作方法分不清,简单来说响应式布局相当于流动网格布局,而自适应布局等于使用固定分割点来进行布局.接 ...
HTML字母导航栏怎么做,如何用css做导航栏？
如何用css做导航栏? 1.新建一个html文件,在head部分,编写css样式 ○ list-style-type: none;是除掉导航前面默认带的点 ○ li a,li a.active ,li ...
AE导出JSON数据用CSS做前端交互---kalrry
AE导出JSON数据用CSS做前端交互---kalrry 一.简介二.准备三.例子四.参考一.简介关于网页端动画实现 web端做动画有多种形式,可以用CSS的animation,也可以用Ca ...
用HTML+CSS做一个漂亮简单的个人网页~个人相册介绍个人主页模板(6个页面) ~学生HTML个人网页作业作品~
用HTML+CSS做一个漂亮简单的个人网页 ~ 个人相册介绍个人主页模板(6个页面) 学生HTML个人网页作业作品临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作 ...
CSS做个五颜六色的风车
做个简单的风车身为一个Java小白会用css做点风车不过分吧Pay attention to:this is living 风车,不是 lifeless 的风车* 代码: <!DOCTYPE ...
使用css做一个右向的三角箭头
使用css做一个右向的三角箭头:如图使用css 的border 属性,将下.左边框设置宽度为零,使用transfrom属性将图案旋转 45度.即可得到三角箭头 .icon-v-right {widt ...

用css做（花的绽放）

用css做（花的绽放）相关推荐

最新文章

热门文章