旋转中心点案例

egg55

于 2022-05-23 13:10:36 发布

阅读量123

点赞数

分类专栏：动态网页文章标签： css html css3

本文链接：https://blog.csdn.net/qq_41619968/article/details/124925315

版权

动态网页专栏收录该内容

19 篇文章 0 订阅

订阅专栏

这段HTML代码展示了如何使用CSS3的`::before`伪元素、`transform`和`transition`属性创建一个旋转的心愿标签效果。当鼠标悬停时，标签会从底部逆时针翻转180度，悬停移除后恢复原状。此效果可用于网页交互设计中增加视觉趣味性。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
  div{
    overflow:hidden;
    width:200px;
    height:200px;
    border:1px solid hotpink;
    margin:10px;
    float:left;
  }
  div::before{
    content:"心愿";
    display:block;
    width:100%;
    height:100%;
    background-color: hotpink;
    transform:rotate(180deg);
    transform-origin:left bottom;
    transition:all 0.25s;
  }
  div:hover::before{
    transform:rotate(0deg);
  }
</style>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

egg55

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
旋转中心点案例

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> div{ overflow:hidden; width:200px; height:200px; border:1px solid hotpink; ma.
复制链接

扫一扫