<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.d1 {
width: 600px
height: 200px
margin: 0 auto
font-size: 50px
/* 设置字体：设置的字体必须在系统里面试存在的，如果没有这个字体，就会默认按照系统字体样式显示。 */
font-family: "微软雅黑"
/* 设置字体的粗细，100-900，默认正常的字体粗细，但是比如说如果你设置900，最粗的字体，但是如果你的系统没有这样粗的字体，依然会按照默认的样式显示。 */
font-weight: normal
/* 字体颜色 */
color: aqua
/* 设置字体排布 ，默认向左, left,center,right*/
text-align: center
/* 文字的行高 */
line-height: 200px
/* 文字阴影
text-shadow:水平偏移距离 垂直的偏移距离 模糊度 阴影的颜色
*/
text-shadow: 10px 5px 5px black
}
.d2 {
width: 600px
height: 200px
margin: 0 auto
font-size: 50px
/* 设置字体：设置的字体必须在系统里面试存在的，如果没有这个字体，就会默认按照系统字体样式显示。 */
font-family: "微软雅黑"
/* 设置字体的粗细，100-900，默认正常的字体粗细，但是比如说如果你设置900，最粗的字体，但是如果你的系统没有这样粗的字体，依然会按照默认的样式显示。 */
font-weight: normal
/* 字体颜色 */
color: #fff
/* 设置字体排布 ，默认向左, left,center,right*/
text-align: center
/* 文字的行高 */
line-height: 200px
/* 文字阴影
text-shadow:水平偏移距离 垂直的偏移距离 模糊度 阴影的颜色
*/
text-shadow: 0px 0px 5px black
}
.d3 {
width: 600px
height: 200px
margin: 0 auto
font-size: 50px
/* 设置字体：设置的字体必须在系统里面试存在的，如果没有这个字体，就会默认按照系统字体样式显示。 */
font-family: "微软雅黑"
/* 设置字体的粗细，100-900，默认正常的字体粗细，但是比如说如果你设置900，最粗的字体，但是如果你的系统没有这样粗的字体，依然会按照默认的样式显示。 */
font-weight: normal
/* 字体颜色 */
color: #fff
/* 设置字体排布 ，默认向左, left,center,right*/
text-align: center
/* 文字的行高 */
line-height: 200px
/* 文字阴影
text-shadow:水平偏移距离 垂直的偏移距离 模糊度 阴影的颜色
*/
text-shadow: 0px 0px 20px yellow, 0px 0px 10px orange, 0px 0px 10px orangered, 0px 0px 5px red
/* 动画 */
animation: donghua 3s infinite alternate
}
@keyframes donghua {
from {
text-shadow: 0px 0px 20px yellow, 0px 0px 10px orange, 0px 0px 10px orangered, 0px 0px 5px red
}
to {
text-shadow: 0px 0px 10px yellow, 0px 0px 5px orange, 0px 0px 5px orangered, 0px 0px 2px red
}
}
.d4 {
width: 600px
height: 200px
margin: 0 auto
font-size: 100px
/* 设置字体：设置的字体必须在系统里面试存在的，如果没有这个字体，就会默认按照系统字体样式显示。 */
font-family: "微软雅黑"
/* 设置字体的粗细，100-900，默认正常的字体粗细，但是比如说如果你设置900，最粗的字体，但是如果你的系统没有这样粗的字体，依然会按照默认的样式显示。 */
font-weight: normal
/* 字体颜色 */
color: #fff
/* 设置字体排布 ，默认向左, left,center,right*/
text-align: center
/* 文字的行高 */
line-height: 200px
/* 文字阴影
text-shadow:水平偏移距离 垂直的偏移距离 模糊度 阴影的颜色
*/
text-shadow: 1px 1px 0px yellow, 2px 2px 0px yellow, 3px 3px 0px orange, 4px 4px 0px orange, 5px 5px 0px orange, 6px 6px 0px orangered, 7px 7px 0px red, 8px 8px 0px red
}
</style>
</head>
<body>
<div class="d1">
helloworld
</div>
<div class="d2">
helloworld
</div>
<div class="d3">
helloworld
</div>
<div class="d4">
helloworld
</div>
</body>
</html>
语法 transition: property duration timing-function delay
transition-property 规定设置过渡效果的 CSS 属性的名称。
transition-duration 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。
transition-delay 定义过渡效果何时开始。
注释：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果
示例如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#d1 {
width: 100px
height: 100px
background: skyblue
/* 过渡效果,综合性过渡效果设置 */
/* transition: width 2s*/
/* 设置具有过渡效果的属性
可以设置多个值：width,background
也可以一次性设置所有都需要过渡 all
*/
ç-property: all
/* 过渡的时间长度 */
transition-duration: 2s
/* 整个过渡动画变化的速度
ease:（默认值），从慢到快在慢下来
linear:设置线性速度
ease-in:从慢到快的变化过程
ease-out:从快到慢的过程
可以通过浏览器进行调节获取贝塞尔曲线
cubic-bezier(0, 0.95, 1, 0.07)
*/
transition-timing-function: ease
/* 设置延迟时间 */
/* transition-delay: 3s*/
}
#d1:hover {
width: 800px
height: 100px
background: orange
}
</style>
</head>
<body>
<div id="d1">
</div>
</body>
</html>
例子2:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.d1 {
width: 300px
height: 400px
margin: 20px auto
background: skyblue
box-shadow: 0 0 0px #ccc
transition: all 0.5s ease
}
.d1:hover {
box-shadow: 0px 5px 10px #999
}
</style>
</head>
<body>
<div class="d1">
</div>
</body>
</html>
要在CSS中实现上下门的移动效果，你可以使用CSS的transform属性来设置门的位移效果。以下是一个简单的例子，假设你有一个类名为door的HTML元素，希望实现上下移动效果：
Copy code.door { transform: translateY(-100px) transition: transform 1s
}.door.open { transform: translateY(0)
}
在上面的CSS代码中，我们使用了transform属性的translateY方法来实现垂直移动，并使用了transition属性来设置动画过渡效果。我们还定义了一个类名为open的状态，在这个状态下，门的位置会发生改变，从而实现上下移动的效果。
要在HTML代码中触发这个状态，你可以使用JavaScript来添加或删除open类名：
Copy codedocument.querySelector('.door').classList.add('open')document.querySelector('.door').classList.remove('open')
希望这些信息能帮助你实现所需的上下门移动效果。
1、animation 属性是一个简写属性，用于设置动画属性：
animation-name：规定 @keyframes 动画的名称。
animation-duration：规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function：规定动画的速度曲线。默认是 "ease"。
animation-delay：规定动画何时开始。默认是 0
animation-iteration-count：规定动画被播放的次数。默认是 1。
animation-direction：规定动画是否在下一周期逆向地播放。默认是 "normal"。
animation-fill-mode：规定对象动画时间之外的状态
2、 transition 属性
语法：transition: property duration timing-function delay 默认值 all 0 ease 0
transition-property 指定CSS属性的name，transition效果
其主要有以下几个值：none(没有属性改变)；all（所有属性改变）这个也是其默认值；indent（元素属性名）。
transition-duration transition效果需要指定多少秒或毫秒才能完成
transition-timing-function 指定transition效果的转速曲线
transition-timing-function的值允许你根据时间的推进去改变属性值的变换速率，transition-timing-function有6个可能值：
1、ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
6、cubic-bezier：（该值允许你去自定义一个时间曲线）， 特定的 cubic-bezier曲线 。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。
其是cubic-bezier为通过贝赛尔曲线来计算“转换”过程中的属性值，如下曲线所示，通过改变P1(x1, y1)和P2(x2, y2)的坐标可以改变整个过程的Output Percentage。初始默认值为default.
transition-delay 定义transition效果开始的时候
首先img外层结构上有盒子包裹
鼠标滑过的时候：hover
img {
transform: scale(1.1, 1.1)放大
}
本身img盒子上加过度效果transition: all 0.5s
img的父级盒子加 overflow: hidden
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）