当鼠标悬停在时，改变字体,旋转,

最新推荐文章于 2023-03-31 20:52:12 发布
原创 最新推荐文章于 2023-03-31 20:52:12 发布 · 1.1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文展示了一个使用HTML5和CSS实现的响应式网页设计案例，包括动态效果和布局调整。该页面具备蓝色彩风格，支持鼠标悬停交互，适用于商业落地页。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

      span.change:hover{
          color: red;
           font-size:50px ;
       }
        a.change:hover{

            color:indigo;
            -webkit-transform: rotate(-360deg);
            -moz-transform: rotate(-360deg);
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
            display:block;
            transition:2s;

        }
        img.change:hover{

            -webkit-transform: rotate(-25deg);
            -moz-transform: rotate(-25deg);
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

        }

    </style>
</head>
<body background="../images/bg.jpg" >


<div style="width: 100%">

    <div style="width:50%;float: left">

        <h1 style="padding-top: 100px;margin-left: 100px;color: snow"><span class="change">Blue App Template</span></h1>
        <h3 style="padding-top: 100px;margin-left: 100px;color: snow"><a class="change" >One page Responsive HTML5 parallax<br> business landing page</a></h3>

        <h4 style="padding-top: 100px;margin-left: 100px ;color: snow">Lorem ipsum dolor sit amet,
              consectetur adipisicing elit. Similique autem,<br>atque in voluptatibus repellat nostrum iustoarchitecto vel placeat<br> numquam omnis assumenda.</h4>

        <a href="http://frg.wan.360.cn" target="_blank">
            <img style="margin-left: 100px" src="../images/001.png" height="70" width="286" onmouseover="this. src='../images/001.png'" onmouseout="this. src='../images/003.png'"/>
        </a>


    </div>

    <div style="width:50%;float: left;text-align: center" >

        <img src="../images/phone.png" class="change"/>

    </div>

</div>


