CSS小练习之鼠标hover图片特效

最新推荐文章于 2024-08-17 19:13:55 发布
最新推荐文章于 2024-08-17 19:13:55 发布
阅读量2.7k 收藏 6
点赞数
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/deephugy/article/details/80788286
版权
本文介绍了一个CSS小练习，展示了如何利用相对定位、背景大小调整、伪元素和绝对定位等技巧，创建鼠标悬停时的图片特效。通过设置CSS属性如`background-size: cover;`、`transform: rotate() translateX() scale();`和`line-height`，实现了图片的等比例缩放、旋转和平移效果。同时，使用`nth-child()`选择器和伪元素`:before`、`:after`来增强视觉效果。
摘要由CSDN通过智能技术生成

深夜小练习

涉及知识点：

  1. position:relative;/相对定位 只给定位不给值的时候 对元素本身没有任何影响
  2. background-size:cover;/cover 等比例的放大缩小图片 直到占满盒子
  3. ul li:before，ul li:after/伪元素 通过样式给元素添加内容/
  4. position:absolute;/绝对定位 相对于已经定位的父元素 脱离文档流(在页面中不占位置)
  5. transform:rotate(45deg) translateX(-320px) scale(1.8);/transform变换 rotate旋转 deg角度 translateX位移
  6. line-height:45px;/特性:当值等于此元素的高度的时候 可以元素内一行文字上下居中/
  7. ul li:nth-child(1)/css3 新增 选择第几个子元素 /

效果图：

这里写图片描述

以放代码：
html

<body>
    <ul>
        <li>
            <div>
                <h3>大橘猫</h3>
                <p>十个橘猫九个胖，还有一个非常胖</p>
            </div>
        </li>
        /*此处省略后五个li*/
    </ul>
</body>

css

