位置: 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算法)

  • 运输发票税率6%和3%区别在哪
  • 企业当期应纳增值税
  • 电子税务局的购票方怎么删除
  • 税务人员岗位有哪些
  • 公司税后利润怎么算
  • 人力资源公司劳务外包
  • 电子税务局增值税发票系统
  • 什么公司可以开普票
  • 抵扣认证的发票开红字有影响吗
  • 金蝶系统如何设置套打
  • 上季度所得税申报怎么填
  • 企业如何列支个人收入
  • 发生哪些情形的应判定为重大电力安全隐患
  • 报关单金额大于合同金额
  • 增值税月报时间
  • 印花税的计税金额
  • 航天金税盘费用怎么做账
  • 招商引资政府返税政策不兑现
  • 收代扣代收代征手续费会计分录
  • 跨年度的费用发票怎么做账
  • 自然人独资企业和一人有限责任公司
  • 企业报税的详细流程期限为
  • 商业保险费包括哪些
  • 资本公积如何计提
  • win11不显示桌面,但是有文件夹打开的标志是怎么回事
  • php jquery教程
  • 怎么打开win11的控制面板
  • 如何设置两台路由器连接
  • apkpure 安全
  • vue项目部署到服务器上,页面空白
  • php模板引擎执行时间
  • php数组数据结构
  • ai绘画图片
  • 应收账款与预收账款重分类表怎么做
  • css元素居中的几种方法
  • 政府补助收入是免税收入还是不征税收入
  • 水电费发票如何分配给客户
  • java中同步
  • ffmpeg png to mp4
  • 出售固定资产不能作为企业的收入
  • asp 数据库
  • 外贸进项税额怎么算
  • 怎样备份mysql数据库
  • 报销流程怎么走
  • 付给对方钱对方应该怎么写
  • 因质量问题免费退货
  • 民办非企业单位工会经费
  • 运输公司内账会计每天需要做什么
  • 持有至到期投资是债权投资吗
  • 残疾人工资加计扣除包括社保吗
  • 施工企业机械租赁费用
  • 装修付款分期
  • 不能抵扣的普通发票如何做分录
  • 固定资产清理营业外支出可在税前扣除?
  • 股东撤资后需要承担责任
  • 费用报销冲抵借支
  • 京东提现一般多久到账
  • 在网上订机票怎么订
  • 进项发票超过期限不认证怎么办
  • 免征企业所得税的有哪些行业
  • sqlserver (parse name)字符串截取的方法
  • 如何在windows server 2016如何加域
  • centos php apache
  • 电脑出现黑屏英文要怎么处理
  • win7 系统设置
  • Win10预览版更新弹窗如何关闭
  • SUSE Linux Enterprise Server 11 SP1 安装教程图文详解
  • ghoststarttrayapp.exe是什么进程 有什么作用 ghoststarttrayapp进程查询
  • 重装win7系统后没有无线网
  • w10简易版
  • perl中\s+
  • python 详细
  • JavaScript对象的创建
  • js nextSibling属性和previousSibling属性概述及使用注意
  • JavaScript中的数据类型分哪为两大类?
  • 土地流转需要什么材料
  • 如何在国税网查企业年金
  • 发票专用章盖在哪里
  • 城镇土地使用税的计算公式
  • 江西各市财政收入和支出
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设