CSS旋转缩放
<style type="text/css">
figure{
float: left;
}
.test1{
border-radius: 0px;
height: 200px;
width: 200px;
overflow: hidden;
ransition-property: border-radius;
transition-duration: .5s;
transition-delay: .5s;
transition: all 1s;
}
.test1:hover{
border-radius: 200px;
box-shadow:0px 0px 22px #ffc8bd;
}
.test2{
transition-duration: .5s;
transition-delay: .5s;
}
.test2:hover{
transform: scale(1.5);
box-shadow:0px 0px 22px #ffc8bd;
}
.test3{
transition-duration: .5s;
transition-delay: .5s;
}
.test3:hover{
transform: rotate(45deg);
box-shadow:0px 0px 22px #ffc8bd;
}
.test4 img{
transition-duration: .5s;
transition-delay: .5s;
opacity: 1;
}
.test4 img:hover{
opacity: 0.5;
box-shadow:0px 0px 22px #ffc8bd;
}</style>
<figure style="margin-left: 130px;" class="test1">
<img src="data:images/user-3.jpg" width="200px" height="200px"/>
</figure>
<figure class="test2">
<img src="data:images/user-3.jpg" width="200px" height="200px"/>
</figure>
<figure class="test3">
<img src="data:images/user-3.jpg" width="200px" height="200px"/>
</figure>
<figure class="test4">
<img src="data:images/user-3.jpg" width="200px" height="200px"/>
</figure>
四张图片,分别都是会伴随盒子阴影。
设置鼠标移上时,四张图像的过渡或变形效果。其中,第一张为直角边框变为圆角边框的过渡效果;第二幅为图片逐渐放大的过渡效果;第三张为图片旋转的变形效果;第四张为图片透明度逐渐变为0的过渡效果
CSS旋转缩放的更多相关文章
- osg矩阵变换节点-----平移旋转缩放
osg矩阵变换节点-----平移旋转缩放 转自:http://www.cnblogs.com/ylwn817/articles/1973396.html 平移旋转缩放这个三个是osg矩阵操作中,最常见 ...
- osg中使用MatrixTransform来实现模型的平移/旋转/缩放
osg中使用MatrixTransform来实现模型的平移/旋转/缩放 转自:http://www.cnblogs.com/kekec/archive/2011/08/15/2139893.html# ...
- 简单的CSS圆形缩放动画
简单的CSS圆形缩放动画 话不多说鼠标移动上去,看效果吧,效果预览 代码如下: <!DOCTYPE html> <html> <head> <title> ...
- JS旋转和css旋转
js旋转 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <styl ...
- Blender模型导入进Unity,旋转缩放的调整
Blender跟Unity的XYZ轴不同的原因,导致Blender模型导入Unity之后会发生模型朝向不对. 请先看看下边这个情况: 首先,Blender物体模式下,对模型进行 旋转 缩放,将会在右边 ...
- canvas星空背景特效+CSS旋转相册学习
今天在看帖子的时候,看到了个有趣的css旋转相册,刚好之前做了一个星空背景dome,这里给大家分享下代码: 旋转相册参考:https://blog.csdn.net/gitchatxiaomi/art ...
- CSS基础 transform属性的基本使用 移动 旋转 缩放
1.实现元素位移效果 语法:transform:translate(x轴水平移动距离,Y轴垂直移动距离) 取值:正负都可以 取值方式:数字+px 百分比 :参照自己本的盒子的百分比 比如:本身自己的宽 ...
- CSS3旋转缩放移动倾斜等效果——transform
1.transform浏览器支持情况 也就是说目前不考虑老浏览器的话是不用加前缀的,感谢菜鸟教程:https://www.runoob.com/cssref/css3-pr-transform.htm ...
- canvas学习笔记(下篇) -- canvas入门教程--保存状态/变形/旋转/缩放/矩阵变换/综合案例(星空/时钟/小球)
[下篇] -- 建议学习时间4小时 课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...
随机推荐
- DIV层的使用方法
1.可以判断你选择的样式是否存在用下边的方法(如果存在的话执行某个方法) if ($(this).hasClass('cur')) 2.这个方法可以查询一个页面中同样的div层总共有几个 var i= ...
- h5 实现定位
直接上代码,代码使用了vue相关的语法 并且引入了dialog插件 ,使用时直接调用getLocation()方法就可以了! // 定位 function getLocation(){ console ...
- Dvelopment descriptor
部署描述符是JavaEE程序常见的一部分,但是之前都没有较为全面的学习过,这里就较为全面的记录一下部署描述符中的元素.部署一个Servlet 3 或以上应用程序是一件轻而易举的事.通过Servlet注 ...
- 安装cmake
$ sudo apt-get install build-essential$ wget http://www.cmake.org/files/v3.11/cmake-3.11.3.tar.gz$ t ...
- (转)GANs and Divergence Minimization
GANs and Divergence Minimization 2018-12-22 09:38:27 This blog is copied from: https://colinraff ...
- Vue:(五)axios
Axios是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中.axios主要是用于向后台发起请求的,还有在请求中做更多可控功能.官方不再维护vue-resource,推 ...
- 用jQuery实现参数自定义的文字跑马灯效果
一,明确需求 基本需求:最近在工作中接到一个新需求,简单来说就是实现一行文字从右到左跑马灯的效果,并且以固定的时间间隔进行循环. 原本这是一个很容易实现的需求,但是难点是要求很多参数得是用户可自行设置 ...
- spring aop 中的JoinPoint
AspectJ使用org.aspectj.lang.JoinPoint接口表示目标类连接点对象,如果是环绕增强时,使用org.aspectj.lang.ProceedingJoinPoint表示连接点 ...
- hdoj4871
5 4 21 2 12 3 23 4 34 5 2
- script利用src引用外部js文件,如果内部嵌套了js代码呢
<script src='test.js' defer async> var a = 5; </script> 这个时候 var a = 5;会被忽略.