位置: IT常识 - 正文

CSS-200个小案例(一)(完整的css代码案例)

编辑:rootadmin
CSS-200个小案例(一)

推荐整理分享CSS-200个小案例(一)(完整的css代码案例),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:css实战案例,css实例教程,html+css案例,css 案例,css经典案例,html+css案例,css 案例,css经典案例,内容如对您有帮助,希望把文章链接给更多的朋友!

   最近我在youtube上跟着大神学习200个CSS小案例,作者Online Tutorials 编码的内容很实用,案例中涉及定位、变换、动画等概念,适合进一步学习和巩固CSS知识,能帮助我们实现页面的特效。

  youtube视频链接:https://www.youtube.com/watch?v=TawH-AqHTXc&list=PL5e68lK9hEzdYG6YQZCHtM9gon_cDNQMh&ab_channel=OnlineTutorials

 

目录

1.Simple Parallax Scrolling Effect(简单的视差滚动效果)

2.Fullscreen Video Background(全屏视频背景)

3.Transform Effects on Scroll(滚动时产生的变换效果)

4.Fullscreen Overlay Responsive Navigation Menu(全屏覆盖响应式导航菜单)

5.Creative Check List(有创意性的清单)

6.Moving Car Using CSS Animation Effects(用CSS动画实现小车移动)

7.Awesowe Social Media Button Hover Animation(了不起的社交媒体按钮悬停动画)

8.Align Text Center Vertical and Horizontal(垂直和水平对齐文本中心)

9.Creative DIV Shape(创意性的div形状)

10.how to create css Icon Hover Effect(如何创建css图标悬停效果)


