CSS 风车(花瓣)旋转动画圆角
这是一个综合的案例,用到了transition(动画,动作在单位时间内完成),transform(旋转),border-radius(圆角),absolute(定位),linear-gradient(线性渐变),box-shadow(阴影)。
这里记录一下备忘,贴出源码,方便下次使用时理解,粘贴代码可以直接可以看效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css"> /*禁用所有元素的内外边距*/
*{
margin: 0;
padding: 0px;
} /*禁用浏览器的滚动条*/
html,body{
height:100%;
overflow: hidden;
} /*初始最外层的容器*/
#wrapper{
height:100%;
overflow: auto;
} /*居中定位*/
#wrap{
position: absolute;
top:0px;
left:0px;
bottom:0px;
right:0px; margin: auto;
width: 456px;
height: 456px;
/*150 s 完成动画(选装48000 度)*/
transition: 150s;
} /*鼠标悬浮开启动画*/
#wrap:hover{
transform: rotate(48000deg);
} /* > 代表直接下属的子元素*/
#wrap > div{
position: relative;
width: 150px;
height:150px;
/**/
float: left;
border-radius: 0 100%;
/*box-shadow: 10px 10px pink;*/
/*border: solid 1px black;*/
background-image: linear-gradient(deeppink,white);
} /*选中直接下属的第一个子元素*/
#wrap > div:nth-child(1){
top:75px;
left:75px;
background-image: linear-gradient(green,pink);
}
#wrap > div:nth-child(2){
top: 43px;
right: 10px;
transform: rotate(40deg);
background-image: linear-gradient(yellow,pink);
}
#wrap > div:nth-child(3){
top: 63px;
right: 91px;
transform: rotate(80deg);
background-image: linear-gradient(red,pink);
}
#wrap > div:nth-child(4){
left: 256px;
top: -29px;
transform: rotate(120deg);
background-image: linear-gradient(orange,pink);
}
#wrap > div:nth-child(5){
left: 97px;
top: 43px;
transform: rotate(160deg);
background-image: linear-gradient(green,pink);
}
#wrap > div:nth-child(6){
left: -106px;
top: 95px;
transform: rotate(200deg);
background-image: linear-gradient(yellow,pink);
}
#wrap > div:nth-child(7){
left: 124px;
top: -51px;
transform: rotate(240deg);
background-image: linear-gradient(red,pink);
}
#wrap > div:nth-child(8){
left: -89px;
top: -92px;
transform: rotate(280deg);
background-image: linear-gradient(orange,pink);
}
#wrap > div:nth-child(9){
left: -259px;
top: -163px;
transform: rotate(320deg);
background-image: linear-gradient(#00ff80,pink);
/*width:75px;*/
}
#wrap > div:nth-child(9){
left: -259px;
top: -163px;
transform: rotate(320deg);
}
</style>
</head>
<body>
<div id="wrapper">
<div id="wrap">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div> </body>
</html>
CSS 风车(花瓣)旋转动画圆角的更多相关文章
- 纯css代码写旋转动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS动画实例:旋转的圆角正方形
在页面中放置一个类名为container的层作为效果呈现容器,在该层中再定义十个名为shape的层层嵌套的子层,HTML代码描述如下: <div class="container&qu ...
- 解惑:如何使用html+css+js实现旋转相册,立方体相册等动画效果
解惑:如何使用html+css+js实现旋转相册,立方体相册等动画效果 一.前言 最初还是在抖音上看到可以使用简单地代码实现炫酷的网页效果的,但是想要找到可以运行的代码还是比较困难的,最近突然想起就在 ...
- 如何用纯 CSS 创作一个方块旋转动画
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/gjgyWm 可交互视频 ...
- CSS旋转动画和动画的拼接
旋转动画 第一个样式: @keyframes rotating { from { transform: rotate(0deg); } to { transform: rotate(360deg); ...
- 前端每日实战:86# 视频演示如何用纯 CSS 创作一个方块旋转动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/gjgyWm 可交互视频 此视频是可 ...
- 纯css实现苹果表盘动画
欢迎訪问我们的博客:http://www.w3ctrain.com/2015/07/06/Apple-Watch-Dials/ 随着苹果表的大量生产,我想.用CSS来实现拨号动画的时候到了. 在这篇文 ...
- JS框架_(coolShow.js)图片旋转动画特效
百度云盘 传送门 密码:ble6 coolShow.js插件图片旋转动画效果 <!DOCTYPE HTML> <head> <meta http-equiv=" ...
- css吃豆人动画
一. Css吃豆人动画 1. 上半圆:两个div,内部一个圆div,外部设置宽高截取半圆 外部div动画:animation: 动画样式 1s(时长) ease(动画先低速后快速) infinite( ...
随机推荐
- 数据源管理 | 基于DataX组件,同步数据和源码分析
本文源码:GitHub·点这里 || GitEE·点这里 一.DataX工具简介 1.设计理念 DataX是一个异构数据源离线同步工具,致力于实现包括关系型数据库(MySQL.Oracle等).HDF ...
- lh的简单图论
lh的简单图论 http://10.64.70.166/problem/1112 lh的简单图论 Description 众所周知,集训队的lh同学txdy,有一天他在写着代码,突然哼起了rapr ...
- JAVA设计模式之单例(singleton)
一.饿汉式 /** * 饿汉式 */public class Singleton01 { private static final Singleton01 instance = new Singlet ...
- Asp.Net Core MVC在View中,根据用户权限动态生成菜单
1. 用户登录时,将用户的权限写入Cookie: //将需要的信息写入claims后 var identity = new ClaimsIdentity(claims, IdentityConstan ...
- 使用Hystrix的插件机制,解决在使用线程隔离时,threadlocal的传递问题
背景 在我们的项目中,比较广泛地使用了ThreadLocal,比如,在filter层,根据token,取到用户信息后,就会放到一个ThreadLocal变量中:在后续的业务处理中,就会直接从当前线程, ...
- python小游戏-pygame模块
一.tkinter模块的GUI 基本上使用tkinter来开发GUI应用需要以下5个步骤: 导入tkinter模块中我们需要的东西. 创建一个顶层窗口对象并用它来承载整个GUI应用. 在顶层窗口对象上 ...
- 图形学_opengl纹理映射
学了半学期的图形学,除了几个用python或是matlab比较方便的实验外,用的大多数是opengl,在这总结一下纹理贴图实验中opengl的用法. 1.编译器连接静态库 有用到glaux.h的程序, ...
- HMM-前向后向算法理解与实现(python)
目录 基本要素 HMM三大问题 概率计算问题 前向算法 后向算法 前向-后向算法 基本要素 状态 \(N\)个 状态序列 \(S = s_1,s_2,...\) 观测序列 \(O=O_1,O_2,.. ...
- (2)通信中为什么要进行AMC?
AMC,Adaptive Modulation and Coding,自适应调制与编码. 通信信号的传输环境是变化不定的,信道环境时好时差.在这种情景下,我们不可能按照固定的MCS进行信号发送.假如信 ...
- 安卓APP承载网页(WebView)
安卓APP自身如何打开网页,如何制作一个简单的浏览器,WebView在其中将是一个重要的角色.WebView是一个基于WebKit引擎.展现Web页面的控件. Webview 是一个基于webkit引 ...