首页 > 其他分享 >CSS:鼠标移动到图片上的动画

CSS:鼠标移动到图片上的动画

时间:2022-09-30 10:57:39浏览次数:49  
标签:动画 鼠标 img gradient pic CSS

CSS:鼠标移动到图片上的动画

.pic img
{
	width: 100%;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	transition: all .5s;
}             
.pic:hover img
{
	transform: scale(1.1);
	transition: all .5s;
}

  

CSS背景渐变:

div:hover
{
	background-image: linear-gradient(122deg, #225ed6 0%, #3effff 100%), linear-gradient( #ffffff, #ffffff);
}

  

 

标签:动画,鼠标,img,gradient,pic,CSS
From: https://www.cnblogs.com/luomingui/p/16744149.html

相关文章

  • 摆脱鼠标操作 - vscode - vim Ctrl + hjkl 我定位为 上下翻半页和行头行尾
    为什么摆脱鼠标操作-vscode-vimCtrl+hjkl我定位为上下翻半页和行头行尾翻页和当前行的开头结尾我觉得都是高频操作实现settings.json还附加了几个其他......
  • 带有旋转效果的提交按钮 - 仅限 CSS - 一步一步
    带有旋转效果的提交按钮-仅限CSS-一步一步HTML对于HTML,我们需要一个带有文本和“检查”svg元素的按钮。我们将显示文本并隐藏svg。在按钮焦点上,我们将显示sv......
  • 延迟滚动动画
    延迟滚动动画延迟滚动动画免费下载在HTML、CSS和JavaScript中HTML:<divclass="boxbox_1"><ul><li></li><li></li><li></li><li></li><......
  • element.css
    #dividerTitle{color:dimgrey;font-weight:bold;font-family:"Arial";}.alignRight{margin-left:40%;}.el-header,.el-footer{background-col......
  • CSS空心箭头
    使用before和after伪类实现空心箭头//主要利用before和after的边框实心箭头,通过绝对定位覆盖完成看上去像空心箭头的设计.dom{display:inline-block;position:......
  • CSS 设置动态高度, 等比例缩放宽度 (超实用)
    如何通过CSS实现高度height随着宽度width变化而变化,保持长宽比例不变,且宽度是根据父元素宽度变化的使用:before伪元素,能获取到实际高度(推荐)html:<div......
  • 摆脱鼠标系列 - vscode - Esc 返回时候 强制显示英文输入法 - ahk 脚本 - autoHotKey
    为什么摆脱鼠标系列-vscode-Esc返回时候强制显示英文输入法切换网页的时候,回来还是搜索输入法,就想到按esc,直接强制英文输入法之前vim插件里面用了一个im-sel......
  • css 左侧固定右侧自适应(7种)
    ​​演示demo​​​其中有老生常谈的​​float​​方法,BFC方法,也有CSS3的​​flex​​布局与​​grid​​布局。常用的宽度自适应的方法通常是利用了​​block​​水平的......
  • 使用animate.css增加动效
    给网页增加一些动效会使得网页更加地生动。animate.css封装了一个动画库,可直接使用封装好的动画效果。其链接为:​​https://daneden.github.io/animate.css/​​ 我们可以......
  • element-ui el-table 悬停/选中 行样式,鼠标样式
    /*用来设置当前页面element全局table选中某行时的背景色*/.el-table__bodytr.current-row>td{background-color:#78f709!important;/*color:#f19944;......