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鼠标悬浮过渡缩放内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!
您可能感兴趣
- python opencv图像合并(Python3+OpenCV2实现图像的几何变换平移、镜像、缩放、旋转、仿射)
- css3动画按钮加光晕效果(CSS3 制作的悬停缩放特效)
- html5canvas功能介绍(Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 附转换公式)
- python简单代码画图(python+pyqt5实现图片批量缩放工具)
- canvas 缩放后字发虚(canvas 绘图时位置偏离的问题解决)
- html 设置canvas的背景图可缩放(浅析canvas元素的html尺寸和css尺寸对元素视觉的影响)
- vuejs图片缩放裁切(vue+js点击箭头实现图片切换)
- 微信小程序canvas缩放(微信小程序之html5 canvas绘图并保存到系统相册)
- php 上传图片如何压缩(PHP实现将上传图片自动缩放到指定分辨率,并保持清晰度封装类示例)
- css3左右移动动画效果(CSS3鼠标悬浮过渡缩放效果)
- 律界衣品最好,时尚圈学识数高,41岁的Amal堪称现实版的傲骨贤妻(时尚圈学识数高)
- 刘智泰确认出演《Good Wife》 担纲男一号(刘智泰确认出演Good)
- 《傲骨之战》剧终 律政女魔头Diane,为什么是大女主天花板(傲骨之战剧终律政女魔头Diane)
- 汉族(汉族的祖先是谁)
- 中国有几个名族(中国有几个民族没列入56个民族)
- 数学语文题目(语文的数学题)
热门推荐
- 宝塔如何通过ip访问网站(宝塔面板如何禁止“服务器IP地址”打开网站?)
- css3渐变色动画代码(CSS3 实现的动态星空背景)
- SqlServer GO命令循环使用实例代码(SqlServer GO命令循环使用实例代码)
- xm文档使用教程(xmapp环境搭建注意事项说明)
- phpstudy服务器怎么设置(phpstudy2018 访问目录服务权限问题)
- mongodb索引的优化
- vue和springboot实战项目(vue+spring boot实现校验码功能)
- iis6双php版本的设置(云主机IIS7.5支持PHP5.3以上版本和MYSQL)
- vue如何在tab标签页循环加定时器(vue实现tab标签标签超出自动滚动)
- css3实现3d效果教程(纯 CSS3实现的霓虹灯特效)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9