呼啦圈（keyframes和transform结合）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*定义动画*/
@keyframes zd{
/*关键帧 自定义的动画名称*/
/*从*/
0%{
transform: rotate(0deg);
}
10%{
transform: rotate(70deg);
}
/*到*/
100%{
transform: rotate(360deg);
}
}
.a{
height: 200px;
width: 200px;
border-style: solid;
border-width: 20px;
border-color: red yellow green blue;
border-radius: 50%;
/*transition: 2s;*/
}
.a:hover{
/*transform: rotate(360deg);*/
animation: zd 1s infinite linear;
/*动画 动画名称 动画执行一次所需时间 执行次数 匀速*/
}
</style>
</head>
<body>
<div class="a"></div>
</body>
</html>
源码禁止盗用!转载请注明出处!!!
呼啦圈（keyframes和transform结合）的更多相关文章
- drf呼啦圈
呼啦圈 1.1 表结构设计 不会经常变化的值放在内存:choices形式,避免跨表性能低. 分表:如果表中列太多/大量内容可以选择水平分表 表自关联 from django.db import mod ...
- css3 @keyframes、transform详解与实例
一.transform 和@keyframes动画的区别: @keyframes动画是循环的,而transform 只执行一遍. 二.@keyframes CSS3中添加的新属性animation是用 ...
- css3动画2（transform用法）
1.直接写在样式里,比如一个小箭头,transform:rotate(135deg)即可 2.写动画过程,@keyframes和transform和animation组合起来用 写在@keyframe ...
- 利用CSS3的transform 3D制作的立方体旋转效果
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- CSS3 @keyframes 规则以及animation介绍和各种动画样式说明
一个好网站:http://www.jqhtml.com/ 如需在 CSS3 中创建动画,您需要学习 @keyframes 规则. @keyframes 规则用于创建动画.在 @keyframes 中规 ...
- transform动画的一个3D的正方体盒子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css3中的变形（transform）、过渡(transtion)、动画(animation)
Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix.下面我们一 ...
- [React] Animate your user interface in React with styled-components and "keyframes"
In this lesson, we learn how to handle CSS keyframe animations in styled-components, via the 'keyfra ...
- [Angular2 Animation] Use Keyframes for Fine-Tuned Angular 2 Animations
When easing isn’t enough to get the exact animation you want, you can leverage keyframes to define a ...
随机推荐
- 018 cisco 3560 MAC地址绑定
在3560交换机上show ip dhcp binding 可以看到通过DHCP服务广播出去的IP地址与MAC地址的对应表: 比如: Switch#show ip dhcp binding IP ad ...
- netty4与protocol buffer结合简易教程
各项目之间通常使用二进制进行通讯,占用带宽小.处理速度快~ 感谢netty作者Trustin Lee.让netty天生支持protocol buffer. 本实例使用netty4+protobuf-2 ...
- HDU 5067 Harry And Dig Machine（状压dp）
HDU 5067 Harry And Dig Machine 思路:因为点才10个,在加上一个起点,处理出每一个点之间的曼哈顿距离,然后用状压dp搞,状态表示为: dp[i][s],表示在i位置.走过 ...
- 看opengl写代码（7） 使用混合数组（glInterLeavedArrays）
glInterLeavedArrays 函数 有 三个 參数 : mode ,stride,pointer. mode :指示 开启 哪些 顶点数组,以及 顶点数组 使用的 数据类型. 其余的 顶点 ...
- xib或者storyboard设置颜色偏问题(与代码设置颜色不一致)
选中xib中的label,在右边栏的第三个标签页中第三项是User Defined Runtime Attributes 添加一个keyPath,keyPath值为layer.borderWidth, ...
- iOS开发——常见BUG——导航控制器中的子控制器设置StatusBar状态失效的问题
iOS9之前控制StatusBar的两种方式: 第一种方式:全局控制StatusBar 1. 在项目的Info.plist文件里设置UIViewControllerBasedStatusBarAppe ...
- 写一个简单的Makefile
all: osx .PHONY: osx linux run osx: kale.dylib linux : kale.so run: kale.bin CC = gcc OBJECTS = $(pa ...
- 8-13 canvas专题-阶段练习二（下)
8-13 canvas专题-阶段练习二(下) <!DOCTYPE html> <html lang="zh-cn"> <head> <me ...
- CSU 1807: 最长上升子序列~ 分类讨论
1807: 最长上升子序列~ Time Limit: 5 Sec Memory Limit: 128 MBSubmit: 138 Solved: 17[Submit][Status][Web Bo ...
- [NOI2004]小H的小屋 贪心
神仙贪心,洛谷没有插图导致我题一开始都没看懂.容易发现,块越多越优秀,然后为了满足题意,所以假如不能整除,就分为两个部分(能整除就直接均分就行了).前一部分是n/m,后一部分是n/m+1.数量也是固定 ...