div常用效果方法-transform

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div:first-of-type{
width: 200px;
height: 200px;
background: #006400;
/*使 div 元素看上去像一个按钮：*/
appearance: button;

/*background-attachemnt: 背景定位*/
/*取值: scroll | fixed | inherit
scroll: 随着页面的滚动轴背景图片将移动
fixed: 随着页面的滚动轴背景图片不会移动
inherit: 继承*/
background-attachment: scroll;

border: 10px black dashed;

/*背景填充方法*/
background-clip: padding-box;

/*阴影方法*/
/*内阴影 inset*/
box-shadow: 10px 10px 10px black inset;

text-shadow: 10px 10px 10px red;

/*偏移方法*/
/*旋转方法*/
transform: rotate(30deg);
/*移动位置左右上下*/
transform: translate(100px,100px);
/*规模效果*/
transform: scale(2);
/*变形效果*/
transform:skew(20deg);

/*变化持续时间*/
transition: 5s;
}
div{
width: 200px;
height: 200px;
background: linear-gradient(#f4f4f4,#000000);
transition: 5s;

/*行类块标签*/
display: inline-block;
}

div:hover{
transform: rotateX(45deg) translate(100px,100px) scale(2) skew(45deg);
}
</style>
</head>
<body>
<div>道可道，非常道</div>
<div>道可道，非常道</div>
<div>道可道，非常道</div>
</body>
</html>

转载于:https://www.cnblogs.com/victory-jc-notes/p/8093291.html

div常用效果方法-transform相关推荐

iOS开发中常用的方法
iOS开发中常用的方法系统弹窗: 过期方法: UIAlertView *alertView = [[UIAlertView alloc]initWithTitle:@"确认报价" ...
html怎么设置随鼠标移动,CSS_css实现随鼠标移动div渐变色效果，HTML 复制代码代码如下:div - phpStudy...
css实现随鼠标移动div渐变色效果 HTML 复制代码代码如下: CSS 复制代码代码如下: body{ background:#ecf0f1; } .art{ width:400px; margi ...
ETL流程概述及常用实现方法
ETL是英文Extract-Transform-Load 的缩写,用来描述将数据从来源端经过抽取(extract).转换(transform).加载(load)至目的端的过程.常见于数据仓库开发中将数 ...
php div中的字上下居中,Div垂直居中效果怎么实现
本篇文章主要给大家介绍实现div垂直方向居中的方法. 网页设计中div各种居中布局,是html/css初学者们最为基础且需要掌握的知识技能.div水平居中效果我们在之前的文章中有为大家介绍过,想必新手 ...
jquery div拖动效果示例代码
jquery div拖动效果示例代码 div拖动效果想必大家都有见到过吧,实现的方法也是有很多的,下面为大家将介绍使用jquery是如何实现的,感兴趣的朋友不要错过复制代码代码如下: <%@ ...
JS常用属性方法大全
JS常用属性方法大全 1.输出语句:document.write(""); 2.JS中的注释为: 3.传统的HTML文档顺序是:document->html->(hea ...
PHP常用工具方法集...
PHP常用工具方法集,更新时间 2018-7-14 <?php /*** 常用工具方法集* Author: zj*//** 工具总述 1.加密解密 2.生成随机字符串 3.获取文件扩展名(后缀 ...
HiveSQL常用优化方法全面总结
转载自 HiveSQL常用优化方法全面总结 Hive作为大数据领域常用的数据仓库组件,在平时设计和查询时要特别注意效率.影响Hive效率的几乎从不是数据量过大,而是数据倾斜.数据冗余.job或I/O ...
html判断坐标,js判断鼠标位置是否在某个div中的方法
本文实例讲述了js判断鼠标位置是否在某个div中的方法.分享给大家供大家参考,具体如下: div的onmouseout事件让div消失时,会出现这样的情况,就是当鼠标移至div中的其它内容时,此时也判 ...

div常用效果方法-transform

div常用效果方法-transform相关推荐

最新文章

热门文章