css3 向上淡入 小图标翻转 360度旋转
2024-08-29 14:09:55
代码
<!DOCTYPE HTML>
<html>
<style type="text/css">
div {
border: 1px solid red;
} /*向上淡入*/
.wrap {
width: 800px;
height: 200px;
position: relative;
} .moveUpBox {
position: relative;
width: 683px;
height: 99px;
background: url(1.jpg) no-repeat;
top: 120px;
animation: moveUp 0.6s ease-out 0.2s both 1;
-moz-animation: moveUp 0.6s ease-out 0.2s both 1;
-webkit-animation: moveUp 0.6s ease-out 0.2s both 1;
} /*小图标翻转*/
.iconRoll {
width: 40px;
height: 40px;
display: block;
margin: 2px 0;
background: url(iconRoll.png);
position: relative;
cursor: pointer;
} .iconRoll:hover {
background: url(iconRoll.png) 0px 40px;
transition: all 0.2s 0s ease-out;
} /*360度旋转*/
.roll360 a {
display: block;
border: 10px solid red;
position: relative;
} .roll360 a b {
display: inline-block;
width: 240px;
height: 70px;
background: url(roll360.png) no-repeat;
background-position: 0 -140px;
vertical-align: middle;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
} .roll360 a:hover b {
opacity: 0;
filter: alpha(opacity=0);
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
} .roll360 a p {
position: absolute;
left: 0;
top: 0;
background-color: #fff;
text-align: left;
color: #333;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
} .roll360 a:hover p {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: rotateY(360deg);
-ms-transform: rotateY(360deg);
-o-transform: rotateY(360deg);
transform: rotateY(360deg);
} .roll360 a span {
display: table-cell;
width: 100%;
height: 60px;
border: 1px solid red;
vertical-align: middle;
} /* animate */
@keyframes moveUp {
from {
top: 120px;
opacity: 0;
filter: alpha(opacity=0);
} to {
top: 0px;
opacity: 1;
filter: alpha(opacity=100);
}
} @-webkit-keyframes moveUp {
from {
top: 120px;
opacity: 0;
filter: alpha(opacity=0);
} to {
top: 0px;
opacity: 1;
filter: alpha(opacity=100);
}
}
</style> <body> <div class="wrap">
<div class="moveUpBox"> xiaoxiaosix </div>
</div> <div class="iconRoll"></div> <div class="roll360">
<a href="">
<b></b>
<p> <span>hello</span> </p>
</a>
</div> </body> </html>
扩展思路：
通过控制 class ，定点播放动画
最新文章
- Ajax请求跨域问题 -- 转载
- EntityFramework之原始查询如何查询未映射的值，你又知道多少？
- 使用本地JConsole监控远程JVM(最权威的总结)
- mybatis的物理分页：mybatis-paginator
- ACM 田忌赛马
- GeoHash核心原理解析
- UML 六种关系
- JQuery EasyUI之DataGrid列名和数据列分别设置不同对齐方式(转)
- js 模板引擎 - 超级强大
- 2015第37周二foxmail邮箱客户端迁移
- cf591B Rebranding
- SESSION会话技术
- dotnet调用node.js写的socket服务（websocket/socket/socket.io）
- Linux分区的注意事项以及远程连接排错
- 深度学习之Batch Normalization
- hwy题目选讲
- vi光标移动
- angular post 带参数 导出excel
- ⌈洛谷5058⌋⌈ZJOI2004⌋嗅探器【Tarjan】
- RTP推流及验证