随笔 - 317, 文章 - 0, 评论 - 453, 阅读 - 114万
  博客园  :: 首页  :: 新随笔  :: 订阅 订阅  :: 管理

CSS3 旋转代码备忘

Posted on   PHP-张工  阅读(360)  评论(0编辑  收藏  举报
复制代码
.Aclose {
    -webkit-transition-property: all;
    -webkit-transition-duration: .3s;
    -moz-transition-property: all;
    -moz-transition-duration: .3s;
    transition-property: all;
    transition-duration: .3s;
}

.Aclose:hover {
    -moz-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

.bg {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 0;
    top: 0;
    background: url(../img/light.png);
    background-size: 100%;
    z-index: -1;
    -webkit-animation-name: scroll;
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 0;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-play-state: running;
    animation-name: scroll;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 0;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-play-state: running;
}
复制代码

Aclose,当鼠标移动到上面时旋转。

bg,自动一直旋转

编辑推荐:
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行:
· winform 绘制太阳,地球,月球 运作规律
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具
历史上的今天:
2012-05-07 C# 循环压着的圆
点击右上角即可分享
微信分享提示