此效果涉及到 :

1. css 画图形

2. css3 动态效果

3. 贝塞尔曲线 用法

<style>
.lds-hourglass {
display: inline-block;
position: relative;
width: 72px;
height: 72px
}

.lds-hourglass:after {
content: " ";
display: block;
border-radius: 50%;
width: 0;
height: 0;
margin: 6px;
box-sizing: border-box;
border: 36px solid #ff8686;
border-color: #ffabab transparent #35999e;
animation: lds-hourglass 1.2s infinite
}

@keyframes lds-hourglass {
0% {
transform: rotate(0);
animation-timing-function: cubic-bezier(.55,.055,.675,.19)
}

50% {
transform: rotate(900deg);
animation-timing-function: cubic-bezier(.215,.61,.355,1)
}

100% {
transform: rotate(1800deg)
}
}
</style>

<div class="lds-hourglass"></div>

扩展:3d转换

贝塞尔曲线扫盲

css3转盘的更多相关文章

  1. css3转盘抽奖

    做到一个活动,需要转盘抽奖,于是想到使用css3的动画效果,其中主要包含transition的动画过渡,transform的rotate的旋转效果,在这里只用到2d的旋转, 特别强调的是,因为需要和后 ...

  2. 纯CSS3大转盘抽奖(响应式、可配置)

    源于前段时候微信小程序最初火爆公测时段,把以前用 Canvas 实现的大转盘抽奖移植成微信小程序,无奈当时小程序对 Canvas 支持不够完善,只好降低用 CSS3 实现.虽然比不上 Canvas 绘 ...

  3. 使用CSS3+jquery.js 实现微信抽奖转盘效果

    上次发表了一篇 微信抽奖转盘活动-效果源码分析 最近想起了刚接到这个项目时第一时间脑海里迸出的解决方法 “CSS3”! 为什么不能用CSS3来实现呢? 所以我打算用CSS3来实现这个效果.并不需要依赖 ...

  4. jq css3实现跑马灯+大转盘

    前端效果, <!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" con ...

  5. 大转盘抽奖css3+js(简单书写)

    今天花了一段时间简单写了下抽奖大转盘,这里写的只是自己想到的简单的写了下(也希望收获其他想法),后续,再写的话会更新. 大体思路:页面加载完成后,通过监听开始按钮的点击事件.然后会根据产生的随机数,通 ...

  6. HTML+CSS3 纯代码实现转盘效果

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  7. CSS3幸运大转盘最简单的写法

    点击开始 直接css动画 如果你要自己控制转到哪里 那就多写几个class 根据不同角度 运行不同的class..<pre>.zhuandong{ animation: zhuandong ...

  8. css3实现倾斜转动的转盘

    HTML代码: <div class="r-1">a</div> <div class="r-2">a</div> ...

  9. CSS3 3D立方体效果-transform也不过如此

    CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...

随机推荐

  1. ExtJs中XTemplate使用(转)

    转自http://www.studyofnet.com/news/408.html 本文导读:XTemplate是Ext.Template扩展的新类,它支持高级功能的模板类,如自动数组输出.条件判断. ...

  2. .apk等常用文件下载出现如果应下载文件,请添加 iis MIME 映射。

    在下载.apk文件时出现错误. HTTP 错误 404.3 - Not Found 由于扩展配置问题而无法提供您请求的页面.如果该页面是脚本,请添加处理程序.如果应下载文件,请添加 MIME 映射. ...

  3. 网站建设中常用的JS代码段落

    1.屏蔽左右键 这个不介绍了. <script language="JavaScript"> document.oncontextmenu=new Function(& ...

  4. php 获取随机数的几个方式

    php 获取随机数的几个方式 1.直接获取从min-max的数,例如1-20:$randnum = mt_rand(1, 20); 2.在一个数组里面随机选择一个(验证码的时候需要字母.数字混合的情况 ...

  5. SNMP学习笔记之Linux服务器SNMP常用OID

    收集整理一些Linux下snmp常用的OID,用做服务器监控很不错. 应用示例 查看服务器1分钟平均负载: snmpwalk -v1 -c public 127.0.0.1 .1.3.6.1.4.1. ...

  6. Linux下Tomcat端口、进程以及防火墙设置

     Linux下Tomcat端口.进程以及防火墙设置 1,查看tomcat进程: #ps -aux | grep tomcat(或者ps -ef | grep tomcat都行) 可以看到现在运行着两个 ...

  7. log4j 根据类名指定文件

    log4j.logger.io.netty=INFO, stdout, spiderlog4j.logger.com.ld.net.spider=INFO, stdout, spider log4j. ...

  8. 20145334赵文豪《网络对抗》-逆向及Bof基础实践

    本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数,foo函数会简单回显任何用户输入的字符串. 该程序同时包含另一个代码片段,getShell,会返 ...

  9. ajax请求的同步异步问题

    前言 在做项目的过程中遇到一个bug就是:使用了alert语句后,代码才能正确执行,没使用就执行不成功. 后来我就用把console.log,代码就不能正确执行. 于是我就去比较了下consol.lo ...

  10. 【转】iOS学习之iOS禁止Touch事件

    iOS程序中有时会有需要禁止应用接收Touch的要求(比如动画进行时,防止触摸事件触发新方法). 一.一般有两种: 1.弄个遮罩层,禁止交互: 2.使用UIApplication中的方法进行相关的交互 ...