HTML代码:

<div class="r-1">a</div>
<div class="r-2">a</div>

  

CSS代码:

        .r-1{
border: 1px solid red;
text-align: center;color: #ffffff;line-height: 500px;vertical-align: middle;font-size: 50px;;
position: absolute;
width: 500px;height: 500px;
top:0px;left:620px;
background-image: url("resoureces/a.png");
background-size: 100% 100%;
background-repeat: no-repeat; animation: circleSmall 10s linear infinite;
} .r-2{
border: 1px solid red;
text-align: center;color: #ffffff;line-height: 500px;vertical-align: middle;font-size: 50px;;
position: absolute;
width: 500px;height: 500px;
top:0px;left:20px;
background-image: url("resoureces/a.png");
background-size: 100% 100%;
background-repeat: no-repeat; animation: circleSmall2 10s linear infinite;
}
/*旋转动画*/ @-webkit-keyframes circleSmall{ 0%{
transform: rotateX(30deg) rotateY(-10deg) rotateZ(0deg);
}
100%{
transform: rotateX(30deg) rotateY(-10deg) rotateZ(360deg);
}
} @-webkit-keyframes circleSmall2{
0% {
-webkit-transform: rotate3d(0,0,.2,0deg);
} 100% {
-webkit-transform: rotate3d(0,0,.2,360deg);
}
}

  

css3实现倾斜转动的转盘的更多相关文章

  1. CSS3 skew倾斜、rotate旋转动画

    css3出现之前,我们实现一个对象的一组连续动画需要通过JavaScript或Jquery编写,脚本代码较为复杂: 若需要实现倾斜.旋转之类的动画难度将更高(我还没试过用JavaScript或Jque ...

  2. css3旋转倾斜3d小动画

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  3. 图形解析理解 css3 之倾斜属性skew()

    1.作用 改变元素在页面中的形状2.语法 属性:transform 函数: 1.skew(xdeg) 向横向倾斜指定度数 x取值为正,X轴不动,y轴逆时针倾斜一定角度 x取值为负,X轴不动,y轴顺时针 ...

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

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

  5. 使用CSS3制作导航条和毛玻璃效果

    导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的. 本次分享的主题 ...

  6. CSS3实现图形曲线阴形和翘边阴影

    首先,来看看完成之后的效果图: 实现原理 ①曲线阴影实现: 多个阴影重叠,就是正常阴影+曲线阴影 正常情况下,有个矩形有正常的阴影,作为主投影,这时候再定义一个有一定弧度圆角的圆角矩形,然后放在正常矩 ...

  7. CSS3 3D Transform

    CSS3 3D Transform 原文:http://www.w3cplus.com/css3/css3-3d-transform.html 三维变换使用基于二维变换的相同属性,如果您熟悉二维变换, ...

  8. 分针网—IT教育:使用CSS3制作导航条和毛玻璃效果

    导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的.本次分享的主题: ...

  9. css3的动画

    一.CSS3变形 CSS3变形是一些效果的集合 如平移.旋转.缩放.倾斜效果 每个效果都可以称为变形(transform),它们可以分别操控元素发生平移.旋转.缩放.倾斜等变化 二.CSS3位移:tr ...

随机推荐

  1. HGOI 20190709 题解

    Problem A 紫色激情 一个序列$\{a_n\}$,求出方差最大的子序列. 其中方差 [l,r] 的定义是$S^2 = \frac{1}{n} \sum\limits_{i=l}^{r} (x_ ...

  2. 16位masm汇编实现记忆化递归搜索斐波那契数列第50项

    .model small ;递归fib,使用压缩BCD码,小端派 .data y1 byte 6 dup(0) y2 byte 6 dup(0) vis byte 1,1,1,61 dup(0) ;便 ...

  3. Exchanger 原理

    Exchanger(交换者)是一个用于线程间协作的工具类.Exchanger用于进行线程间的数据交换.它提供一个同步点,在这个同步点两个线程可以交换彼此的数据.这两个线程通过exchange方法交换数 ...

  4. sqli-labs(5)

    双查询注入 0x01爱之初了解 在第一次接触到双查询注入时 肯定会有很多问题 在这里我们先了解一下什么叫做 双查询注入 他的语法结构 以及为什么这样构造 答:在此之前,我们理解一下子查询,查询的关键字 ...

  5. linux系统基础优化及高级操作命令

    Linux基础系统优化 引言没有,只有一张图. Linux的网络功能相当强悍,一时之间我们无法了解所有的网络命令,在配置服务器基础环境时,先了解下网络参数设定命令. ifconfig 查询.设置网卡和 ...

  6. Unknown tag (s:property)的原因

    今天在做struts2的练习,然后在jsp页面我使用<s:property value="name"/>竟然报错, 然后网上走了下,恍然大悟,我原来没有在jsp页面里面 ...

  7. SSH三大框架整合配置详解

    首先,三大框架整合,肯定是要导入相当多的jar包,这是不容置疑的!     这里就不一一列举了,直接截图吧:             (1) 基于配置文件的整合:        第一步:我们需要在we ...

  8. LeetCode 17. 电话号码的字母组合(Letter Combinations of a Phone Number)

    题目描述 给定一个仅包含数字 2-9 的字符串,返回所有它能表示的字母组合. 给出数字到字母的映射如下(与电话按键相同).注意 1 不对应任何字母. 示例: 输入:"23" 输出: ...

  9. LeetCode 56. 合并区间(Merge Intervals)

    题目描述 给出一个区间的集合,请合并所有重叠的区间. 示例 1: 输入: [[1,3],[2,6],[8,10],[15,18]] 输出: [[1,6],[8,10],[15,18]] 解释: 区间 ...

  10. How to solve the error "Field service in com.xx.xxx.xxxx required a bean of type 'com.aa.bb.cc' that could not be found."

    When runung a SpringBoot demo, I  got a error as following: *************************** APPLICATION ...