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 ...
随机推荐
- [HNOI2010]CHORUS 合唱队
题面 Bzoj Sol 简单\(DP\) # include <bits/stdc++.h> # define IL inline # define RG register # defin ...
- [CQOI2009]dance跳舞
每个人拆成两个点,一个表示接受喜欢的,一个表示不接受喜欢的,(男yes,男no,女yes,女no) 男yes->男no,容量为k:女no->女yes,容量为k 男女喜欢,则男yes-> ...
- [BZOJ3668] [Noi2014] 起床困难综合症 (贪心)
Description 21 世纪,许多人得了一种奇怪的病:起床困难综合症,其临床表现为:起床难,起床后精神不佳.作为一名青春阳光好少年,atm 一直坚持与起床困难综合症作斗争.通过研究相关文献,他找 ...
- sudo解决方案企业级应用实战
visudo 编辑sudo配置文件 which 查找命令所在路径 例:touch /etc/oldboy.txt 没证件 sudo touch /etc/oldboy.txt 可以 内置命令没路 ...
- jsp常用的jstl语法
<c:forEach items="<object>" begin="<int>" end="<int>&q ...
- 封装Jquery 合并table中任何同列数据
封装代码: jQuery.fn.rowspan = function (colIdx) { //封装JQuery同列值相同合并小插件 return this.each(function () { va ...
- spring boot整合log4j2
POM配置 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http: ...
- ibatis annotations 注解方式返回刚插入的自增长主键ID的值
mybatis提供了注解方式编写sql,省去了配置并编写xml mapper文件的麻烦,今天遇到了获取自增长主键返回值的问题,发现相关问答比较少,还好最后还是圆满解决了,现把重点记录一下,解决问题的关 ...
- 提高UI设计效率的4个技巧
提高UI设计效率的4个技巧 如何提高UI设计的速度?在这里分享一些我观察到的常见问题和改善方式.当然,需要注意的地方何其多. 身为设计师的你,应该要了解工程实作的基本原理: 业界 NG 率:接近 10 ...
- Linux编辑器篇-分享10个最好的Markdown编辑器
在这篇文章中,兄弟连Linux培训会分享一些可以在 Linux 上安装使用的最好的 Markdown 编辑器.虽然你在 Linux 平台上能找到非常多的 的 Markdown 编辑器,但是在这里我们将 ...