*{
    margin: 0;
    padding: 0;
}
 ul{
    width: 660px;
    height: 440px;
    margin:
最低0.47元/天 解锁文章
救护用的垃圾车
关注
专栏目录
html鼠标经过图片旋转特效,【每日一练】CSS3实现鼠标移入图片旋转放大特效
weixin_35796461的博客
06-04 982
“每日一练”刚开始一天就遭到了一些阻力，似乎该改名叫"每周一练"ORZ。。。还是再逼迫自己坚持一下试试(ˇˍˇ) ～本来每日一练只打算记界面设计和交互设计的内容，不过这几天赶任务做的是前端动效实现的内容，就先也记在这里。(简书这个编辑器怎么贴代码？只能手敲吗？好累orz)-------------------------------------------分割线------------------...
15种CSS3图片Hover悬停效果代码.
01-05
15种CSS3图片Hover悬停效果代码，非常炫酷，css3技术。
css3:鼠标hover图片效果
weballan的专栏
08-16 1082
  今天在网上看到的鼠标hover效果，当时就看的心痒痒，css3果然很强大，最主要的是思路真漂亮，随后自己做了html原型，然后按照自己的思路给规划了一下，果然很帅。 您可以狠狠地点击这里：css3:鼠标hover图片效果demo 亲，是没有JS效果的哦~~~   ...
Vue UI - 可视化的Vue项目管理器
最新发布
独泪了无痕
08-17 1370
这一步在选择项目所需的配置项时，就很直观了。页面内也有很多提示和查看详情的入口，相较于之前命令行的方式，方便简单多了。我这里只简单选择了Choose Vue version、Babel、Router等三项。选择Vue语法版本（2.x / 3.x（Preview））；选择路由模式（history mode / hash mode）；
纯CSS: hover特效
笔记
12-03 1162
//样式++ <style> /*animation: name duration timing-function delay iteration-count direction; animation-name 规定需要绑定到选择器的 keyframe 名称。。 animation-duration 规定完成动画所花费的时间，以秒或毫秒...
15种CSS3图片Hover悬停效果代码
09-14
15种CSS3图片Hover悬停效果代码
图片hover状态平滑划过过渡效果
04-17
NULL 博文链接：https://guangqiang.iteye.com/blog/1830016
Demo_CSS:CSS特效练习
03-15
在IT领域，CSS（Cascading Style Sheets）是用于描述HTML或XML（包括SVG、XHTML等）文档样式的样式表语言。它控制了网页的布局和视觉呈现，包括颜色、字体...所以，打开你的代码编辑器，开始这段CSS特效的学习之旅吧！
炫酷CSS3鼠标滑过图片动画特效
12-13
"炫酷CSS3鼠标滑过图片动画特效"是利用CSS3的特性实现的一种交互式网页设计技巧，旨在提升用户体验，使网站更加生动有趣。这个特效展示了CSS3在动态效果方面的强大能力，特别是3D转换和过渡效果。 首先，我们要理解...
纯CSS3卡通水果拳击手特效特效代码
03-20
例如，可以使用伪类选择器如`:hover`来实现鼠标悬停时的动态效果，或者使用`nth-child()`来针对特定子元素应用样式。 2. **过渡（Transitions）**：当元素状态改变时，过渡属性可以平滑地在两种状态之间过渡，如...
很酷的六种CSS 鼠标经过图片效果（含HTML文件）
11-26
很酷的六种CSS 鼠标经过图片效果（含HTML文件），免费下载地址：http://www.ui3g.com/design/uiweb-466.html
利用hover伪类实现点击文字弹出图片
久伴博客
07-09 4266
效果图这个二维码图片是可以用绝对定位控制位置的实现代码图片路径由于是本地,为了效果大家需要的自己设置图片路径&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; body { margin: 0; padding: 0; }
基础hover的简单交互
Dacongs的博客
05-28 948
上图使用的图标来源于阿里巴巴矢量库：https://www.iconfont.cn Html： <div class="icon_jz clear"> <div class="icon"> <div id="icon_text"> <p>...
PS实用技巧：用原始图片制作显示（正常状态）、鼠标悬浮(hover)、鼠标点击(pressed)的方法
热门推荐
02-01 3万+
需求         从网上下载图片很难下载到整套，包括一个按键的三种状态或者是多个图标非同色系，笔者没有整体配色，只讲述PS比较简单的制作方法，目前满足日常使用。 原理         使用PS进行修改制作 实现步骤 步骤一：打开图标文件 步骤二：增加背景图层 步骤三：修改背景图层的颜色和透明度（hover状态的） 步骤五：剪裁
纯css3鼠标经过图片显示描述特效
weixin_30493321的博客
08-30 757
http://***/Article/5582 今天给大家带来的是用css3技术实现鼠标经过图片，显示图片描述的动画效果。鼠标经过图片时，图片动画缩小并渐变显示描述。我们一起看看效果图： 在线预览源码下载 我们一起学习下此案例的代码。 html代码： <div align="center"> <...
酷炫CSS3鼠标经过图片显示特效
萧萧爱前端的专栏
02-02 582
地址：http://www.w2bc.com/demo/2015-01-30-HoverEffectIdeas/index.html
CSS———如何利用CSS实现hover 切换图片效果
Bonsoir777的博客
07-06 5756
本文主要介绍了如何利用css 实现hover时图片切换的效果
从特效入手，深入了解CSS（二）：鼠标 hover 特效
黑猫几绛的博客
04-17 3515
不建议跳跃阅读！ 这篇文章将从头开始介绍如何实现一个特效 中间偶尔会穿插一些css3或平时接触不多的css属性
CSS图文消息的鼠标hover悬停特效用Vue
05-26
可以使用Vue的`@mouseover`和`@mouseout`事件来实现CSS图文消息的鼠标hover悬停特效。 首先，在Vue的template中，使用v-for循环渲染出图文消息列表，并为每个消息绑定一个事件： ```html <template> <div> <div v-for="message in messages" :key="message.id" @mouseover="showMessage(message.id)" @mouseout="hideMessage()"> <img :src="message.image" alt="message image"> <p>{{ message.text }}</p> </div> </div> </template> ``` 在Vue的script中，定义`showMessage`和`hideMessage`方法，分别用于显示和隐藏鼠标悬停的消息： ```javascript <script> export default { data() { return { messages: [ { id: 1, image: 'image1.jpg', text: 'Message 1' }, { id: 2, image: 'image2.jpg', text: 'Message 2' }, { id: 3, image: 'image3.jpg', text: 'Message 3' }, ], hoverMessageId: null } }, methods: { showMessage(id) { this.hoverMessageId = id }, hideMessage() { this.hoverMessageId = null } } } </script> ``` 最后，在Vue的style中，使用CSS样式来实现鼠标悬停特效。可以使用`:hover`选择器来实现鼠标悬停时的效果，并根据`hoverMessageId`来判断当前鼠标悬停的消息： ```css <style scoped> div:hover:not([data-id='{{ hoverMessageId }}']) p { opacity: 0.5; } div[data-id='{{ hoverMessageId }}'] p { font-weight: bold; } </style> ``` 这样，在鼠标悬停某个图文消息时，该消息的文本会加粗显示，其他消息的文本会变得半透明。当鼠标离开图文消息时，所有消息都会恢复原来的样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值