zoukankan      html  css  js  c++  java
  • 纯CSS,多个半圆以中心点旋转

    效果图:

    html代码:

    1 <div  style="    background:#000; position: relative; 300px; height:300px;">
    2     <img  src="http://res1.eqh5.com/o_1b8g6r3aa1l0s1ap250p11bk51gq.png?imageMogr2/thumbnail/721x721&gt;/strip" style="padding:9%; 82%; animation: rotateIn 3.5s ease 0s infinite both;">
    3     <img  src="http://res1.eqh5.com/o_1b8g6r3aa1l0s1ap250p11bk51gq.png?imageMogr2/thumbnail/642x642&gt;/strip" style=" 73%;  padding:13.5%; animation: rotateIn 4s ease 0s infinite both;">
    4     <img  src="http://res1.eqh5.com/o_1b8g6q6om18tapg81ga4bvj3i8a.png?imageMogr2/thumbnail/642x642&gt;/strip" style=" 73%;  padding:13.5%;  animation: rotateIn 2s ease 0s infinite both;"> 
    5     <img  src="http://res1.eqh5.com/o_1b8g6r3aa1l0s1ap250p11bk51gq.png?imageMogr2/thumbnail/761x761&gt;/strip" style=" 86.5%;  padding:6.75%;  animation: rotateIn 6.5s ease 0s infinite both;">
    6 </div>

    CSS代码:

    @-webkit-keyframes rotateIn{from{-webkit-transform:rotate(0)}to{-webkit-transform:rotate(360deg)}}
     img{position: absolute;top:0px; left:0px;}

     素材:

                                           

                                          

  • 相关阅读:
    jquery另外一种类似tab切换效果
    简单的Tab切换组件
    switchable图片切换
    web前端性能优化总结
    iframe之间通信问题及iframe自适应高度问题
    javascript cookie
    grunt项目构建工具
    input全选与单选(把相应的value放入隐藏域去)
    Ajax跨域问题
    Jquery回到顶部功能
  • 原文地址:https://www.cnblogs.com/zhangzhijian/p/6400711.html
Copyright © 2011-2022 走看看