css3实现卡牌旋转与物体发光效果
2024-09-18 07:23:39
效果演示
http://demo.qpdiy.com/hxw/CSS3/rotate+light.html
物体旋转:
卡牌同一位置放2张图片,通过设置3D动画旋转实现
animation: cardfront 2s infinite;
-webkit-animation: cardfront 2s infinite;
@keyframes cardfront{
0%{transform: rotateY(0deg);}
50%{transform: rotateY(180deg);}
100%{transform: rotateY(0deg);}
}
@keyframes cardback{
0%{transform: rotateY(180deg);}
50%{transform: rotateY(0deg);}
100%{transform: rotateY(180deg);}
}
光的效果:
@-webkit-keyframes cardlight{
0%{box-shadow: 0 0 0px 0px yellow;}
100%{box-shadow: 0 0 60px 0px yellow;}
}
以下是完整代码
<style type="text/css">
.wrap{
width: 640px;
margin: 0 auto;
}
.cardbg{
position: relative;
width: 157px;
height: 220px;
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
}
.card-back,.card-front{
position: absolute;
left: 0;
top: 0;
width: 157px;
height: 220px;
backface-visibility: hidden;
box-shadow: 2px 2px 20px rgba(0,0,0,.5);
}
.card-front{
z-index: 2;
animation: cardfront 2s infinite;
-webkit-animation: cardfront 2s infinite;
}
.card-back{
z-index: 1;
background:url(images/cardbg.jpg) no-repeat;
background-size: 100% 100%;
animation: cardback 2s infinite;
-webkit-animation: cardback 2s infinite;
}
@keyframes cardfront{
0%{transform: rotateY(0deg);}
50%{transform: rotateY(180deg);}
100%{transform: rotateY(0deg);}
}
@-webkit-keyframes cardfront{
0%{-webkit-transform: rotateY(0deg);}
50%{-webkit-transform: rotateY(180deg);}
100%{-webkit-transform: rotateY(0deg);}
}
@keyframes cardback{
0%{transform: rotateY(180deg);}
50%{transform: rotateY(0deg);}
100%{transform: rotateY(180deg);}
}
@-webkit-keyframes cardback{
0%{-webkit-transform: rotateY(180deg);}
50%{-webkit-transform: rotateY(0deg);}
100%{-webkit-transform: rotateY(180deg);}
}
.card-light{
width: 50px;
margin: 50px;
box-shadow: 0 0 10px 3px yellow;
animation: cardlight 0.5s linear infinite;
-webkit-animation: cardlight 0.5s linear infinite;
}
@-webkit-keyframes cardlight{
0%{box-shadow: 0 0 0px 0px yellow;}
100%{box-shadow: 0 0 60px 0px yellow;}
}
</style>
</head> <body>
<div class="wrap">
<div class="cardbg">
<div class="card-back"></div>
<img src="data:images/card1.jpg" alt="卡牌" class="card-front">
</div>
<img src="data:images/card1.jpg" alt="卡牌" class="card-light">
</div>
</body>
最新文章
- bootstrap-fileinput简单完整列子
- Kafka【第一篇】Kafka集群搭建
- 【mongo】pymongo通过_id删除数据
- 移动App崩溃测试用例设计
- 基于Qt Phonon模块实现音乐播放器
- poj1947
- vim emmet配置
- Dapper.NET - ORM(ibatis.Net)
- leetcode第三题Longest Substring Without Repeating Characters java
- Linux kernel ‘fib6_add_rt2node’函数安全漏洞
- MD5加密算法的实现
- 如何在C++ Builder中使用OpenGL
- 2018/1/21 Netty通过解码处理器和编码处理器来发送接收POJO,Zookeeper深入学习
- lsof命令各个参数
- Django 日志配置
- this直接加在函数或者是 “原型”对象的区别
- 20190312_浅谈go&;java差异(一)
- mixer中动态Alpha通道处理案例
- springboot No Identifier specified for entity的解决办法
- java内存区域之程序计数器