css3动画使用技巧之—border旋转时的应用。
2024-10-18 10:32:11
<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:动画以低速结束
最新文章
- Linux系统值得一看的学习方法及路线图
- NGINX 内存池有感
- ris&#39;In App Purchase总结
- iOS9的适配
- 【收藏】Linux下tomcat内存配置
- 移动页面缩放方法之(二)控制HTML
- MySQL导入较大sql文件报错max_allowed_packet
- GIS 相关知识扫盲
- Hoeffding连接到机器学习
- nodejs:注册登录session出错以及连接Mongodb数据库时Error connecting to database解决方案
- memcache总结
- blob的存储与读取
- Linux上SQL及MYSQL简单操作
- Docker 容器与宿主机网段冲突导致网络无法 ping 通的解决方案
- 可视化利器Visdom
- VScode查找替换常用正则表达式
- springmvc用model传值到jsp页面,el表达式引用接收不到传递过来的值
- 使用docker-compose快速构建集群示例(一)
- MySQL报1130错误解决办法
- 【Linux】条件判断eq、ne、gt、lt、ge、le
热门文章
- (二)如何在.net中使用Redis
- UNITY 打包安卓APK
- git 秘钥的生成
- android安全问题(八)伪造短信(利用原生android4.0漏洞)
- cocos2d-x触屏事件(单点触屏)
- LUN 和 LVM 知识
- 3.linux安装vsftpd服务
- modelsim脚本文件的编写
- String sql = ";update web_admin set adminname=? ,password=? where id=?;怎么给“?” 传值?
- 获得服务器硬件信息(CPUID、硬盘号、主板序列号、IP地址等)