div常用效果方法-transform

最新推荐文章于 2024-06-26 16:28:20 发布

转载最新推荐文章于 2024-06-26 16:28:20 发布 · 792 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/victory-jc-notes/p/8093291.html

本文通过实例演示了如何使用CSS来定义网页元素的样式及实现动画效果，包括按钮外观设置、渐变背景、过渡动画等，并展示了:hover伪类在交互式动画中的应用。

<!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