css变化代码2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*格式化,居中,内边框为零*/
*{
margin: 0px auto;
padding: 0px;
}
/*格式清除*/
.clear{
clear: both;
}
#wai{
width: 1200px;
height: 600px;
border: 1px solid transparent;
}
#lajin{
width:300px;
height: 260px;
border: 1px solid transparent;
float: left;
margin-left: 90px;
margin-top: 20px;
overflow: hidden;
}
/*过渡时间*/
#lajin img{
transition: 2s;
}
/*鼠标经过时的放大缩小*/
#lajin img:hover{
transform: scale(1.5,1.5);
}
#twod{
width:300px;
height: 260px;
border: 1px solid transparent;
float: left;
margin-left: 60px;
margin-top: 20px;
background-image: url(img/qy2.jpg);
background-size: 100% 100%;
/*过渡所需的时间*/
transition: 2s;
}
/*鼠标经过时的2D旋转180度*/
#twod:hover{
transform: rotate(180deg);
}
#threed{
width:300px;
height: 260px;
border: 1px solid transparent;
float: left;
margin-left: 60px;
margin-top: 20px;
background-image: url(img/qy3.jpg);
background-size: 100% 100%;
transition: 2s;
}
/*鼠标经过时的沿Y旋转180度*/
#threed:hover{
transform: rotateY(180deg);
}
#yinyingyuanjiao{
width:300px;
height: 260px;
border: 1px solid transparent;
float: left;
margin-left: 90px;
margin-top: 20px;
background-image: url(img/qy4.jpg);
background-size: 100% 100%;
transition: 2s;
}
/*鼠标经过时的变圆角
阴影*/
#yinyingyuanjiao:hover{
border-radius: 5px;
box-shadow: -10px 10px 5px slategray;
}
#lvjing{
width:300px;
height: 260px;
border: 1px solid transparent;
float: left;
margin-left: 60px;
margin-top: 20px;
}
#lvjing img{
width: 100%;
height: 100%;
transition: 2s;
}
/*鼠标经过时添加滤镜*/
#lvjing img:hover{
filter: hue-rotate(180deg);
}
#huanbeijing{
width:300px;
height: 260px;
border: 1px solid transparent;
float: left;
margin-left: 60px;
margin-top: 20px;
background-image: url(img/qy1.jpg);
background-size: 100% 100%;
transition: 2s;
}
/*鼠标经过时的更换背景*/
#huanbeijing:hover{
background-image: url(img/qy6.jpg);
background-size: 100% 100%;
}
#lvjing1{
width:300px;
height: 260px;
border: 1px solid transparent;
float: left;
margin-left: 60px;
margin-top: 20px;
}
#lvjing1 img{
width: 100%;
height: 100%;
transition: 2s;
}
/*鼠标经过时添加滤镜*/
#lvjing1 img:hover{
filter: grayscale(100%);
}
#lvjing2{
width:300px;
height: 260px;
border: 1px solid transparent;
float: left;
margin-left: 60px;
margin-top: 20px;
background-image: url(img/qy3.jpg);
background-size: 100% 100%;
transition: 5s;
}
#lvjing2:hover{
background-image: url();
background-color: black;
}
</style>
</head>
<body>
<div id="wai">
<div id="lajin">
<img src="img/wangzuxian.jpeg" width="300px" height="260px"/>
</div>
<div id="twod"></div>
<div id="threed"></div>
<div class="clear"></div>
<div id="yinyingyuanjiao"></div>
<div id="lvjing">
<img src="img/qy5.jpg"/>
</div>
<div id="huanbeijing"></div>
</div>
<div id="lvjing1">
<img src="img/qy5.jpg"/>
</div>
<div id="lvjing2">
</div>
</body>
</html>
css变化代码2的更多相关文章
- css变化代码
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
- web前端学习笔记(CSS变化宽度布局)
一.“1-2-1”单列变宽布局: 对于变宽度的布局,首先要使内容的整体宽度随浏览器窗口宽度的变化而变化.因此中间的container容器中的左右两列的总宽度也会变化,这样就会产生不同的情况.这两列是按 ...
- 根据判断PC浏览器类型和手机屏幕像素自动调用不同CSS的代码
1.媒体查询方法在 css 里面这样写 -------------------- @media screen and (min-width: 320px) and (max-width: 480px) ...
- css初始化代码
最近老有新项目开发,一直在找存留的CSS初始化代码,索性放到这里备份下, @charset "utf-8"; /* -------------------------------- ...
- 网站哀悼变灰代码集合 兼容所有浏览器的CSS变暗代码
下面这些CSS代码可以把网站的网页变为黑白,只需将代码加到CSS文件或网页最顶端就可以实现素装.建议全国站长动起来.为遇难的同胞哀悼. 如何将网站变成灰色调呢,网站变灰色方法是什么?有哪些?为了方便大 ...
- CSS透明代码
透明往往能产生不错的网页视觉效果,先奉上兼容主流浏览器的CSS透明代码: .transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5 ...
- 各大门户网站的css初始化代码
腾讯QQ官网 css样式初始 body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select ...
- CSS颜色代码 颜色值 颜色名字大全(转载)
CSS颜色代码 颜色值 颜色名字大全 转载处http://flyjj.com/css-colour-code.html 颜色值 CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) ...
- CSS颜色代码大全
CSS颜色代码大全 转载:http://blog.163.com/wujinhongisme@126/blog/static/3613698020095115919389/ RGB ( Red,Gre ...
随机推荐
- [BZOJ4542] [Hnoi2016] 大数 (莫队)
Description 小 B 有一个很大的数 S,长度达到了 N 位:这个数可以看成是一个串,它可能有前导 0,例如00009312345.小B还有一个素数P.现在,小 B 提出了 M 个询问,每个 ...
- 关系型数据库工作原理-事务管理(一)(翻译自Coding-Geek文章)
本文翻译自Coding-Geek文章:< How does a relational database work>. 原文链接:http://coding-geek.com/how-dat ...
- Spring Boot会员管理系统——处理文件上传
温馨提示 Spring Boot会员管理系统的中,需要涉及到Spring框架,SpringMVC框架,Hibernate框架,thymeleaf模板引擎.所以,可以学习下这些知识.当然,直接入门的话使 ...
- asp.net中http接口的开发
第一篇博客,如有不足请大家多多谅解. 最近一段时间主导着一个app的开发.所有功能都交给后台接口进行处理.采用http,传输的数据类型为json. http接口是一种基于基于TCP.http服务的ap ...
- map/vector erase
问题核心:erase之后迭代器是否失效 vector调用erase之后,该迭代器之后的迭代器都失效: map调用erase之后,其他迭代器并不会失效. vector<int> vecDat ...
- linux学习之路－－（六）用户及权限详解
计算机资源 用户 用户的容器,用户组 权限 进程时用户访问计算机的代理,操作文件的时候,文件本身有权限,进程本身也有权限 安全上下文(secure context) 权限: r, w, x 文件: r ...
- 51ak带你看MYSQL5.7源码2：编译现有的代码
从事DBA工作多年 MYSQL源码也是头一次接触 尝试记录下自己看MYSQL5.7源码的历程 目录: 51ak带你看MYSQL5.7源码1:main入口函数 51ak带你看MYSQL5.7源码2:编译 ...
- vue中$on与$emit的实际应用
$on常用于监听自定义事件,触发后可传入参数 //监听event1事件 vm.$on('event1',function(msg){ console.log(msg) }) //触发event1自定义 ...
- [模拟赛] T3 最优序列
Description 给出一个长度为n(n<=1000)的正整数序列,求一个子序列,使得原序列中任意长度为m的子串中被选出的元素不超过k(k<=m<=10)个,并且选出的元素之和最 ...
- Redis TTL命令
Redis TTL 命令以秒为单位返回 key 的剩余过期时间. redis TTL 命令基本语法如下: redis 127.0.0.1:6379> TTL KEY_NAME 当 key 不存在 ...