CSS3 实现图片上浮动画_html/css_WEB-ITnose
程序员文章站
2022-04-23 12:11:03
...
.gist { width:220px; height:130px; background-image: url(2.jpg); background-repeat:no-repeat; border:5px solid green; background-position:50% 50%; transition:background-position 2s; -moz-transition:background-position 2s; /* Firefox 4 */ -webkit-transition:background-position 2s; /* Safari and Chrome */ -o-transition:background-position 2s; /* Opera */}.gist:hover { background-position: 50% -100px;}图片水平垂直居中:background-position:50% 50%;
推荐阅读
-
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
-
纯CSS3实现8组超炫酷鼠标滑过图片动画
-
纯css3实现鼠标经过图片显示描述的动画效果
-
HTML5 实现小车动画效果(Canvas/CSS3/JQuery)
-
纯CSS3实现图片展示特效_html/css_WEB-ITnose
-
一款纯css3实现的响应式导航_html/css_WEB-ITnose
-
CSS3 实现六边形Div图片展示效果_html/css_WEB-ITnose
-
一款简洁的纯css3代码实现的动画导航_html/css_WEB-ITnose
-
一款纯css3实现的机器人看书动画效果_html/css_WEB-ITnose
-
html5实现图片转圈的动画效果——让页面动起来