小y的放松时刻-0004：悬停效果

最新推荐文章于 2024-08-26 19:22:26 发布
最新推荐文章于 2024-08-26 19:22:26 发布
阅读量127 收藏
点赞数
文章标签： html css
原文链接：http://www.jq22.com/jquery-info10251
版权

小y的放松时刻-0004：悬停效果

内容简介

这是小y学习css、js的记录和分享。
绝大部分内容将会是非原创，侵删。

原链接

60种css3鼠标悬停效果

不可跳过的说明

1. 原链接的代码为收费下载，有需求可自行购买
2.小y为支持原作者，已付费下载代码
3.原本小y想看效果自己实现，却在最后1%上卡住了：“悬停在div上时同时触发多个子标签tranform效果”，最终还是打开了原作者代码，解决了这个问题。因此本篇文章类型依旧为转载。

.photo-frame:hover h2,
.photo-frame:hover p,
.photo-frame:hover img{/*就是这，过去只用img:hover，这次卡住一两个小时后发现
使用.class:hover label 能轻松控制多个标签，既觉得“妙！”，又感自己学习不够灵活*/
    transform: translate3d(0,0,0);
}

付费证明以上是付费的证明，vip可以自由下载。

效果展示

悬停效果
文案为原创自拟。

代码

<body>
    <div class="photo-frame">
        <img class="img" src="../img/relax_0004_01.png"/>
        <div>
            <h2>
                古剑奇谭 三：鄢陵
            </h2>
            <p>鄢陵，水光潋滟耍千秋。如此人界灵地，却被魔入侵后毁得面目全非，生灵涂炭。</p>
        </div>
    </div>
</body>

