css3 鼠标移动到上方增加阴影增加往前移动

最新推荐文章于 2023-02-25 01:52:10 发布
最新推荐文章于 2023-02-25 01:52:10 发布
阅读量437 收藏
点赞数
分类专栏： css 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangatong/article/details/123993355
版权 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    body{
      background:#f5f5f5;
    }
    ul{
      list-style: none;
      display: flex;
      justify-content:left;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      width: 992px;
    }
    .box{
      margin: 100px;
    }
    ul li img{
      width: 160px;
      height: 160px;
    }
    li{
      position: relative;
      z-index: 1;
      width: 234px;
      margin-left: 14px;
      margin-bottom: 14px;
      background: #fff;
      -webkit-transition: all .2s linear;
      transition: all .2s linear;
      height: 300px;
    }
    a{
      text-decoration: none;
      color: black;
      display: block;
      height: 100%;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      padding: 20px 0;
    }
    .item-m{
      width: 150px;
      height: 150px;   
      margin: 0 auto 18px;
    }
    .title{
      text-align: center;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    li:hover{
      -webkit-box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
      box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
      -webkit-transform: translate3d(0,-2px,0);
      transform: translate3d(0,-2px,0);
    }
  </style>
</head>
<body>
  <div class="box">
    <ul>
      <li>
        <a href="">
          <div class="item-m">
            <img src="./1.jpg" alt="">
          </div>
          <p class="title">
            Redmi 10A                   
          </p>
          <p class="title">
            大电量、大音量、大屏幕
          </p>
        </a>
      </li>
      <li>
        <a href="">
          <div class="item-m">
            <img src="./1.jpg" alt="">
          </div>
          <p class="title">
            Redmi 10A                   
          </p>
          <p class="title">
            大电量、大音量、大屏幕
          </p>
        </a>
      </li>
      <li>
        <a href="">
          <div class="item-m">
            <img src="./1.jpg" alt="">
          </div>
          <p class="title">
            Redmi 10A                   
          </p>
          <p class="title">
            大电量、大音量、大屏幕
          </p>
        </a>
      </li>
      <li>
        <a href="">
          <div class="item-m">
            <img src="./1.jpg" alt="">
          </div>
          <p class="title">
            Redmi 10A                   
          </p>
          <p class="title">
            大电量、大音量、大屏幕
          </p>
        </a>
      </li>
      <li>
        <a href="">
          <div class="item-m">
            <img src="./1.jpg" alt="">
          </div>
          <p class="title">
            Redmi 10A                   
          </p>
          <p class="title">
            大电量、大音量、大屏幕
          </p>
        </a>
      </li>
      <li>
        <a href="">
          <div class="item-m">
            <img src="./1.jpg" alt="">
          </div>
          <p class="title">
            Redmi 10A                   
          </p>
          <p class="title">
            大电量、大音量、大屏幕
          </p>
        </a>
      </li>
      <li>
        <a href="">
          <div class="item-m">
            <img src="./1.jpg" alt="">
          </div>
          <p class="title">
            Redmi 10A                   
          </p>
          <p class="title">
            大电量、大音量、大屏幕
          </p>
        </a>
      </li>
      <li>
        <a href="">
          <div class="item-m">
            <img src="./1.jpg" alt="">
          </div>
          <p class="title">
            Redmi 10A                   
          </p>
          <p class="title">
            大电量、大音量、大屏幕
          </p>
        </a>
      </li>
    </ul>
  </div>
</body>
</html>
wangatong
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯CSS实现鼠标移上图片添加阴影效果
WEB架构师- Facestrap
07-11 4694
CSS给图片添加阴影 *{padding:0;margin:0;} body{background:#E8EDF1;padding:20px;} #profileAvatar {overflow:hidden;zoom:1;} #profileAvatar i{float:left;visibility:hidden;background:url(/jscss/demoimg/2009
【前端CSS】鼠标移动到按钮加阴影特效
weixin_43444977的博客
11-04 1275
【代码】【前端CSS】鼠标移动到按钮加阴影特效
#css动画# 【四】如何实现鼠标经过盒子，盒子向上移动且有阴影？
ZHENGCHUNJUN的博客
06-26 3085
#css动画# 如何实现鼠标经过盒子，盒子向上移动且有阴影？ html <div class="grid-content bg-purple"> <img :src="`/static/image/join${index + 1}.png`" :alt="item.stage" @click="clickControl(item.id)">
css清除a标签在移动端点击时出现阴影
YX_PJJuan的博客
03-07 410
-webkit-tap-highlight-color: rgba(0,0,0,0);
css实现立体投影文字效果
最新发布
两天打鱼三天晒网
02-25 1049
非常立体的字，偶然在某个系统看到的，扒下来以备日后使用。原始页面上还有鼠标移动到某个字上就会有“点亮”的效果，不知道怎么实现的，我仔细查看了它的css代码以及事件，发现都没有。实在是很疑惑，如果有谁知道请告之。
css3鼠标移上图片放大遮罩效果特效代码
03-20
本主题涉及的知识点是“CSS3鼠标移上图片放大遮罩效果”，这是一种常见的网页交互设计，常用于产品展示或者图像信息呈现，旨在提高用户体验。当用户将鼠标悬停在图片上时，图片会在限定的区域内放大，同时配合文字的...
3D按钮鼠标悬停CSS3特效
07-24
接着，鼠标悬停特效是网页交互设计中常用的一种手法，它可以在用户将鼠标指针移到按钮上方时触发特定的变化，提高用户的参与度。在CSS3中，我们可以使用:hover伪类来定义元素在鼠标悬停状态下的样式。例如，可以通过...
css3文字导航鼠标悬停气泡动画特效
09-14
本话题主要关注的是“css3文字导航鼠标悬停气泡动画特效”，这是一个利用CSS3来实现的导航菜单效果，当鼠标悬停在导航链接上时，会弹出一个气泡显示附加信息，同时伴有动画效果，增加了用户的交互体验。 首先，我们...
CSS3鼠标悬停图标导航动画特效.zip
07-11
"CSS3鼠标悬停图标导航动画特效"就是这样一个例子，它通过利用CSS3的特性，实现了在鼠标悬停时图标导航的变换效果，为用户带来更丰富的视觉体验。 首先，我们来看看CSS3中的关键帧动画（@keyframes）如何应用于这个...
鼠标hover图片css3动画特效.zip
07-11
在这个案例中，当鼠标移到图片上方时，会触发特定的CSS3动画。 2. **Transition（过渡）**： CSS3的`transition`属性用于定义元素从一种样式过渡到另一种样式的速度。它包括四个值：`property`, `duration`, `...
css 实现文字加描边和投影
Suger的博客
08-04 1441
代码】css 实现文字加描边和投影。
css3如何向上_CSS3 实现div元素向上移动的效果
weixin_42510604的博客
12-23 6912
今天应一个用户的要求，要做一个html页面，而页面中的部份div元素，在鼠标移入时向上移动，鼠标移出时恢复到原来的位置。效果是用纯css3代码来实现的，不使用任合的JS代码。css3实现div向上移动的效果代码html代码：html>/*鼠标移入，向上移动8个像素*/.div:hover{transform:translateY(-8px);}.div{width:100px;heig...
css简单实现div鼠标悬浮后出现阴影
weixin_45719052的博客
06-08 3191
css简单实现div鼠标悬浮后出现阴影代码如下（示例）： 先定义一个div盒子悬浮前代码示例： 鼠标悬浮时（hover）代码示例： 总结 以上就是今天要讲的内容，本文仅仅简单介绍了css实现盒子阴影。...
前端学习（295）：媒体查询语法
歌谣的博客
01-02 261
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equ...
鼠标移上去div边框阴影慢慢出现
lowers_sunshine的博客
07-19 5635
.reg1,.reg2{width:260px;height:265px;border:1px solid #e5e5e5;margin-top:4%;float:left;margin-left:4%;transition: all 0.15s;  } .reg1:hover,.reg2:hover{ -webkit-box-shadow: 2px 2px 8px 1px rgba(20, 2
css3鼠标放上去一个层中间出现一个阴影并且放大
u013018357的博客
03-27 3438
先上图 <div class="box"> <section class="section"> 测试 </section> <aside class="aside"> </aside> </div>css代码：.box{ height: 300px; width: 300px;
css怎么实现鼠标移动到div块时自动加阴影效果？
tenggeer0789的博客
04-23 1万+
我们在浏览各大网站时，点击其中的图片可能会出现放大或者旋转等等的特效。这种效果的确能让人眼前一亮，也就可能带来用户点击的流量。当然强大的css功能不仅仅只有这样特效。本篇文章就给大家介绍一种更加酷炫的特效即当鼠标移入div块时产生的css阴影效果，这样就能立即产生立体感。 css阴影效果具体代码示例如下： <style> .shadow{ flo...
div+css 上下左右移动
热门推荐
wtt561111的专栏
01-16 6万+
利用div+css，使得选中的对象，上下左右进行位置移动。
css 实现div阴影，上下移动
weixin_34216196的博客
03-30 689
//上下移动 .contact_box{ text-align: center; width: 24%; height: 100px; float: left; margin-top: 20px; transition:all 0.5s;//控制速度}.contact_box:hover{ margin-top: 10px; cursor:poin...
HTML5+CSS3开发Android移动应用全攻略
本资源是一本名为《Pro.Android.Web.Apps.Develop.for.Android.using.HTML5,CSS3》的专业书籍，专注于在Android等移动设备上利用HTML5、CSS3和JavaScript进行Web应用程序开发。作者是Damon Oehlman和Sébastien ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值