</body>
</html>
snow箴言
关注
CSS3鼠标悬停文字动画倾斜效果
06-12
效果描述： 当鼠标悬停在图片上的时候倾斜显示多种透明的小动画效果 鼠标移走后恢复默认效果 不使用任何js代码，纯静态的css3即可实现这种要用大量JS才能实现的特效 而且占用内存极低，代码简单易懂，推荐各位懒友使用(未来趋势) 使用方法： 1、将head中的样式复制到你的样式表中 2、将body中的代码部分拷贝过去即可 (CSS3特效，不支持低版本浏览器)
纯CSS3制作的鼠标悬停时边框旋转
09-24
再使用`@keyframes`定义一个名为`whirl`的动画，让这个边框在鼠标悬停时执行旋转动作。 具体实现步骤如下： 1. 设置`body`元素的字体大小为10px，这里使用了`font-size: 62.50%`的写法。目的是为了更方便地使用rem...
鼠标悬停在div上图片或文字变大效果
Java学习
06-02 3009
div中的img标签设置css样式 ， 查看参考页面 div img { cursor: pointer; transition: all 0.5s; } div img:hover { transform: scale(1.1); }
html 鼠标悬停时字体变样,css实现鼠标滑过改变文字的方法
weixin_36364022的博客
06-03 1227
css实现鼠标滑过改变文字的方法同学你们知道怎么实现css鼠标滑过改变文字的效果吗？下面小编给大家整理了css实现鼠标滑过改变文字的方法，供大家参阅。代码如下:#Menu {width:500px;margin:50px auto;border:1px solid #CCC;overflow:hidden;}#Menu ul {margin:0;padding:0;list-style:none;...
鼠标移上图标字体，让其旋转
weixin_30381317的博客
07-21 344
效果：容器内放置了一个图标字体，当鼠标移至容器时，让图标字体旋转角度。 一开始使用的是 bootstrap 的图标字体，它需要添加 2 个类，才能让图标正常显示，通过伪元素 ::before 添加2个类的内容，显然比较麻烦，所以，换了 icomoon 自己定制的图标字体，发现还是不行，于是才发现问题出在代码层面。需要将图标字体脱离文档流，无论是定位还是浮动，脱离即可。（目前只实践出是由于这...
Html字母变大的代码,css鼠标选中字体变大 div css鼠标悬停超链接的文字变大
weixin_42462474的博客
05-31 7941
css鼠标选中字体变大 css鼠标悬停超链接的文字变大CSS布局鼠标悬停在超链接上字体变大，css实现鼠标经过锚文本文字时改变字体大小篇。实现这一效果需要的是:hover伪类设置需要字体。鼠标选中悬停经过时html超链接字体变大变化实例css代码：a{ font-size:12px}a:hover{ font-size:16px}解释：a{ font-size:12px}——默认超链接字体大小为1...
鼠标悬停文字旋转动画导航代码.zip
07-04
本示例中的"鼠标悬停文字旋转动画导航代码.zip"提供了一种创新的方式，利用JavaScript（JS）实现了一种交互式的菜单导航，当用户将鼠标悬停在导航项上时，文字会进行逆时针旋转的动画效果。这种特效不仅增加了网站的...
CSS3鼠标悬停图片文字动画效果特效代码
03-20
在网页设计中，CSS3（层叠样式表第三版）为开发者提供了丰富的视觉效果和交互体验，其中之一就是鼠标悬停时的图片文字动画效果。这种效果可以极大地提升用户体验，吸引用户的注意力，使得网页元素更加生动有趣。下面...
CSS3悬停图标旋转缩放特效
06-24
当鼠标指针移到图标上方时，通过CSS的`:hover`伪类选择器，我们可以改变图标的transform属性值，实现图标旋转和缩放的效果。 3. **过渡（transition）属性**：为了使动画更加平滑，我们通常会结合使用`transition`...
css3鼠标悬停小图标动画特效
07-24
在“css3鼠标悬停小图标动画特效”中，我们通常会为图标添加一个:hover伪类，当鼠标悬停在图标上时触发动画。例如： ```css .icon { width: 50px; height: 50px; } .icon:hover { animation: hoverEffect 0.5s ...
jquery-js实现鼠标悬浮上去显示文字上下左右翻动效果
07-12
jquery实现鼠标悬浮上去显示文字上下左右翻动效果！
文字围绕鼠标旋转并移动（滚轮控制半径）--鼠标事件
weixin_30882895的博客
08-27 100
网上看到的字符旋转效果，加以改动跟随鼠标旋转并移动，滚轮控制旋转圆到横向直径和纵向直径： 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> ...
使用HTML和CSS实现鼠标悬停时文本的旋转
X W F
07-05 1812
鼠标悬停在文字上时，文字会出现旋转效果。这种效果实现的原理是，将每个文字或者单词的每个字母在任一轴（最好是Y轴）一起旋转。 每个文字或者单词都包裹在标记中，然后使用CSS：hover Selector选择器，我们将在Y轴上旋转每个文字。 我们将把文字分为两部分，在第一部分中，我们将创建旋转文本的HTML基本结构。 在第二部分中，通过CSS实现将鼠标悬停在该文本时，它将使该文本结构可旋转。 在本文中，我们将使用HTML创建结构。 HTML：在此，我们创建了一个无序列表，并将每个字母包装在一个list-item
CSS+HTML动手实战（一）鼠标悬停效果
qq_52932975的博客
03-31 4173
鼠标悬浮时实现div翻转和div上出现闪光条块，使用了CSS3+HTML5一些新的属性和方法，主要是展示过渡transition属性的效果。
实现鼠标悬停时文字的旋转
weixin_40442639的博客
07-22 853
效果： 要实现鼠标悬停在文本上时，是文字发生旋转。 原理：将每个文字或者单词的每个字母在任一轴（最好是Y轴）一起旋转。 具体实现是：1.将每个文字或者单词都包裹在标记中，然后使用CSS：hover Selector选择器，我们将在Y轴上旋转每个文字。 2.把文字分为两部分，在第一部分中，我们将创建旋转文本的HTML基本结构，在第二部分中，通过CSS实现将鼠标悬停在该文本时，它将使该文本结构可旋转。 简单点来时就是：创建了一个无序列表，并将每个字母包装在一个li元素当中。根据这个描述我们的HTML结构如下：
css3 鼠标滑过图片时文字旋转动画
Lucky Star的博客
12-17 4279
特效描述：鼠标滑过图片的时候，以左上角为原点，顺时针旋转90度出现黑色遮罩层，之后文字一行行以右上角为原点旋转180度出现，纯css3实现，拷贝下面代码保存为html文件就可以查看效果。（所用到的图片可以用本地的图片代替）   炫酷C .box{    border: 1px solid #333;    position: relative;
当鼠标悬浮在元素上面时设置样式
bingguang1993的博客
11-02 4339
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style&gt; a:hover { background-color:yellow; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;a href="http://www.w3school.com.cn"&
鼠标悬停在一个标签上时，显示一段文字的两种方法
热门推荐
weixin_38098192的博客
05-28 6万+
1.使用title：如果使用title属性时很方便，但是不灵活&lt;table border="1"&gt; &lt;tr&gt; &lt;td title="鼠标停留显示内容1"&gt;文字内容1&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;2.可以监听鼠标事件onmouseover&lt;table border=&quo
HTML5特性--＞语义、新属性、h5介绍
Ghost__H的博客
03-05 646
1.什么是HTML5? 1.HTML5是HTML标准的最新版本，它包含了两种不同的概念： （1）它是一个新本的HTML语言，具有新的元素、属性和行为。 （2）它拥有更强大的技术集，允许用户定义更强大更多样化的网站应用程序。 2.HTML5的优势 跨平台：所有系统都能运行 免安装：打开浏览器，就能使用 快速部署：升级只需在服务器更新代码 超链接：可以与其他网站互连，可以被搜索引擎检索 3.HTML新增的预定义属性 我们知道在html5以前的版本...
CSS3实现圆形图片鼠标悬停旋转效果技巧
通过指定旋转的角度，可以在鼠标悬停时改变图片的朝向。例如，如果我们希望图片在鼠标悬停时旋转45度，就可以使用`rotate(45deg)`。 3. `transition`属性 `transition`属性让CSS样式的变化有一个过渡效果，而不是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值