body{
    display: grid;
    place-items: center;
    height: 100vh;
    background-color: #2f3238;
    font-family: 'Raleway', Arial, sans-serif;
}
.photo-frame{
    position: relative;
    width:640px;
    height:360px;
    overflow: hidden;
}
.photo-frame img{
    position: absolute;
    left: -30px;
    width: 110%;
    height: 110%;
    opacity: 1;
    transition: transform .5s;
    transform: translate3d(-30px,0,0);
}
.photo-frame div{
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 2em;
    width: 100%;
    height: 30%;
}
.photo-frame h2{
    font-size: 2em;
    color:#fff;
    margin: 0.2em 0 0.1em 0;
    transition: transform 0.5s;
}
.photo-frame p{
    color: rgba(255,255,255,0.8);
    margin: 0.1em 0 0 0;
    opacity: 0;
    transition: opacity 0.2s, transform 0.5s;

}
.photo-frame:hover p{
    opacity: 0.9;
}
.photo-frame:hover img{
    opacity: 0.3;
}
.photo-frame h2{
    transform: translate3d(0,10px,0);
}
.photo-frame p{    
    transform: translate3d(0,15px,0);
}
.photo-frame:hover h2,
.photo-frame:hover p,
.photo-frame:hover img{
    transform: translate3d(0,0,0);
}
Akino_夜雨
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css 音频动画_将CSS动画与HTML5音频同步
culi4814的博客
08-15 1180
css 音频动画CSS and HTML have opened a rich playing field for adding multimedia content to your web page, web app, and e-book projects. One innovative way of combining these two technologies is adding sou...
g-hover:悬停效果制作工具
05-27
GHover是一款轻巧的javascript工具，可在您的网站上制作超赞的3D悬停效果 入门 使用NPM安装： $ npm install ghover --save 或使用CDN： https://cdn.jsdelivr.net/gh/GA-MO/g-hover@38cd05a2/lib/ghover.js 您...
小y的放松时刻-0005：悬停效果
Akino_夜雨的博客
06-06 87
小y的放松时刻-0005：悬停效果内容简介原链接效果展示代码 内容简介 这是小y学习css、js的记录和分享。 绝大部分内容将会是非原创，侵删。 原链接 60种css3鼠标悬停效果 这次是小y模仿效果自己实现的，不过相关声明还是不能少。 关于原链接为收费资源的一些说明。 效果展示 代码 <body> <div class="photo-frame"> <img src="../img/relax_0005 1.png"/> &lt
小y的放松时刻-0014：悬停倾斜效果
Akino_夜雨的博客
06-19 127
小y的放松时刻-0014：悬停倾斜效果内容简介原链接效果展示代码 内容简介 这是小y学习css、js的记录和分享。 绝大部分内容将会是非原创，侵删。 原链接 https://www.bilibili.com/video/BV1NA411B7hB 效果展示 代码 <body> <div class="container"> <button class="btn btn1">Hover me</button> <bu
小y的放松时刻-0015：按钮悬停效果
Akino_夜雨的博客
06-20 101
小y的放松时刻-0015：按钮悬停效果内容简介原链接效果展示代码 内容简介 这是小y学习css、js的记录和分享。 绝大部分内容将会是非原创，侵删。 原链接 https://www.bilibili.com/video/BV1d4411e7yV 效果展示 代码 <body> <div class="middle"> <a href="#" class="btn btn1"></a> <a href="#" cla
前端入门-javascript
weixin_46274352的博客
04-15 347
1.什么是Javascript? 1.1概述 javaScript是一门世界上最流行的脚本语言 一个合格的后端人员，必须精通JavaScript 1.2标准 ECMAScript是JavaScript的一个标准 最新版本更新到ES6版本,但是大部分浏览器还只停留在支持ES5 开发环境–线上环境，版本不一致,是常见问题 2.快速入门 2.1引入JavaScript 1.内部标签 <script> //... </script> 2.外部引入 hello.js aler
SitePoint播客＃89：年度播客
culi4814的博客
08-12 757
Episode 89 of The SitePoint Podcast is now available! This week your hosts are Patrick O’Keefe (@iFroggy), Stephan Segraves (@ssegraves), Brad Williams (@williamsba), and Kevin Yank (@sentience). Sit...
响应式网页设计_响应式网页设计：我们从这里去哪里？
culi3182的博客
08-14 1135
响应式网页设计This article is part of a web development series from Microsoft. Thank you for supporting the partners who make SitePoint possible. 本文是Microsoft的Web开发系列的一部分。 感谢您支持使SitePoint成为可能的合作伙伴。 I had t...
【论文阅读】-- MultiStream：探索分层时间序列的多分辨率流图方法
zijin-jdd的博客
06-26 828
多重时间序列是一组在同一时间间隔内出现的多个定量变量。它们出现在医学、金融和制造业等许多领域，用于分析目的。近年来，流图可视化（由 ThemeRiver 演变而来）被广泛用于表示多个时间序列的时间演变模式。然而，在处理多个时间序列时，streamgraph 和 ThemeRiver 都存在可扩展性问题。为了解决这个问题，可以将多个时间序列组织成一个分层结构，在这个结构中，单个时间序列根据它们之间的接近程度被分层分组。
工作中使用到的单词（软件开发）_2023_0316备份
热门推荐
sun0322
03-16 1万+
目录■Java学习汇总■常用链接■2020/03/15 （最初整理 242个单词）2020 6/28 整理2020 6/29 整理2020 7/6 整理■2020 7/23 整理■2020/10/07 以降整理■2020/11/02 以降整理■2020/12/04 以降整理■2020/12/14以降整理■2021/01/01以降整理■2021/02/22以降整理■匿名内部类，lambda表达式，JDK7新特性，等等java相关■2021/03/18以降整理Linux系统性能 相关■其他各种单词，知识（l
passhover-project:悬停项目
03-30
"passhover-project:悬停项目"是一个以JavaScript为基础的开发项目，主要关注的是网页元素在鼠标悬停时的交互效果。这个项目可能涉及到CSS样式、HTML结构以及JavaScript事件监听等多方面的技术。以下是对这个项目...
sprity-css-rollover:在鼠标悬停时提供视频预览效果
05-21
提供鼠标悬停时的视频预览效果 如果没有鼠标悬停，则允许使用默认图像 查看 要求 版本> = 1.0 安装 npm i sprity-css-rollover 用法 <!-- Change cursor manually, if needed --> < style type =" text/...
react-hover:React悬停---使悬停变得容易http
05-06
React悬停---将任何东西变成“悬停”对象 安装 npm $ npm install --save react-hover Codesandbox演示 演示版 用法 您可以在React-hover中打开纯HTML或自定义触发器/鼠标悬停组件。 以下是自定义组件的示例： ...
bootstrap-hover-tabs:悬停时激活Bootstrap选项卡。 自动地！
05-21
引导程序悬停选项卡 这是Bootstrap的超简单轻量级插件，可在悬停时自动激活选项卡。 注意：该插件也可以通过获得的终极必备插件集。 安装 包含主要的Bootstrap JS文件后，链接到代码中的脚本： < script src =...
HTML静态网页成品作业(HTML+CSS+JS)——体育足球介绍设计制作(3个页面)
2301_78945238的博客
08-23 471
HTML静态网页成品作业(HTML+CSS+JS)——体育足球介绍设计制作(3个页面)
【HTML】模拟消息折叠效果【附源代码】
最新发布
Young_Pro的博客
08-26 966
通过 Html 搭配 CSS 和 JavaScript 模拟消息折叠效果，点击展开消息，再次点击即可收起消息
html快速入门
m0_52049533的博客
08-22 549
/
【HTML】DOCTYPE作用
DX390609的博客
08-22 272
DOCTYPE不存在或者形式不正确会导致HTML或XHTML文档以混杂模式呈现，就是把如何渲染html页面的权利交给浏览器。有多少浏览器就会有多少种展示方式，因此要提高浏览器兼容性就必须重视。CSS1 Compat：标准模式（Strick mode），浏览器使⽤W3C的标准解析渲染⻚⾯。BackCompat：怪异模式(混杂模式)(Quick mode)，默认模式，⻚⾯以⼀种⽐较宽松的向后兼容的⽅式显示。，告诉浏览器文档的类型，便于解析文档。不同渲染模式会影响浏览器对CSS代码甚至JS脚本的解析。
解释一下.hvr-grow-shadow { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: box-shadow, transform; transition-property: box-shadow, transform; } .hvr-grow-shadow:hover, .hvr-grow-shadow:focus, .hvr-grow-shadow:active { box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5); -webkit-transform: scale(1.1); transform: scale(1.1); }
06-12
这是一段 CSS 样式表中的代码，定义了一种名为 `hvr-grow-shadow...这些样式可以应用于 HTML 元素中，并且当鼠标悬停在元素上、元素获得焦点或元素被激活时，会触发相应的过渡动画效果，使元素更加具有交互性和动态感。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值