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. Groovy 设计模式 -- Strategy 模式

    策略模式 https://en.wikipedia.org/wiki/Strategy_pattern In computer programming, the strategy pattern (a ...

  2. UE4 二维相关

    SceneCapture2D  (类似相机组件)可将视口内的图像转化为平面二维纹理资源渲染到 RenderTargetRenderTarget 可以被 Material直接使用例:做小地图SceneC ...

  3. mysql每组前N条

    SELECT * from ( select end rownum, else @prov:=t.province end prov, t.* from ( money UNION all money ...

  4. webpack 配置全局 jQuery 对象

    将 lodash 添加到当前模块的上下文中 import _ from 'lodash' 但是你想每个模块都引入的话就特别麻烦,这里有插件可以帮助到您,只需在 webpack.config.js 中配 ...

  5. redis-deskmanager 连不上 虚拟机 - centos redis

    1.没设置redis密码 : https://blog.csdn.net/HUXU981598436/article/details/54668779 2.关闭防火墙

  6. Maven配置 和创建一个Maven项目

    Maven的好处: maven的两大核心: **依赖管理:对jar包管理过程 **项目构建:项目在编码完成后,对项目进行编译.测试.打包.部署等一系列的操作都通过命令来实现 maven项目的生命周期( ...

  7. 《一头扎进SpringMvc视频教程》

    第二章 SpringMvc控制器 第三章 Rest风格的资源URL 第四章 SpringMvc上传文件

  8. Ajax 及里面的XStream《黑马程序员_超全面的JavaWeb视频教程vedio》

    1. ajax是什么? * asynchronous javascript and xml:异步的js和xml * 它能使用js访问服务器,而且是异步访问! * 服务器给客户端的响应一般是整个页面,一 ...

  9. cartographer 安装

    Debian 8 Jessie 一顿操作梦如虎,最后不知道咋装上的. 参考:https://www.jianshu.com/p/9922a51ce38f https://blog.csdn.net/p ...

  10. [sklearn] 官方例程-Imputing missing values before building an estimator 随机填充缺失值

    官方链接:http://scikit-learn.org/dev/auto_examples/plot_missing_values.html#sphx-glr-auto-examples-plot- ...