css一些基础效果
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一些基础效果的更多相关文章
- 利用target的特性,可以实现纯css的tab效果切换
基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...
- 2天驾驭DIV+CSS (基础篇)(转)
这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” 将你引入两大误区 ...
- 【笔记-前端】div+css排版基础,以及错误记录
现在的网站对于前端的排版已经逐渐不使用<table>,而是使用div+css. 使用这种方法的最大好处就在于在维护页面时,可以只维护css而不去改动html. 可是这种方式对于初学者来说可 ...
- CSS样式基础知识
CSS样式基础知识 CSS样式概述 CSS是Cascading Style Sheet 的缩写.译作“层叠样式表单”.是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言. 引用位 ...
- 学起来 —— CSS 入门基础
Hello,大家好! 小女来更博啦!CSS福利送上~~~ 首先给大家介绍一下CSS到底是什么? 一.CSS概念 W3C规范中,要求有三条:一 为"两个分离",二 为语言遵循语义化, ...
- 第二部分----CSS的基础语法
PART-1 CSS的基础常识 一.什么是CSS? W3C标准中,倡导有3:其一为内容与表现分离,其二为内容与行为分离,其三为内容结构的语义化.其倡导中第一条的"表现"指的便可以说 ...
- CSS 入门基础
一.CSS 介绍什么是CSS CSS 指的是层叠样式表(Cascading StyleSheet).在网页制作时采用层叠样式表技术, 可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控 ...
- React 系列教程 1:实现 Animate.css 官网效果
前言 这是 React 系列教程的第一篇,我们将用 React 实现 Animate.css 官网的效果.对于 Animate.css 官网效果是一个非常简单的例子,原代码使用 jQuery 编写,就 ...
- 前端工程师面试问题归纳(一、问答类html/css/js基础)
一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...
随机推荐
- Groovy 设计模式 -- Strategy 模式
策略模式 https://en.wikipedia.org/wiki/Strategy_pattern In computer programming, the strategy pattern (a ...
- UE4 二维相关
SceneCapture2D (类似相机组件)可将视口内的图像转化为平面二维纹理资源渲染到 RenderTargetRenderTarget 可以被 Material直接使用例:做小地图SceneC ...
- mysql每组前N条
SELECT * from ( select end rownum, else @prov:=t.province end prov, t.* from ( money UNION all money ...
- webpack 配置全局 jQuery 对象
将 lodash 添加到当前模块的上下文中 import _ from 'lodash' 但是你想每个模块都引入的话就特别麻烦,这里有插件可以帮助到您,只需在 webpack.config.js 中配 ...
- redis-deskmanager 连不上 虚拟机 - centos redis
1.没设置redis密码 : https://blog.csdn.net/HUXU981598436/article/details/54668779 2.关闭防火墙
- Maven配置 和创建一个Maven项目
Maven的好处: maven的两大核心: **依赖管理:对jar包管理过程 **项目构建:项目在编码完成后,对项目进行编译.测试.打包.部署等一系列的操作都通过命令来实现 maven项目的生命周期( ...
- 《一头扎进SpringMvc视频教程》
第二章 SpringMvc控制器 第三章 Rest风格的资源URL 第四章 SpringMvc上传文件
- Ajax 及里面的XStream《黑马程序员_超全面的JavaWeb视频教程vedio》
1. ajax是什么? * asynchronous javascript and xml:异步的js和xml * 它能使用js访问服务器,而且是异步访问! * 服务器给客户端的响应一般是整个页面,一 ...
- cartographer 安装
Debian 8 Jessie 一顿操作梦如虎,最后不知道咋装上的. 参考:https://www.jianshu.com/p/9922a51ce38f https://blog.csdn.net/p ...
- [sklearn] 官方例程-Imputing missing values before building an estimator 随机填充缺失值
官方链接:http://scikit-learn.org/dev/auto_examples/plot_missing_values.html#sphx-glr-auto-examples-plot- ...