css3左右移动动画效果(CSS3鼠标悬浮过渡缩放效果)
类别:Web前端 浏览量:397
时间:2021-11-03 15:47:18 css3左右移动动画效果
CSS3鼠标悬浮过渡缩放效果以下为一个纯css写的图片鼠标悬浮缩放效果,其实基本原理十分简单,我们访问一些网站可以发现他们都会对图片做一些交互效果的处理,当然实现图片过渡效果有很多方式,例如使用JQuery或者一些第三方js动画库,本例仅是展示基本的效果,不对所用知识进行归纳。
代码如下:
<!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> <script></script> <style> * { box-sizing: border-box; } body { background-color: rgb(251, 163, 163); } /* 长条图样式 */ .containlist { position: relative; margin-top: 100px; margin-left:10%; height: 100px; width: 80%; overflow: hidden; border-radius: 30px; box-shadow: rgb(54, 53, 53) 10px 10px 10px; } .list { position: absolute; width: 100%; height: 100%; background-position: center; background-size: cover; border-radius: 30px; transition: 0.5s; color: white; font-weight: bold; text-align: center; } .list:hover { transform: scale(1.2); } </style> </head> <body> <h1 style="text-align: center;color: white;background-color: black;">效果测试</h1> <!-- 长条图 --> <li class="containlist"> <li class="list" style="background-image: url(006.jpg" alt="css3左右移动动画效果(CSS3鼠标悬浮过渡缩放效果)" border="0" />
实际效果:
git图
图片的样式可以自行进行更改,打造你自己的中二风格。
到此这篇关于CSS3鼠标悬浮过渡缩放效果的文章就介绍到这了,更多相关css3鼠标悬浮过渡缩放内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!
您可能感兴趣
- html5canvas功能介绍(Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 附转换公式)
- 微信小程序canvas缩放(微信小程序之html5 canvas绘图并保存到系统相册)
- php 上传图片如何压缩(PHP实现将上传图片自动缩放到指定分辨率,并保持清晰度封装类示例)
- html 设置canvas的背景图可缩放(浅析canvas元素的html尺寸和css尺寸对元素视觉的影响)
- canvas 缩放后字发虚(canvas 绘图时位置偏离的问题解决)
- python简单代码画图(python+pyqt5实现图片批量缩放工具)
- css3左右移动动画效果(CSS3鼠标悬浮过渡缩放效果)
- css3动画按钮加光晕效果(CSS3 制作的悬停缩放特效)
- python opencv图像合并(Python3+OpenCV2实现图像的几何变换平移、镜像、缩放、旋转、仿射)
- vuejs图片缩放裁切(vue+js点击箭头实现图片切换)
- 赢麻了 富士公布2021年度财报 营利同比增长240(富士公布2021年度财报)
- 医事文化谈屑 | 古人的名 字 号(医事文化谈屑古人的名)
- ()
- 网友很惭愧,自己写了很多年的字,到头来还不如一名小学生写的好(自己写了很多年的字)
- 中华第一楷 张瑞龄 86岁高龄,苦练楷书71年,一幅字卖593万(中华第一楷张瑞龄)
- 冯骥才 年意(冯骥才年意)
热门推荐
- ASP.NET cache缓存的用法
- python里字典常用方法(Python使用字典的嵌套功能详解)
- ih5如何点击按钮跳转至网页(HTML5跳转小程序wx-open-launch-weapp的示例代码)
- php怎么修改单独一行数据(PHP实现批量修改文件名的方法示例)
- css中最常用的选择符(CSS 类选择符和ID选择符的区别)
- pythonsocket详细用法(Python中的Socket 与 ScoketServer 通信及遇到问题解决方法)
- docker与本地存储(docker 设置windows存储路径的操作)
- tracert命令图解(tracert命令怎么用?tracert命令使用详解)
- 为什么asp.net网站第一次加载慢
- python变量指向讲解(详解python中init方法和随机数方法)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9