css3鼠标悬停div盒子实现阴影效果

555 ℃
div {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;  
}
div:hover {
  transform: translateY(-4px);
  -webkit-transform: translateY(-4px);
  -moz-transform: translateY(-4px);
  box-shadow: 0 20px 32px -18px rgba(79,125,183,.3);
  -webkit-box-shadow: 0 20px 32px -18px rgba(79,125,183,.3);
  -moz-box-shadow: 0 20px 32px -18px rgba(79,125,183,.3);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

具体参数介绍:

transition:位移时间和时间曲线

transform:位移距离和方向

box-shadow:阴影的颜色,方向,尺寸

Motion Vue:无需编写复杂的命令式代码,轻松实现动画效果

css3动画导航列表动态效果(附实例)

ButtonsGenerator:一个免费的CSS按钮在线生成工具

盘点宝塔SSH工具常见的35个命令

汇聚全网热榜API,包括百度/微博/哔哩/抖音/今日头条/百度贴吧等等

标签: css3阴影效果, css3鼠标悬停

上面是“css3鼠标悬停div盒子实现阴影效果”的全面内容,想了解更多关于 前端知识 内容,请继续关注web建站教程。

当前网址:https://m.ipkd.cn/webs_11701.html

声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!

生活小工具

收录了万年历、老黄历、八字智能排盘等100+款小工具!生活小工具
es6语法中根据相同key合并数组并生成子数组
mysql导入出现乱码怎么解决
MongoDB如何利用正则表达式进行模糊查询?
解决dedecms图片附件二级域名无法显示
帝国cms指定id范围随机调用信息