css实现旋转翻牌动画效果_CSS教程_CSS_网页制作

来源:脚本之家  责任编辑:小易  

!DOCTYPEhtml>html lang="en">Documentbox {width:100px;height:100px;border:3px solid red;border-radius:50%;margin:200px;animation:rotate 5s infinite;}keyframes rotate{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}abcdwww.zgxue.com防采集请勿采集本网。

css动画之旋转翻牌效果,具体内容如下所示:

这个要分成两个css3动画去做 小变大是最外层父级,例如它执行了1s;内层的负责旋转,延迟1s执行

1、我们先设置两个盒子大小,颜色等等,然后定位重叠在一起,最后再进行动画设置

这个的效果应该符合你的要求https://jingyan.baidu.com/article/647f0115c85f907f2148a8b8.html

例子如下:

css3动画,动画中运用transform:rotate(360deg)即可实现旋转

<style> .box { height: 300px; width: 300px; position: relative; } .zh, .fan { height: 300px; width: 300px; line-height: 300px; font-size: 30px; text-align: center; color: blue; transition: all 2s; backface-visibility: hidden; /* 背面不可见 */ position: absolute; top: 0; left: 0; } .zh { background-color: aqua; } .fan { background-color: aquamarine; transform: rotateY(-180deg) rotateZ(-180deg); } .box:hover .zh { transform: rotateY(180deg) rotateZ(180deg) } .box:hover .fan { transform: rotateY(0) rotateZ(0); } </style></head><body> <div class="box"> <div class="zh">正面</div> <div class="fan">反面</div> </div></body>

你在这里面也没设置让他旋转的代码,肯定不会旋转的 就是这句:-webkit-transform:rotate(720deg)scale(2,2);keyframes mylasting1 { 0%{top:550px;webkit-transform:rotate(10deg)scale(2,2);

2、效果如下:

CSS3 里面 animation下有个animation-fill-mode 设定动画完成后的状态,默认是none 设为forwards 就可以在动画完成后定格在动画最后一帧

总结

以上所述是小编给大家介绍的css实现旋转翻牌动画效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对真格学网网站的支持!

如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

animation:mymove 5s infinite;在animation后面加上infinite就可以无限循环,另外还可以做反向循环使用animation-directionanimation-name规定需要绑定到选择器的 keyframe 名称。animation-duration规定完成动画所花费的时间,以秒或毫秒计。animation-timing-function规定动画的速度曲线。animation-delay规定在动画开始之前的延迟。animation-iteration-count规定动画应该播放的次数。animation-direction规定是否应该轮流反向播放动画。看下下面的代码DOCTYPEhtml>div{width:100px;height:100px;background:red;position:relative;animation:myfirst 5s infinite;animation-direction:alternate;Safari and Chrome*/webkit-animation:myfirst 5s infinite;webkit-animation-direction:alternate;}keyframes myfirst{0%{background:red;left:0px;top:0px;}25%{background:yellow;left:200px;top:0px;}50%{background:blue;left:200px;top:200px;}75%{background:green;left:0px;top:200px;}100%{background:red;left:0px;top:0px;}}webkit-keyframes myfirst/*Safari and Chrome*/{0%{background:red;left:0px;top:0px;}25%{background:yellow;left:200px;top:0px;}50%{background:blue;left:200px;top:200px;}75%{background:green;left:0px;top:200px;}100%{background:red;left:0px;top:0px;}}strong>注释:</strong>Internet Explorer 9 以及更早的版本不支持 animation-direction 属性。div>内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • js+css3 3d旋转木马特效插件
  • css3实现椭圆轨迹旋转的示例代码
  • 微信小程序实现可实时改变转速的css3旋转动画实例代码
  • css3打造百度贴吧的3d翻牌效果示例
  • css3实现简易版的刮刮乐效果
  • 纯css3实现图片翻牌特效
  • css3 实现动画效果,怎样使他无限循环动下去
  • css3圆环旋转效果动画怎么做
  • css3圆环旋转效果动画怎么做
  • css3圆环旋转效果动画怎么做
  • css3 由小变大然后一直旋转的动画怎么做
  • css3圆环旋转效果动画怎么做
  • css3圆环旋转效果动画怎么做
  • CSS3动画中怎么一边移动一边旋转?
  • css3动画播放后如何停止在最后的状态
  • css一个人站在一个圆上旋转动画怎么实现
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作csscss教程css旋转css3实现椭圆轨迹旋转的示例代码微信小程序实现可实时改变转速的css3旋转动画实例代码css3打造百度贴吧的3d翻牌效果示例css3实现简易版的刮刮乐效果纯css3实现图片翻牌特效css教程css3div+css教程web标准教程浏览器兼容教程css布局实例css控制ul li 的样式详解(推荐)html设置超链接字体颜色和点击后的字体颜色div水平垂直居中的完美解决方案css设置各种中文字体如雅黑、黑体、宋体、楷体等等css 文本字体颜色设置方法(css color)css 漂亮搜索框美化代码css自定义select下拉选择框的样式(不用其他标签模拟)css圆角效果 -webkit-border-radius(css3中border-radcss 中的background:transparent到底是什么意思有什么css 首行缩进两个文字css 实现渐变效果小结( linear-gradient线性渐变 和 r解决type=file 文件修改表单 名称不能正常回显的问题移动端前端适配方案(总结)css 横向进度条和竖向进度条实现代码css运用阿里巴巴矢量库快速在对应位置加上好看的图标详解盒模型大小取决于它的padding,margin,border数css+svg实现b站充电效果的示例代码css动画实现领积分效果的思路详解html/css中的空格处理及如何保留页面中的空格css实现气泡的小尖角效果
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved