1.旋转

.center>.bj>.div1>ul>li>.img1:hover {transform: rotate(-360deg);transition: 1s}/*旋转*/
.center>.bj>.div1>ul>li>.img2:hover {transform: rotateY(360deg);transition: 1.5s}/*Y轴旋转*/
.center>.bj>.div1>ul>li>.img3:hover {transform: rotate(360deg);transition: 1s}

2.缩放

.center>.bj>.div2>.d2>ul>li>div{width:260px;height:180px;overflow: hidden}/*图片父元素设置溢出隐藏*/
.center>.bj>.div2>.d2>ul>li>div>img{width:260px;transition: 1s;}/*设置图片过渡时间*/
.center>.bj>.div2>.d2>ul>li>div:hover img{transform:scale(1.2,1.2);}
/*点击缩放,此处是放大1.2倍,移开鼠标恢复原状*/

3.遮罩层覆盖图片

.foot>.bj>.d2>ul>.li2{position: absolute;left:310px;top:;transition: 3s;}/*子级定位绝对+过渡时间*/
.foot>.bj>.d2>ul>.li4{position: absolute;left:950px;top:;transition: 3s;} .foot>.bj>.d2>ul>.li1:hover +.li2{left:20px;background: papayawhip;opacity: 0.6}/*鼠标划过li1,li2的变化*/
.foot>.bj>.d2>ul>.li3:hover +.li4{left:660px;background: papayawhip;opacity: 0.6}

4.遮罩层隐藏在img上方

<li><img src="data:images/center/index-01.jpg"/>
<div><img src="data:images/center/zoom.png"/></div>
</li>
.foot>.bj>.d2>.u1>li{float: left;list-style: none;margin-left: 30px;width:260px;height:260px;
position: relative;overflow: hidden}/*溢出隐藏、父级相对定位*/
.foot>.bj>.d2>.u1>li>img{width:260px;height:260px;}
.foot>.bj>.d2>.u1>li>div{width:260px;height:260px;background: cyan;opacity: 0.3;
position: absolute;left:;top:-260px;transition: 0.5s;}/*子级绝对定位、透明度*/
.foot>.bj>.d2>.u1>li>div>img{margin-top: 120px;margin-left: 115px;}
.foot>.bj>.d2>.u1>li:hover div{top:;}/*top值为0.直接定位下来*/

5.遮罩层上下效果

    <div id="tu">
<div class="div1">SCENERY</div>
<img src="data:images/center/index-08.jpg"/>
<div class="div2">SCENERY</div>
</div>
.foot>.bj>.d2>ul>li>div{width:260px;height:200px;position: relative;overflow: hidden}
.foot>.bj>.d2>ul>li>div>div{width:260px;height:100px;background: cyan;opacity: 0.4;text-align: center
;line-height: 100px;}
.foot>.bj>.d2>ul>li>div>.div1{position: absolute;left:;top:-100px;z-index:;transition: 1s;}
.foot>.bj>.d2>ul>li>div>.div2{position: absolute;left:;top:200px;z-index:;transition: 1s;}
.foot>.bj>.d2>ul>li>div:hover .div1{top:;}
.foot>.bj>.d2>ul>li>div:hover .div2{top:100px;}

css一些基础效果的更多相关文章

  1. 利用target的特性,可以实现纯css的tab效果切换

    基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...

  2. 2天驾驭DIV+CSS (基础篇)(转)

    这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” 将你引入两大误区 ...

  3. 【笔记-前端】div+css排版基础,以及错误记录

    现在的网站对于前端的排版已经逐渐不使用<table>,而是使用div+css. 使用这种方法的最大好处就在于在维护页面时,可以只维护css而不去改动html. 可是这种方式对于初学者来说可 ...

  4. CSS样式基础知识

    CSS样式基础知识 CSS样式概述 CSS是Cascading Style Sheet 的缩写.译作“层叠样式表单”.是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言. 引用位 ...

  5. 学起来 —— CSS 入门基础

    Hello,大家好! 小女来更博啦!CSS福利送上~~~ 首先给大家介绍一下CSS到底是什么? 一.CSS概念 W3C规范中,要求有三条:一 为"两个分离",二 为语言遵循语义化, ...

  6. 第二部分----CSS的基础语法

    PART-1 CSS的基础常识 一.什么是CSS? W3C标准中,倡导有3:其一为内容与表现分离,其二为内容与行为分离,其三为内容结构的语义化.其倡导中第一条的"表现"指的便可以说 ...

  7. CSS 入门基础

    一.CSS 介绍什么是CSS CSS 指的是层叠样式表(Cascading StyleSheet).在网页制作时采用层叠样式表技术, 可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控 ...

  8. React 系列教程 1:实现 Animate.css 官网效果

    前言 这是 React 系列教程的第一篇,我们将用 React 实现 Animate.css 官网的效果.对于 Animate.css 官网效果是一个非常简单的例子,原代码使用 jQuery 编写,就 ...

  9. 前端工程师面试问题归纳(一、问答类html/css/js基础)

    一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...

随机推荐

  1. 学习 vue 源码 -- 响应式原理

    概述 由于刚开始学习 vue 源码,而且水平有限,有理解或表述的不对的地方,还请不吝指教. vue 主要通过 Watcher.Dep 和 Observer 三个类来实现响应式视图.另外还有一个 sch ...

  2. inetd.conf文件中的字段

  3. 小程序开发 从简单的 crud 开始

    关键字:“小程序 API” [WXML 完成布局] <view> == <div> {{}}  == <%= %> ejs | jsp2 <block wx: ...

  4. Task Asnyc 异常问题

    /// <summary> /// async 异常捕获问题 /// </summary> /// <param name="context"> ...

  5. 缓存dom查询

    为了提高性能缓存dom查询; 页面效果:

  6. UE4 编译笔记

    UE4 的功能被分成了很多的模块,在API文档里每个类都有 Module 这个属性(值为模块名)每个模块使用其他模块要在Build.cs里导入,像vs里的引入库.在构建时 PublicDependen ...

  7. ubuntu14.04 Samba服务无法访问 网络名不再可用的问题

    参考链接 : https://blog.csdn.net/liuyixjtu/article/details/54575514

  8. 在github上创建自己的项目

    使用过很多次github 但一直是把别人的项目clone下来,并没有自己创建过项目.所以记录一下~ 首先,创建一个仓库 填写工程名之后就创建好啦 然后clone代码到本地 就和正常的使用完全一样啦 ~ ...

  9. rpmlib(PayloadIsLzma) <= 4.4.6-1 is needed【转载】

    以下为转载,但是有改动,原作者在一处写错了,将高写成了低,直接差之毫厘,谬之千里. 环境: centos el5 背景: 由于个人比较喜欢用软件的最新版本,在重新安装服务器上的 xdg-open(还有 ...

  10. Spring如何支持可扩展

    Spring是一款优秀的开发框架,包括了非常多的基础组件 那么它是如何做到灵活可扩展呢? 1 .框架初始化 2.Bean初始化 ref https://mp.weixin.qq.com/s/QuSls ...