1.Simple Parallax Scrolling Effect(简单的视差滚动效果)CSS-200个小案例(一)(完整的css代码案例)

 

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Moon Light Parallax Effects With CSS</title> <link rel="stylesheet" href="style.css"></head><body> <section> <img src="bg.jpg" id="bg" alt=""> <img src="moon.png" id="moon" alt=""> <img src="mountain.png" id="mountain" alt=""> <img src="road.png" id="road" alt=""> <h2 id="text">Moon Light</h2> </section> <script> let bg=document.getElementById('bg'); let moon=document.getElementById('moon'); let mountain=document.getElementById('mountain'); let road=document.getElementById('road'); let text=document.getElementById('text'); window.addEventListener('scroll',function(){ var value=window.scrollY; bg.style.top=-value*0.5+'px'; moon.style.left=-value*0.5+'px'; mountain.style.top=-value*0.15+'px'; road.style.top=value*0.15+'px'; text.style.top=value*1+'px'; }) </script></body></html>*{ margin: 0; padding: 0; font-family: 'Poppins',sans-serif;}body{ background: #0a2a43; min-height: 1500px;/*设置元素的最小高度*/}section{ /* 相对定位 */ position: relative; width: 100%; height: 100vh;/*vh 视口的初始包含块的高度的 1%*/ overflow: hidden; /* 弹性布局,它能够扩展和收缩 flex 容器内的元素,以最大限度地填充可用空间 */ display: flex; /* 居中对齐 */ /* 横向 */ justify-content: center; /* 纵向 */ align-items: center;}section:before{ content: ''; position: absolute; /* 相对于section进行定位 */ bottom: 0; width: 100%; height: 100px; background: linear-gradient(to top,#0a2a43,transparent); z-index: 10000;}section:after{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background:#0a2a43; /* 因为这里设置了在最高层显示 */ z-index: 10000; /* mix-blend-mode CSS 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。 */ mix-blend-mode: color;}section img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;; /* object-fit CSS 属性指定可替换元素(例如:<img> 或 <video>)的内容应该如何适应到其使用高度和宽度确定的框。 */ object-fit: cover; /* pointer-events CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target (en-US)。 */ pointer-events: none;}#text{ position: relative; color: #fff; font-size: 10em;}#road{ z-index: 2;}2.Fullscreen Video Background(全屏视频背景)

 

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Fullscreen Video Background</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="banner"> <video autoplay muted loop> <source src="Mountains.mp4" type="video/mp4" /> </video> <div class="content"> <h1>Fullscreen Video banner</h1> <p> To accompany his instructions for depicting twilight, Latrobe drew a lone Conestoga wagon—named for the Pennsylvania town just southeast of Columbia where the vehicles were thought to have been built—traveling west at dusk along the southern branch of the Juniata River, today known as the Raystown Branch. </p> </div> </div> </body></html>body{ margin: 0; padding: 0; font-family: 'Poppins', sans-serif; height: 1000px;}.banner{ width: 100%; height: 100vh; overflow: hidden; display: flex; justify-content: center; align-items: center;}.banner video{ /* 让它脱离文档流 */ position: absolute; top: 0; left: 0; object-fit: cover; width: 100%; height: 100%; pointer-events: none;}.banner .content{ position: relative; z-index: 1; max-width: 1000px; text-align: center;}.banner .content h1{ margin: 0; padding: 0; font-size: 4em; text-transform: uppercase; color: #fff;}.banner .content p{ font-size: 1.5em; color: #fff;}3.Transform Effects on Scroll(滚动时产生的变换效果)

 

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Page Scroll Effects</title> <link rel="stylesheet" href="style.css"></head><body> <section> <span class="curve"> <img src="curve.png" alt=""> </span> </section> <script> var scroll=document.querySelector('.curve'); window.addEventListener('scroll',function(){ // 宽度不变,高度缩短 var value=1+window.scrollY/-500; scroll.style.transform=`scaleY(${value})` }) </script></body></html>*{ margin:0; padding: 0;}body{ height: 200vh; background: #111;}section{ position: absolute; width: 100%; height: calc(100% - 200px); background: #2abbff;}section .curve{ position: absolute; bottom: -200px; height: 200px; width: 100%; /* transform-origin CSS 属性让你更改一个元素变形的原点。 */ transform-origin: top;}section .curve img{ width: 100%; height: 100%;}4.Fullscreen Overlay Responsive Navigation Menu(全屏覆盖响应式导航菜单)

 

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Fullscreen Menu</title> <link rel="stylesheet" href="style.css" /> </head> <body> <div id="toggleIcon" onclick="menuToggle()"></div> <div id="menu-overlay"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Our Team</a></li> <li><a href="#">Contact</a></li> </ul> </div> <script> function menuToggle(){ var nav=document.getElementById('menu-overlay'); nav.classList.toggle('active'); var toggleIcon=document.getElementById('toggleIcon'); toggleIcon.classList.toggle('active'); } </script> </body></html>*{ margin: 0; padding: 0; font-family: 'Poppins' sans-serif;}#menu-overlay{ /* 整页的效果 */ position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #f00; /* 包含的项居中显示 */ display: flex; justify-content: center; align-items: center; overflow-y: auto; /* 初始状态缩小为0.1 */ transform: scale(0.1); transition: 0.5s;}#menu-overlay.active{ transform: scale(1);}#menu-overlay ul{ position: relative;}#menu-overlay ul li{ position: relative; list-style: none; text-align: center; display: block;}#menu-overlay ul li a{ position: relative; text-decoration: none; font-size:3.5em; padding: 0 10px; color: #fff; font-weight: 700; text-transform: uppercase; display: inline-block;}/* 黄线 */#menu-overlay ul li a:before{ content: ''; position: absolute; /* 相对于a定位 */ top: 50%; left: 0; width: 100%; height: 8px; background: #ff0; transform: scaleX(0); transform-origin: right; transition: 0.5s transform;}#menu-overlay ul li a:hover:before{ transform: scaleX(1); transform-origin: left; transition: 0.5s transform;}#toggleIcon{ position: fixed; top: 20px; right: 20px; width: 50px; height: 50px; background: #ff0 url(open.png); z-index: 1; cursor: pointer;}#toggleIcon.active{ background: #ff0 url(close.png);}5.Creative Check List(有创意性的清单)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Creative Item Check List</title> <link rel="stylesheet" href="style.css"></head><body> <div class="list"> <h2>CSS Only Item Check List</h2> <label> <input type="checkbox" name=""> <i></i> <span>with the increasing development of society</span> </label> <label> <input type="checkbox" name=""> <i></i> <span>therefore,the ability to study CSS is important</span> </label> <label> <input type="checkbox" name=""> <i></i> <span>the followings are reasons and concrete evidence</span> </label> <label> <input type="checkbox" name=""> <i></i> <span>in the first place</span> </label> <label> <input type="checkbox" name=""> <i></i> <span>moreover</span> </label> <label> <input type="checkbox" name=""> <i></i> <span>last but not least</span> </label> </div></body></html>* { margin: 0; padding: 0; font-family: consolas; box-sizing: border-box;}body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #001925;}.list { padding: 30px 75px 10px 30px; position: relative; background: #042b3e; border-top: 50px solid #03a9f4;}.list h2 { color: #fff; font-size: 30px; padding: 10px 0; margin-left: 10px; display: inline-block; border-bottom: 4px solid #fff;}.list label { position: relative; display: block; margin: 40px 0; color: #fff; font-size: 24px; cursor: pointer;}.list input[type="checkbox"] { -webkit-appearance: none;}.list i { position: absolute; top: 0; display: inline-block; width: 25px; height: 25px; border: 2px solid #fff;}.list input[type="checkbox"]:checked ~ i { /* 用边框变换成对勾 */ top: 1; border-top: none; border-right: none; height: 15px; width: 25px; transform: rotate(-45deg);}.list span{ position: relative; left: 40px; transition: 0.5s;}.list span:before{ content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: #fff; transform: translateY(-50%) scaleX(0); transform-origin: right; transition: 0.5s transform;}.list input[type="checkbox"]:checked~span:before{ transform: translateY(-50%) scaleX(1); transform-origin: left; transition: 0.5s transform;}.list input[type="checkbox"]:checked~span{ color: #154e6b;}6.Moving Car Using CSS Animation Effects(用CSS动画实现小车移动)

 

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Css Moving Background Animation</title> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="bg"> <img src="car.png" alt=""> </div> </body></html>body { margin: 0; padding: 0;}.bg { position: relative; background: url(background.png); height: 100vh; background-size: cover; /* background-position CSS 属性为每一个背景图片设置初始位置。这个位置是相对于由 background-origin 定义的位置图层的。 */ background-position: 0 0; background-repeat: repeat-x; animation: animate 5s linear infinite;}.bg img{ position: absolute; bottom: 8px; left: 100px;}@keyframes animate { from { background-position: 0 0; } to { background-position: 100% 0; }}7.Awesowe Social Media Button Hover Animation(了不起的社交媒体按钮悬停动画)

 

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Social Media Button Hover Effects</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="style.css" /> </head> <body> <ul> <li> <a href="#"><i class="fa-brands fa-facebook-f"></i>Facebook</a> </li> <li> <a href="#"><i class="fa-brands fa-twitter"></i> Twitter</a> </li> <li> <a href="#"><i class="fa-brands fa-google"></i>Google++</a> </li> <li> <a href="#"><i class="fa-brands fa-linkedin"></i>Linkedin</a> </li> <li> <a href="#"><i class="fa-brands fa-instagram"></i>Instagram</a> </li> </ul> </body></html>body{ margin: 0; padding: 0; background: #262626;}ul{ position: absolute; top: 50%; left: 50%; /* CSS 属性 translate 允许你单独
本文链接地址:https://www.jiuchutong.com/zhishi/296096.html 转载请保留说明!

上一篇:JavaScript数组every方法(JavaScript数组长度)

下一篇:Yolov5算法解读(yolov1算法)

  • 网站推广方法系列之网站内容(网站推广的几种方法)

    网站推广方法系列之网站内容(网站推广的几种方法)

  • 关于教师节的感恩的话(关于教师节的感谢语)(关于教师节的感恩词)

    关于教师节的感恩的话(关于教师节的感谢语)(关于教师节的感恩词)

  • 小天才怎么退出长续航模式(小天才退出睡眠模式)

    小天才怎么退出长续航模式(小天才退出睡眠模式)

  • 微信如何恢复删除的聊天记录(微信如何恢复删除的账单)

    微信如何恢复删除的聊天记录(微信如何恢复删除的账单)

  • 苹果xrnfc感应区在哪个位置(xr nfc感应区)

    苹果xrnfc感应区在哪个位置(xr nfc感应区)

  • iPhone11pro运行内存是多大(iphone11pro运行内存到底多少)

    iPhone11pro运行内存是多大(iphone11pro运行内存到底多少)

  • 苹果13.4.1加了什么功能(苹果升级13.4)

    苹果13.4.1加了什么功能(苹果升级13.4)

  • 美区id能否绑定支付宝付款(美区id能否绑定微信)

    美区id能否绑定支付宝付款(美区id能否绑定微信)

  • 小米八多少瓦快充(小米8参数多少w快充)

    小米八多少瓦快充(小米8参数多少w快充)

  • 苹果序列号泄漏后果(苹果序列号泄漏会不会被监控)

    苹果序列号泄漏后果(苹果序列号泄漏会不会被监控)

  • x和xs屏幕区别(x和xs屏幕哪个好)

    x和xs屏幕区别(x和xs屏幕哪个好)

  • 自动息屏是什么意思

    自动息屏是什么意思

  • iphone11悬浮球设置(苹果11悬浮小球)

    iphone11悬浮球设置(苹果11悬浮小球)

  • 软件卸载不了怎么办(软件卸载不了怎么强制卸载华为)

    软件卸载不了怎么办(软件卸载不了怎么强制卸载华为)

  • 华为mate30pro有杜比音效吗(mate30pro的)

    华为mate30pro有杜比音效吗(mate30pro的)

  • ios12怎么隐藏单个应用(ios12怎么隐藏单个应用软件)

    ios12怎么隐藏单个应用(ios12怎么隐藏单个应用软件)

  • win10底部任务栏无响应(win10底部任务栏透明)

    win10底部任务栏无响应(win10底部任务栏透明)

  • 苹果手机日历不显示事件(苹果手机日历不显示母亲节)

    苹果手机日历不显示事件(苹果手机日历不显示母亲节)

  • wps怎么画表格(wps怎么画表格斜线)

    wps怎么画表格(wps怎么画表格斜线)

  • qq自动回复在哪(QQ自动回复在哪里取消)

    qq自动回复在哪(QQ自动回复在哪里取消)

  • 抖音黑名单上的人能看见我作品吗(抖音黑名单上的人能看见我直播吗)

    抖音黑名单上的人能看见我作品吗(抖音黑名单上的人能看见我直播吗)

  • 苹果11pro max颜色有哪些(苹果11pro max颜色价格一样吗)

    苹果11pro max颜色有哪些(苹果11pro max颜色价格一样吗)

  • iqoo和iqoopro的差别(vivoiqoo跟iqoopro有啥区别)

    iqoo和iqoopro的差别(vivoiqoo跟iqoopro有啥区别)

  • qq骰子怎么能摇到6(qq咋摇骰子)

    qq骰子怎么能摇到6(qq咋摇骰子)

  • 长照片怎么做(长照片怎么做滚动)

    长照片怎么做(长照片怎么做滚动)

  • iphone应用图标变暗(苹果手机上app图标突然变了样子)

    iphone应用图标变暗(苹果手机上app图标突然变了样子)

  • 实况照片怎么发朋友圈(实况照片怎么发给别人)

    实况照片怎么发朋友圈(实况照片怎么发给别人)

  • 离职员工奖金发放规定
  • 申请退还增量留抵税额的条件包括
  • 销项税额的计算方法
  • 开发票需要填银行吗
  • 小规模首次申请发票张数
  • 测试费用
  • 个体工商户个人所得税怎么申报
  • 政府补助具有无偿性的特征
  • 分期收款销售会计分录(现销)
  • 公司现金支票取现用途怎么填写
  • 股东借款转实收资本需要什么附件
  • 赠送电影票的说辞
  • 其他服务费包括哪些内容
  • 主营业务收入和产值
  • 失控发票不处理的后果
  • 网上申请的增值税专用纸质发票收到后如何确认已收到
  • 支票收款
  • 其他应收款无法收回的会计分录
  • 挂靠的工程个人所得税怎么交?
  • 计提增值税的账务处理小规模
  • 当月作废的发票是否需要报税
  • 增值税留抵退税账务处理
  • 报销差旅费涉及的会计科目
  • 当月费用下月付款怎么做账
  • 加班餐费税前扣除问题
  • 税控盘抵减
  • 用产品抵债的合同怎么写
  • 强化税收风险意识
  • h5适配iphonex
  • 企业注销清算需要交什么税
  • 未交土地出让金的处罚
  • 使用电子计算机生成的会计凭证
  • 物业公司购买空调合法吗
  • win10系统的安装
  • 即征即退增值税怎么申报
  • 非盈利组织固定资产没入帐 怎么调账
  • struts2漏洞检测工具下载
  • vue实现动态菜单权限配置
  • SM1、SM2、SM3、SM4、同态加密、密态计算、隐私计算和安全多方计算的概念
  • 安装libtool
  • 租房发票怎么缴税
  • 进项发票数据导出
  • 增值税专用发票有几联?
  • 现金银行本票的签发人是谁
  • kibana 教程
  • js与或运算符
  • 工资是负数怎么办
  • 哪些情况不能开专用发票
  • SqlServer2012中First_Value函数简单分析
  • 年金保险是指什么保险
  • 在建工程转入
  • 季度缴纳企业所得税可以弥补亏损吗
  • 营业成本怎么理解
  • 汽车销售行业印章要求
  • 货款客户给的电话怎么查
  • 现金形式福利费个税软件怎么申报个税
  • 红冲去年的成本怎么做账
  • 工会活动购买的产品
  • 小规模纳税人的增值税计入成本吗
  • 公司拿房子抵债需要缴纳什么税费
  • mysql macbook安装教程
  • 新移动硬盘安装视频教程
  • 如何使用组策略脚本
  • xp系统1
  • openssl 用法
  • win8电脑设置在哪
  • jquery弹出框样式大全
  • unity发布exe
  • jquery实现密码和确认密码
  • cocos2dx 2.2.2
  • Bullet(Cocos2dx)之增加调试绘制PhysicsDraw3D
  • node.js最新版
  • shell delete
  • nodejs gyp
  • python 获取网页上文件地址
  • jquery 图片插件
  • 详解Bootstrap四种图片样式
  • android documents
  • python不同进制的整数之间可以直接运算
  • 关税是什么
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设