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:无需编写复杂的命令式代码,轻松实现动画效果
ButtonsGenerator:一个免费的CSS按钮在线生成工具
汇聚全网热榜API,包括百度/微博/哔哩/抖音/今日头条/百度贴吧等等
上面是“css3鼠标悬停div盒子实现阴影效果”的全面内容,想了解更多关于 前端知识 内容,请继续关注web建站教程。
当前网址:https://m.ipkd.cn/webs_11701.html
声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!