css3动画使用技巧之—border旋转时的应用。
- <html>
- <head>
- <title>css3动画border旋转时的应用。</title>
- <meta charset="UTF-8"/>
- <style type="text/css">
- body{
- background: #ccc;
- }
- .he{
- width: 100px;
- height: 100px;
- margin: 200px auto;
- border: 10px solid black;
- border-left-color: #fff;
- border-radius: 70px;
- animation: namemf 1s linear infinite;
- -webkit-animation:namemf 1s linear infinite;
- -ms-animation: namemf 1s linear infinite;
- }
- @keyframes namemf{
- from{
- transform:rotate(0deg) ;
- }
- to{
- transform: rotate(360deg);
- }
- }
- @-webkit-keyframes namemf{
- from{
- transform:rotate(0deg) ;
- }
- to{
- transform: rotate(360deg);
- }
- }
- @-ms-keyframes namemf{
- from{
- transform:rotate(0deg) ;
- }
- to{
- transform: rotate(360deg);
- }
- }
- </style>
- </head>
- <body>
- <div class="he">
- </div>
- </body>
- </html>
效果图
上面代码中要注意的地方:
- border-radius: 70px;为70px时div才能显示为圆形,因为上下左右的border多出了20px
- border-left-color: #fff;可以独立设置一边的颜色
- animation: namemf 1s linear infinite;中linear为匀速运动 ease:动画以低速开始,然后加快,在结束前变慢。 ease-in:动画以低速开始 ease-out:动画以低速结束
css3动画使用技巧之—border旋转时的应用。的更多相关文章
- css3动画使用技巧之—JQ配合css3实现轮播之animation-delay应用
<!DOCTYPE html> <html> <head> <title>css3动画使用技巧之—JQ配合css3实现轮播之animation-dela ...
- css3动画使用技巧之——transform-delay为负值时的应用。
<html> <head> <title>css3动画delay为负值时的效果</title> <meta ch ...
- CSS3动画制作
CSS3动画制作 rotate 绕中心旋转 fadeInPendingFadeOutUp 先渐现,停留2s,再向上滑动并逐渐消失 fadeInUp2D 向上滑动并渐现, 因Animate.css的fa ...
- css3动画应用-音乐唱片旋转播放特效
css3动画应用-音乐唱片旋转播放特效 核心点: 1.设置图片为圆形居中,使图片一直不停旋转. 2.文字标题(潘玮柏--反转地球)一直从左到右不停循环移动. 3.点击图标,音乐暂停,图片停止旋转:点击 ...
- 使用CSS3动画属性实现各种旋转跳跃
Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix. tran ...
- !!学习笔记:CSS3动画
一句话就有css3动画: 2016-6-29 <style type="text/css"> h1{background:#999;} h1:hover{border- ...
- 用CSS3动画特效实现弹窗效果
提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了.效果查看: https://heavis.github.io/hidialog/index.h ...
- 经验分享:多屏复杂动画CSS技巧三则
当下CSS3应用已经相当广泛,其中重要成员之一就是CSS3动画.并且,随着CSS动画的逐渐深入与普及,更复杂与细腻的动画场景也如雨后春笋般破土而出.例如上个月做的「企业QQ-新年祝福」活动: 感谢sh ...
- 如何使用js捕获css3动画
如何使用js捕获css3动画 css3动画功能强大,但是不像js,没有逐帧控制,但是可以通过js事件来确定任何动画的状态. 下面是一段css3动画代码: #anim.enable{ -webkit-a ...
随机推荐
- 页面接口防刷 解决思路一nginx
线上环境 很多接口 如果不做缓存 可能导致有人拿到url 每秒几万次的访问后台程序,导致系统down机. 此处, nginx可以加一层缓存. expires起到控制页面缓存的作用,合理的配置expi ...
- Wix#可以直接写C#代码来生成Wix的MSI安装文
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:Wix#可以直接写C#代码来生成Wix的MSI安装文.
- PowerShell优化和性能测试
measure-command -expression {$null = "abc"} 效率高于 {"abc" |out-null } foreach {$p ...
- DirectoryExists
判断文件夹是否存在 关键点 GetFileAttributes The GetFileAttributes function retrieves attributes for a specified ...
- spring mvc[转]
Spring 注解学习手札(一) 构建简单Web应用 Spring 注解学习手札(二) 控制层梳理 Spring 注解学习手札(三) 表单页面处理 Spring 注解学习手札(四) 持久层浅析 Spr ...
- phpmailer,smtp发送邮件实例(转)
一,用phpmailer发送邮件 查看复制打印? <?php include "class.phpmailer.php"; //包函邮件发送类 //邮件发 ...
- drop table big_table 调试
(gdb) thread apply all bt Thread (Thread )): # # /storage/innobase/os/os0sync.cc: # ) at /usr/src/my ...
- 【转】以XML文件方式保存用户数据——2013-08-25 22
正在做项目中有很多游戏数据要保存,常见的玩家数据这些比较简单的可以用CCUserDefault.它是cocos2d-x用来存取基本数据类型用的.保存为XML文件格式. 主要方法:(和java的map很 ...
- 69 Spring Interview Questions and Answers – The ULTIMATE List--reference
This is a summary of some of the most important questions concerning the Spring Framework, that you ...
- web项目设计与开发——DBHelper
学习web项目设计与开发主要是在上学期web程序开发的基础上添上了思想和更深的理解. 在学习之前,我们需要下载好相关的软件——MyEclipse以及配置文件JDK.tomcat.再添加除MyEclip ...