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

  • 申报纳税的意思
  • 商业承兑汇票未到期贴现
  • 行政事业单位卖废品怎么处理
  • 发放工资的转账支票出票人是谁
  • 报个税的工资表
  • 自然人独资是小规模纳税人吗
  • 每月记账报税客户怎么填
  • 支付境外销售佣金是不是属于完全在境外发生的服务
  • 月末本年利润余额怎么算
  • 应付账款少记违反什么认定
  • 企业赔款可以抵税吗
  • 销售单位收入和支出要怎么做账?
  • 公司之间有哪些关系
  • 免征残保金还需交税吗
  • 汇算清缴的所得税会计分录
  • 奖金能否和工资一起发放
  • 资产置换会计处理办法
  • 核定征收企业所得税应税所得率
  • 未抵扣进项税额可以退税吗
  • 公司贷款收入如何计算
  • 怎么让资产负债率下降
  • 在建工程的施工方案可以外传吗
  • linux获取网络接口及ip命令
  • php数组根据值排序
  • 没有一般纳税人证明怎么办
  • 最新制作视频的软件
  • 借条未写还款期限,最长保护期是多久
  • 怎么激活对话框取消
  • macOS 10.13允许任何来源没有了怎么办?macOS 10.13允许任何来源没了开启步骤
  • 混合债务工具
  • 开出发票单位收到款项如何平账?
  • php面向对象面试题
  • PHP:pcntl_wait()的用法_PCNTL函数
  • vue-plugin-hiprint vue hiprint vue使用hiprint打印控件VUE HiPrint HiPrint简单使用
  • 航天金税盘发票作废流程视频
  • 政府代建项目税收政策
  • js 数组去重的四种方法
  • 命令行 压缩
  • 应交税费为负数要调整吗
  • 自然人股东原价转让股权
  • sqlserver怎么显示结果窗口
  • 收到银行承兑汇票怎么兑现
  • 差旅费报销会计分录题目
  • 融资租入企业所得税扣除
  • 期末结转生产成本的账户
  • 跨年度的银行未入账如何处理
  • 预收账款借贷方向增减
  • 什么是无形资产包括哪些
  • 库存商品用于研发分录
  • 应发工资应税工资
  • 筹建期开办费明细
  • 一次性收入怎么计税
  • 毛利润包括什么
  • 股权变更需要多久
  • sql server的实例
  • mysql增删改查面试题
  • 微软雅黑可以免费用吗
  • ubuntu的sudo
  • windows环境是什么意思
  • win10 win7兼容模式
  • windows7自带的画图软件在哪里打开
  • win8都有哪些版本
  • win10开机蓝屏提示修复
  • perl如何使用
  • [置顶]bilinovel
  • unity脚本如何运行
  • unity3d第一人称射击游戏教程
  • 批处理 /b
  • 谈谈网页设计中的内容
  • android!
  • nodejs调用打印机
  • js对象类型的语法规则
  • javascript页面布局
  • Unity PlayerPrefs.DeleteAll 无效以及 PlayerPrefs文件保存位置
  • webview自定义视频播放器
  • jQuery 获取跨域XML(RSS)数据的相关总结分析
  • jquer选择器
  • 税收六大体系和六大能力基层
  • 医生算是公务员吗?
  • 退契税的时间是什么时候
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设