前端自学笔记2：旋转效果的实现

已于 2023-06-28 21:21:55 修改
阅读量1k 收藏 5
点赞数 3
分类专栏： 前端自学笔记 文章标签： 前端 笔记 css
于 2023-04-15 18:09:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44986029/article/details/130169817
版权

前端自学笔记2：平移、旋转、缩放、颜色渐变的实现

总结：

在这里插入图片描述

1、通过平移效果实现绝对定位元素的水平居中（将小盒子设置到大盒子中央）

在这里插入图片描述

原理：第一步，先通过设置绝对定位，将小盒子向右、向下移动大盒子的50%；第二步，再通过平移，将小盒子向左，向上移动自身的50%。
第一步实现

/*给大盒子设置相对定位：*/
position: relative;
/*给小盒子设置绝对定位：*/
position: absolute;
left: 50%;
top: 50%;

效果如下：
在这里插入图片描述
第二步实现：

/*给小盒子设置样式*/
transform: translate(-50%, -50%);

效果：
在这里插入图片描述

2、通过平移设置双开门效果

请添加图片描述
原理：1、给一个大盒子设置背景图片；2、给大盒子设置before和after伪元素；3、分别给两个伪元素设置背景图片，并设置浮动；4、给两个伪元素设置hover状态。5、给大盒子设置：overflow: hidden;
实现：

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 1366px;
            height: 600px;
            margin: 0 auto;
            /* 第一步 */
            background: url('./images/bg.jpg');
            /* 第5步 */
            overflow: hidden;
        }
        /* 第二步 */
        .box::before,
        .box::after {
            content: '';
            width: 50%;
            height: 600px;
             background: url(./images/fm.jpg); /*第三步，首先给左边和右边伪元素设置一样的背景图片 */
            float: left;    /*设置浮动，将两个伪元素放到一行显示*/
            transition: all 0.5s;  /*设置过渡效果*/
        }
        .box::after {
            background-position: right 0;  /*第三步，然后这里是将右边的伪元素的背景图片设置为右半张图 */
        }
        /* 第四步，给两个伪元素设置hover状态 */
        .box:hover::before {
            transform: translateX(-100%);
        }
        .box:hover::after {
            transform: translateX(100%);
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

ps:如果不设置大盒子为overflow：hidden;的状态效果如下
请添加图片描述

3、旋转效果的实现：transform: rotate(360deg);（表示顺时针旋转一圈）

请添加图片描述

代码：

<!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>旋转效果</title>
    <style>
        img {
            width: 250px;
            transition: all 2s;
        }
        img:hover {
            /* 顺，正值 */
            transform: rotate(360deg);
            /* 逆，负值 */
            /* transform: rotate(-360deg); */
        }    
    </style>
</head>
<body>
    <img src="./images/rotate.png" alt="">
</body>
</html>
4、修改旋转中心点：

请添加图片描述
代码：

<!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>转换原点</title>
    <style>
        img {
            width: 250px;
            border: 1px solid #000;
            transition: all 2s;  /*设置过渡属性*/
            transform-origin: right bottom;  /*设置旋转原点为右下角*/
            /* transform-origin: left bottom; */
        }
        img:hover {
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <img src="./images/rotate.png" alt="">
</body>
</html>
5、平移+旋转

请添加图片描述
代码

<!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>多重转换</title>
    <style>
        .box {
            width: 800px;
            height: 200px;
            border: 1px solid #000;
            margin: 500px 500px;
        }
        img {
            width: 200px;
            transition: all 2s;
        }
        .box:hover img {
            /* 边走边转 */
            transform: translate(600px) rotate(720deg);  /*二者不能更换位置，否则会乱飞*/
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./images/tyre.png" alt="">
    </div>
</body>
</html>
6、设置缩放效果 transform: scale(1.2);(大于1表示放大，小于1表示缩小)

案例：放大和缩小播放按钮。
在这里插入图片描述
代码

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        img {
            width: 100%;
        }
        .box {
            width: 249px;
            height: 210px;
            margin: 50px auto;
            overflow: hidden;
        }
        .box p {
            color: #3b3b3b;
            padding: 10px 10px 0 10px;
        }
        .box .pic {
            position: relative;
        }
        .box .pic::after {
            position: absolute;  
            top: 50%;
            left: 50%;
            /* transform: translate(-50%,-50%); 不在这个地方写是为了避免被下边的transform:scale(5)层叠掉。 */
            /* margin-left: -29px;
            margin-top: -29px; */
            content: '';
            width: 58px;
            height: 58px;
            background-image: url(./images/play.png);
            transform: translate(-50%,-50%) scale(5);
            transition: all 0.3s;
            opacity: 0;  /*设置透明度*/
        }
        .box li:hover .pic::after{
            transform: translate(-50%,-50%) scale(1);
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li>
                <div class="pic"><img src="./images/party.jpeg" alt=""></div>
                <p>【和平精英】“初火”音乐概念片：四圣觉醒......</p>
            </li>
        </ul>
    </div>
</body>
</html>
7、颜色渐变

由透明色渐变为半透明黑色：
在这里插入图片描述
样式代码

background-image: linear-gradient(
    transparent,
    rgba(0,0,0,.5)
);

彩虹色渐变：(感觉报看)
在这里插入图片描述
代码：

background-image: linear-gradient(
	red,
	orange,
	yellow,
	green,
	rgb(0, 77, 128),
	blue,
	purple            
);
HZWANG30
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web前端：3d立体旋转+源码+详解
成长的嘻嘻哥
12-23 1719
简单，不花哨
CSS实现动画旋转变色
weixin_44560357的博客
01-19 1562
作者：黄文斌 撰写时间：2019   年  1 月  17 日 开发工具与关键技术：CSS CSS实现动画旋转变色 这里我利用了属性animation来实现了动画旋转 用animation属性必须要配合keyframes来使用； keyframes：实现从0%到100%之间的动画效果 下面是我编写的旋转代码 &lt;html&gt; &lt;head&gt;     &lt;m...
你还不知道css的旋转效果怎么实现？来这里看看吧
热门推荐
Wod_7的博客
05-22 1万+
删除 重试 复制 旋转效果是CSS中最基础而且最常用的效果之一。它在设计中拥有着广泛的应用，可以用于改变图标、旋转图片、达到复杂的动画效果等等。在这篇文章中，我们将深入讨论如何在CSS中实现旋转效果，从旋转图标到3D旋转，让我们开始吧！
前端的一些3D旋转效果和实例——table切换
最新发布
qq_51321722的博客
04-20 353
1、translate(x,y) 2D的设置移动距离，x表示沿x轴的距离，y表示沿y轴的距离（y轴是向下为正）不写代表0。5、skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。3、scale(x,y) 元素缩放，是比例，省略y时，会默认y跟x相同。rotate3d(x,y,z,angle) 3d旋转。scale3d(x,y,z) 3d效果上的缩放。2、translate3d(x,y,z) 3D的，实例——table切换。
CSS属性transform之旋转:rotate,缩放:scale,倾斜:skew,移动:translate
weixin_44588733的博客
01-24 1042
众所周知，无论什么东西，谁都希望努力做到最好，那么，在制作精美图片背景的同时，注解文字的摆放又成了问题，下面我将简单用transform的几个属性来做图片的动态提示效果 一、旋转rotate 用法：transform:rotate（360deg）; 共一个参数“角度”，单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转，上述代码作用是顺时针旋转360度。 图1 图2 如图1、2，简单的样...
使用css实现一个图片360°旋转并能调整速度的解决方案
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
09-05 1377
如果它是’2s’（快速），我们就将它改为’4s’（慢速）。如果它是’4s’（慢速），我们就将它改为’2s’（快速）。这样，每次点击按钮时，图片的旋转速度就会改变。要实现一个圆形图片360°旋转并且能调整速度的效果，你需要结合HTML，CSS和JavaScript。首先，在HTML中，我们需要一个图片元素和一个按钮元素，按钮用于调整旋转速度。这个动画从0度开始旋转到360度。然后，在CSS中，我们需要为图片元素设置一个动画，使其能够进行360°旋转。的图片元素上，设置动画时间为2秒，并且让动画无限次地重复。
css实现圆环边框的渐变颜色并且旋转
weixin_46995731的博客
11-20 2662
实现边框的渐变颜色并且旋转 整体思路:用两个圆覆盖,制作圆环,利用大圆渐变色的背景旋转动画来实现边框旋转 上代码 HTML <div style="width:100px;height:100px" class="pan-thumb"> <div class="center"> </div> </div> CSS <style lang="css"> .pan-thumb {
SAP SD 模块自学笔记2.doc
06-30
SAP SD 模块自学笔记(第二篇):Billing会对CO-PA产生影响， PA-Profitability Analysis是CO中的模块，用于对利润进行分析。 通过Billing Document查看一个CO-PA的凭证
stm3自学笔记_stm32_STM32自学笔记_
10-03
stm32自学教程。适合开发者，学生，单片机爱好者
前端自学的一些笔记
07-11
JavaScript是前端开发的核心，用于实现动态效果和交互。学习JavaScript，你需要掌握变量、数据类型、运算符、流程控制（条件语句、循环）、函数、对象和数组等基础知识。随着ES6（ECMAScript 2015）及以后版本的发布...
比较酷的HTML5旋转特效.rar
07-10
比较酷的HTML5旋转特效,css3-rotate实现的效果，像一个仪表盘一样的旋转，设计漂亮。学习CSS3的可参考。
STM32自学笔记_stm32_STM32自学笔记_
09-29
通过“STM32自学笔记”这样的资料，你可以系统地学习STM32的基础知识和实践技巧，逐步掌握单片机开发的全貌。在实践中，不断实验和调试，加深对外设的理解，是提升技能的关键。同时，参与社区交流，参考他人的项目，...
H5画布canvas特效（旋转跳跃不停歇）
Tino's Space
12-27 3687
.panel{ margin:20% auto auto 35%; } .input{ width:500px; height:30px; } .btn{ width:515px; height:40px; } .input_form{ float:left; margin:-35% 0 0 25%; position:absolute; } Login function proje
css3动画旋转360度,CSS3旋转动画(360度旋转、旋转放大、放大、移动) 用法和实例...
weixin_42516007的博客
08-03 3212
CSS3旋转动画(360度旋转、旋转放大、放大、移动) 用法和实例Internet Explorer 10、Firefox、Opera 支持 transform 属性。Internet Explorer 9 支持替代的 -ms-transform 属性(仅适用于 2D 转换)。Safari 和 Chrome 支持替代的 -webkit-transform 属性(3D 和 2D 转换)。Opera ...
前端-demo（旋转立方体）
F-Prometheus的博客
11-17 750
旋转立方体 刚开始学，可能不是很好，各位看官凑合着看吧 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-
网页中图片旋转的几种实现方式
孤城幻夜
12-15 6720
网页中图片旋转一般有下面三种常见的实现方式： 一、 ie 滤镜 IE的图形旋转滤镜，通过指定BasicImage滤镜的rotation值旋转元素，旋转方向为顺时针，旋转的中心点为元素的左上角。rotation可以有4个旋转值：0, 1, 2,和3分别表示将元素旋转0度、90度、180度、270度。 浏览器支持： IE5.5+ CSS代码：  .rotate{ fi
HTML和CSS实现图片翻转效果
weixin_30315723的博客
08-20 7402
实现图片翻转，首先来分析一下我们希望实现的是怎样的翻转效果？又该如何去实现呢？ 一、希望实现的效果 页面上的图片在光标悬停在上面的时候会发生翻转效果，翻转过后显示出背面的说明文字。 鼠标没有悬停在上面的效果 鼠标悬停在其中一张图片上的效果： 二、实现方法 每幅图片的翻转效果都是沿着Y轴进行反转的，可以是用3D变换来实现这种效果...
计算机网络原理，学习笔记，自学参考
11-02
学习笔记，适用于自学考试的纯干货

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值