20.鼠标移出过渡效果

最新推荐文章于 2023-08-16 15:12:06 发布

@大迁世界

最新推荐文章于 2023-08-16 15:12:06 发布

阅读量982

点赞数

分类专栏： CSS创意特效(第四季) 文章标签： css html css3

本文链接：https://blog.csdn.net/qq449245884/article/details/122749254

版权

CSS创意特效(第四季) 专栏收录该内容

38 篇文章 13 订阅 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

这篇博客介绍了如何使用CSS3实现鼠标移出元素时的过渡效果，并提供了相关的HTML和CSS源码，读者可以通过网盘链接下载查看详细示例。

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

效果 (源码网盘地址在最后)

关注公众号《大迁世界》，查看更多视频教程！

源码

index.html

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title> CSS 鼠标移出过渡效果</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="./style.css">

</head>
<body>

<h1>靠近我呀</h1>
  
</body>
</html>

css

h1::before {  
  transform: scaleX(0);
  transform-origin: bottom right;
}

h1:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
}

h1::before {
  content:

了解本专栏

超级会员免费看

@大迁世界

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
20.鼠标移出过渡效果

效果 (源码网盘地址在最后)关注公众号《大迁世界》，查看更多视频教程！源码index.html<!DOCTYPE html><html lang="en" ><head> <meta charset="UTF-8"> <title> CSS 鼠标移出过渡效果</title> <meta name="viewport" content="width=device-width, initial-scale=1
复制链接

扫一扫