css视差滑动(阅读网站案例)

最新推荐文章于 2022-08-19 16:50:09 发布

名字长就叫小林好了

最新推荐文章于 2022-08-19 16:50:09 发布

阅读量696

点赞数 2

文章标签： css html5

本文链接：https://blog.csdn.net/w_xiaolin/article/details/104200829

版权

今天我们来讲讲上面是视觉差的滑动吧先看一下效果图,他是通过3d空间让移动速度不一样导致的，其实这里视差效果没有那么强。但是你和下面作对比效果就强了；

在这里插入图片描述

一、准备代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
    
    margin:0;
    padding:0;
}
body{
    
    height: 100vh;
    width: 100%;
    background-color:cadetblue;

}
div:first-of-type{
    
    position:relative;
    width: 100%;
    height: 100vh;
    background: url(banner.jpg) no-repeat left top / cover;
}
div:first-of-type::after{
    
    content:"视差滑动";
    display:block;
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    color: white;
    padding:35px 10px;
    background: rgba(0,0,0,0.9);
    font-size: 3em;
    letter-spacing: 10px;
    
}
div:last-of-type{

最低0.47元/天解锁文章

名字长就叫小林好了

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
css视差滑动(阅读网站案例)

今天我们来讲讲上面是视觉差的滑动吧先看一下效果图,他是通过3d空间让移动速度不一样导致的，其实这里视差效果没有那么强。但是你和下面作对比效果就强了；一、准备代码<!DOCTYPE html><html lang="zh-CN"><head><title></title><meta charset="UTF-8">...
复制链接

扫一扫