css3转盘
此效果涉及到 :
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转盘的更多相关文章
- css3转盘抽奖
做到一个活动,需要转盘抽奖,于是想到使用css3的动画效果,其中主要包含transition的动画过渡,transform的rotate的旋转效果,在这里只用到2d的旋转, 特别强调的是,因为需要和后 ...
- 纯CSS3大转盘抽奖(响应式、可配置)
源于前段时候微信小程序最初火爆公测时段,把以前用 Canvas 实现的大转盘抽奖移植成微信小程序,无奈当时小程序对 Canvas 支持不够完善,只好降低用 CSS3 实现.虽然比不上 Canvas 绘 ...
- 使用CSS3+jquery.js 实现微信抽奖转盘效果
上次发表了一篇 微信抽奖转盘活动-效果源码分析 最近想起了刚接到这个项目时第一时间脑海里迸出的解决方法 “CSS3”! 为什么不能用CSS3来实现呢? 所以我打算用CSS3来实现这个效果.并不需要依赖 ...
- jq css3实现跑马灯+大转盘
前端效果, <!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" con ...
- 大转盘抽奖css3+js(简单书写)
今天花了一段时间简单写了下抽奖大转盘,这里写的只是自己想到的简单的写了下(也希望收获其他想法),后续,再写的话会更新. 大体思路:页面加载完成后,通过监听开始按钮的点击事件.然后会根据产生的随机数,通 ...
- HTML+CSS3 纯代码实现转盘效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- CSS3幸运大转盘最简单的写法
点击开始 直接css动画 如果你要自己控制转到哪里 那就多写几个class 根据不同角度 运行不同的class..<pre>.zhuandong{ animation: zhuandong ...
- css3实现倾斜转动的转盘
HTML代码: <div class="r-1">a</div> <div class="r-2">a</div> ...
- CSS3 3D立方体效果-transform也不过如此
CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...
随机推荐
- ExtJs中XTemplate使用(转)
转自http://www.studyofnet.com/news/408.html 本文导读:XTemplate是Ext.Template扩展的新类,它支持高级功能的模板类,如自动数组输出.条件判断. ...
- .apk等常用文件下载出现如果应下载文件,请添加 iis MIME 映射。
在下载.apk文件时出现错误. HTTP 错误 404.3 - Not Found 由于扩展配置问题而无法提供您请求的页面.如果该页面是脚本,请添加处理程序.如果应下载文件,请添加 MIME 映射. ...
- 网站建设中常用的JS代码段落
1.屏蔽左右键 这个不介绍了. <script language="JavaScript"> document.oncontextmenu=new Function(& ...
- php 获取随机数的几个方式
php 获取随机数的几个方式 1.直接获取从min-max的数,例如1-20:$randnum = mt_rand(1, 20); 2.在一个数组里面随机选择一个(验证码的时候需要字母.数字混合的情况 ...
- SNMP学习笔记之Linux服务器SNMP常用OID
收集整理一些Linux下snmp常用的OID,用做服务器监控很不错. 应用示例 查看服务器1分钟平均负载: snmpwalk -v1 -c public 127.0.0.1 .1.3.6.1.4.1. ...
- Linux下Tomcat端口、进程以及防火墙设置
Linux下Tomcat端口.进程以及防火墙设置 1,查看tomcat进程: #ps -aux | grep tomcat(或者ps -ef | grep tomcat都行) 可以看到现在运行着两个 ...
- log4j 根据类名指定文件
log4j.logger.io.netty=INFO, stdout, spiderlog4j.logger.com.ld.net.spider=INFO, stdout, spider log4j. ...
- 20145334赵文豪《网络对抗》-逆向及Bof基础实践
本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数,foo函数会简单回显任何用户输入的字符串. 该程序同时包含另一个代码片段,getShell,会返 ...
- ajax请求的同步异步问题
前言 在做项目的过程中遇到一个bug就是:使用了alert语句后,代码才能正确执行,没使用就执行不成功. 后来我就用把console.log,代码就不能正确执行. 于是我就去比较了下consol.lo ...
- 【转】iOS学习之iOS禁止Touch事件
iOS程序中有时会有需要禁止应用接收Touch的要求(比如动画进行时,防止触摸事件触发新方法). 一.一般有两种: 1.弄个遮罩层,禁止交互: 2.使用UIApplication中的方法进行相关的交互 ...