html绘制叶子形状,css实现叶子形状loading效果
本文实例讲述了css实现叶子形状loading效果的方法。分享给大家供大家参考。具体实现方法如下:
复制代码代码如下:
body{ background: #000;}
.color1{ background: #FDE515;}
.color2{ background: #00DEF2;}
@-webkit-keyframes loadRotate{
from{ -webkit-transform:rotateZ(0deg);}
to{ -webkit-transform:rotateZ(360deg);}
}
@keyframes loadRotate{
from{ transform:rotateZ(0deg);}
to{ transform:rotateZ(360deg);}
}
#loading{ width: 100px; height: 100px; position: absolute; left:50%; top:50%; margin-left:-50px; margin-top: -50px; -webkit-animation:loadRotate 3s linear infinite; -webkit-animation-fill-mode:both; animation:loadRotate 3s linear infinite; animation-fill-mode:both;}
#loading div{ width: 20px; height:30px; position: absolute;left:40px; top:35px; -webkit-transform:rotateZ(0) translateX(60px) ; opacity: 1; border-radius: 50% 0; }
#loading div:nth-child(2){-webkit-transform:rotateZ(36deg) translateX(60px) ; opacity: 0.8; }
#loading div:nth-child(3){-webkit-transform:rotateZ(72deg) translateX(60px); opacity: 0.6; }
#loading div:nth-child(4){-webkit-transform:rotateZ(108deg) translateX(60px); opacity: 0.4;}
#loading div:nth-child(5){-webkit-transform:rotateZ(144deg) translateX(60px) ; opacity: 0.2;}
#loading div:nth-child(6){-webkit-transform:rotateZ(180deg) translateX(60px) ; opacity: 1; }
#loading div:nth-child(7){-webkit-transform:rotateZ(216deg) translateX(60px) ; opacity: 0.8; }
#loading div:nth-child(8){-webkit-transform:rotateZ(252deg) translateX(60px) ; opacity: 0.6; }
#loading div:nth-child(9){-webkit-transform:rotateZ(288deg) translateX(60px) ; opacity: 0.4; }
#loading div:nth-child(10){-webkit-transform:rotateZ(324deg) translateX(60px) ; opacity: 0.2; }
运行效果如下图所示:
希望本文所述对大家的web前端设计有所帮助。
html绘制叶子形状,css实现叶子形状loading效果相关推荐
- HTML+CSS制作旋转的loading效果
HTML+CSS制作旋转的loading效果 效果图如下: HTML部分源代码如下: <!DOCTYPE html> <html lang="en">< ...
- html绘制叶子形状,css实现叶子形状loading效果的方法
本文实例讲述了css实现叶子形状loading效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: body{ background: #000;} .color1{ backg ...
- css实现简单的loading效果
当你的网站没有完全加载的时候,最好的办法就是播放一些动画.它让用户知道页面正在加载中,我们可以使用 css 实现各种 loading 效果,比如图片中显示的4种风格. 示例1 html代码 <d ...
- 纯 css 实现 a 标签 loading 效果
啥也不说了,把下面的代码加入根 scss / less 文件就行了. 需要原生 css 代码的话,自己改改就行了. a {&[data-loading='true'] {opacity: 0. ...
- css实现loading,css3 实现loading效果
1 圆点渐入渐出 要点: 缩放和透明度的变化,循环变化 .demo1{ width: 40px; height: 40px; margin: 0 auto; border-radius: 100px; ...
- Android中绘制圆角矩形图片及任意形状图片
转自http://blog.csdn.net/silangquan/article/details/8056583 圆角矩形图片在苹果的产品中很流行,相比于普通的矩形,很多人都喜欢圆角矩形的图片,因为 ...
- css自定义盒子形状及动画应用
css自定义盒子形状及动画应用 <style> clip-path: polygon(X1 Y1,X2 Y2,....) </style> 当我们写页面时对盒子的形状有需求时, ...
- SwiftUI之深入解析如何绘制徽章视图的路径和形状
一.创建徽章视图 创建徽章前需要使用 SwiftUI 的矢量绘画 API 创建一个徽章视图: 选择文件 -> 新建 -> 文件,然后从 iOS 文件模板列表中选择 SwiftUI View ...
- css文本字体形状_使用CSS更改文本字体
css文本字体形状 In the last module, we discussed text formatting. By now, you already know how to work wit ...
最新文章
- 如何寻找蛋白和蛋白,基因和基因之间的相互作用---string
- oracle aul 索引,ORACLE恢復神器之ODU/AUL/DUL
- dskinlite自适应dpi
- python函数如何结束_如何在Python中结束函数
- 夏季外出旅游,有哪些方面需要注意?
- Java基础-------集合框架
- fatal error LNK1112: module machine type 'X86' conflicts with target machine type 'x64
- 机器学习基础:Dice Loss(Machine Learning Fundamentals: Dice Loss)
- 2006年上半年开发心得
- MIT算法圣经书《算法导论》第四版
- 千兆网线和百兆网线的区别
- 服务器 运行时错误怎么办,内部服务器错误怎么办
- 【读书笔记】RevMiner:RevMiner: An Extractive Interface for Navigating Reviews on a Smartphone
- 注册表启动项设置方法
- 【Matlab】ASCII图片生成、迷宫生成和词云图生成
- 详解两类AI芯片架构和关键技术
- 移动端 vue 个人组件库
- 软件测试修炼之道之——重现问题
- python和matlab的区别_科学网—matlab和python语法对比(1) - 何亮的博文
- 计算机网络框架大纲(脑图可自提)----1.概述
热门文章
- 西财计算机研究生专硕复试分数线,2017年西南财经大学考研复试分数线
- CORL: 基于变量序和强化学习的因果发现算法
- 放开chrome,微度新标签页 删除
- 【算法】打家劫舍系列
- vue 路由跳转页面打开新页面_vue-router跳转时打开新页面的两种方法
- ArcGIS Server 无法建立与localhost的连接
- android 新闻列表json,Android中通过ListView的实现简单新闻列表
- s20.基于 Kubernetes v1.25 (kubeadm) 和 Docker 部署高可用集群(二)
- 大部分网站都容易被入侵吗?
- 关于“找老婆”问题引发的深入思考