• css3圆形轨迹动画


        <!doctype html> 
        <html lang="en"> 
        <head> 
            <meta charset="UTF-8" /> 
            <title> css3圆形轨迹动画 </title> 
        <style type="text/css"> 
        @keyframes animX{ 
              0% {left: 0px;} 
            100% {left: 500px;} 
        } 
        @keyframes animY{ 
              0% {top: 0px;} 
            100% {top: 500px;} 
        } 
         
        #ball { 
            20px; 
            height: 20px; 
            background-color: #f66; 
            border-radius: 50%; 
            position: absolute; 
            animation: animX 4s cubic-bezier(0.36,0,0.64,1) -2s infinite alternate, animY 4s cubic-bezier(0.36,0,0.64,1)  0s infinite alternate; 
        } 
         
        #lopp { 
            498px; 
            height: 498px; 
            border: 2px solid #999; 
            border-radius: 50%; 
            position: absolute; 
            left: 9px; 
            top: 9px; 
        } 
         
        </style> 
        </head> 
        <body> 
        <div id="lopp"></div> 
        <div id="ball"></div> 
        </body> 
        </html> 

  • 相关阅读:
    day15—jQuery UI之widgets插件
    day14—jQuery UI 之dialog部件
    day13—CSS之导航栏
    day12—jQuery ui引入及初体验
    day11—前端学习之我不想看书
    struts2的action方法匹配以及通配符的使用
    Java中的static
    ActiveMQ的简单使用
    MS DOS 常用命令整理
    IntelliJ IDEA 中 Ctrl+Alt+Left/Right 失效
  • 原文地址:https://www.cnblogs.com/Gavinzhong/p/6909237.html
Copyright © 2020-2023  润新知