CSS特效019:图标图片悬浮旋转一周

news2024/11/30 14:31:42

CSS常用示例100+专栏目录

本专栏记录的是经常使用的CSS示例与技巧,主要包含CSS布局,CSS特效,CSS花边信息三部分内容。其中CSS布局主要是列出一些常用的CSS布局信息点,CSS特效主要是一些动画示例,CSS花边是描述了一些CSS相关的库、知识点、理论篇章等。 因为常用所以记录、展示、分享,希望能给您带来帮助。

文章目录

    • 效果图
    • 源代码
    • CSS基础知识点
    • 结尾语

css实战中,怎么绘制图标图片悬浮旋转一周效果呢?主要利用了transform: rotateY(1turn);的神奇功能,hover时候,图片旋转一周,背景色也跟着变一下。

效果图

在这里插入图片描述

源代码

/*
* @Author: 大剑师兰特(xiaozhuanlan),还是大剑师兰特(CSDN)
* @此源代码版权归大剑师兰特所有,可供学习或商业项目中借鉴,未经授权,不得重复地发表到博客、论坛,问答,git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2023-11-26
*/
<template>
	<div class="container">
		<div class="top">
			<h3>图标图片悬浮旋转一周</h3>
			<div class="author">大剑师兰特, 还是大剑师兰特,gis-dajianshi</div>
		</div>
		<div class="dajianshi">
			<svg viewBox="0 0 1024 1024" p-id="2419" width="80" height="80">
				<path
					d="M512 42.666667A464.64 464.64 0 0 0 42.666667 502.186667 460.373333 460.373333 0 0 0 363.52 938.666667c23.466667 4.266667 32-9.813333 32-22.186667v-78.08c-130.56 27.733333-158.293333-61.44-158.293333-61.44a122.026667 122.026667 0 0 0-52.053334-67.413333c-42.666667-28.16 3.413333-27.733333 3.413334-27.733334a98.56 98.56 0 0 1 71.68 47.36 101.12 101.12 0 0 0 136.533333 37.973334 99.413333 99.413333 0 0 1 29.866667-61.44c-104.106667-11.52-213.333333-50.773333-213.333334-226.986667a177.066667 177.066667 0 0 1 47.36-124.16 161.28 161.28 0 0 1 4.693334-121.173333s39.68-12.373333 128 46.933333a455.68 455.68 0 0 1 234.666666 0c89.6-59.306667 128-46.933333 128-46.933333a161.28 161.28 0 0 1 4.693334 121.173333A177.066667 177.066667 0 0 1 810.666667 477.866667c0 176.64-110.08 215.466667-213.333334 226.986666a106.666667 106.666667 0 0 1 32 85.333334v125.866666c0 14.933333 8.533333 26.88 32 22.186667A460.8 460.8 0 0 0 981.333333 502.186667 464.64 464.64 0 0 0 512 42.666667"
					p-id="2420">
				</path>
			</svg>
		</div>
	</div>
</template>

<style scoped>
	.container {
		width: 1000px;
		height: 580px;
		margin: 50px auto;
		border: 1px solid green;
		position: relative;
	}

	.top {
		margin: 0 auto 0px;
		padding: 10px 0;
		background: darkcyan;
		color: #fff;
	}

	.dajianshi {
		width: 300px;
		height: 300px;
		margin: 50px auto;
		background: greenyellow;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	svg {
		transition: all 1s;
	}

	.dajianshi:hover {
		background: orange;
	}

	.dajianshi:hover svg {
		transform: rotateY(1turn);
	}
</style>


CSS基础知识点

1.CSS样式表
2.基础选择器:(1)标签选择器,(2)类选择器,(3)id选择器,(4)通配符选择器
3.复合选择器:(1)后代选择器,(2)子选择器,(3)并集选择器,(4)交集选择器,(5)伪类选择器。
4.字体样式属性:(1)字体大小font-size,(2)字体类型font-family,(3)字体粗细font-weight,(4)字体风格font-style
5.文本外观样式:(1)设置文本颜色color,(2)word-spacing,(3)letter-spacing,(4)line-height,(5)text-transform,(6)text-decoration,(7)text-align,(8)text-indent,(9)white-space
6.文本外观属性:(1)text-shadow,(2)overflow
7.CSS层叠性、继承性及优先级
8.边框介绍
8.1边框属性:(1)border-style,(2)border-width,(3)border-color,(4)border-radius
8.2内边距属性
8.3外边距属性
8.4box-shadow
9.背景属性
9.1背景颜色
9.2背景图片:(1)background-repeat,(2)background-position,(3)background-attachment,(4)background-size,(5)background-origin,(6)background-clip,(7)复合写法,(8)不透明
10.元素的类型
11.span标签
12.display
13.表格标签:(1)table标签,(2)tr标签,(3)td标签,(4)th标签,(5)表格边框,(6)折叠边框,(7)表格宽度和高度,(8)表格边框间距border-spacing,(9)表格标题位置caption-side
14.表单
14.1创建表单:(1)标签
14.2表单控件:(1)input控件,(2)input/标签的type属性,(3)textarea控件,(4)select控件
15.CSS盒子模型:(1)边框(border),(2)内边距(padding),(3)外边距(margin),(4)清除内外边距,(5)盒子模型
16.浮动布局:(1)传统网页布局,(2)浮动简介,(3)浮动特性,(4)清除浮动
17.定位布局:(1)定位组成,(2)相对定位relative,(3)绝对定位absolute,(4)子绝父相,(5)固定定位fixed,(6)定位叠放次序z-index,(7)定位拓展
三.其他
1.圆角边框:(1)圆形,(2)圆角矩形
2.盒子阴影
3.文字阴影
4.用户界面样式:(1)鼠标样式 cursor,(2)轮廓线 outline,(3)防止拖拽文本域 resize,
5.过渡 transition

结尾语

CSS的应用无处不在,希望某个片段就能帮助你,欢迎学习GIS的朋友一起交流。
《 Openlayers 综合示例200+ 》,
《 leaflet示例教程100+ 》,
《 Cesium示例教程100+》,
《MapboxGL示例教程100+》。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1253441.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Android WiFi的断开分析

1.wifi断开大体流程&#xff1a; 1.wifi断开 wlan-driver最先知道。 2.wlan-driver在与路由器连接的时候(未断开时), 会有周期性的beacon帧来维持连接&#xff0c;AP端一旦遇到突发事情&#xff0c;会立刻通过802.11协议的 deauth 帧/ reject 帧等 通知到 driver。 3. wlan-…

计算器的模拟实现

计算器的模拟实现 一、实验题目&#xff1a;计算器二&#xff1a;实验目的&#xff1a;三&#xff1a;实验内容与实现1&#xff1a;【实验内容】2&#xff1a;【实验实现】1.计算器界面的实现&#xff0c;如下图所示&#xff1a;2&#xff1a;各项功能的实现&#xff0c;如下图…

canvas版放大镜

效果预览图 完整代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>放大镜</title><st…

C++ vector迭代器失效

STL中vector迭代器失效常见错误写法示例 最近在看STL容器失效的例子&#xff0c;涉及到vector数组迭代器失效的问题&#xff0c;如果不注意使用&#xff0c;很容易出现问题&#xff0c;我们先来看一下一个简单的示例程序&#xff0c;在数组nums中删除大于50的元素&#xff0c;…

运维高级-day01

shell回顾 1、快速生成版权控制信息&#xff0c;具体的内容自己替换 [root scripts]# cat ~/.vimrc autocmd BufNewFile *.py,*.cc,*.sh,*.java exec ":call SetTitle()" func SetTitle() if expand("%:e") sh call setline(1,"#!/bin/bash")…

【数据库篇】关系模式的表示——(2)规范化

范式&#xff1a;范式是符合某一种级别的关系模式的集合 规范化&#xff1a;是指一个低一级的范式的关系模式&#xff0c;通过模式的分解转换为若干个高一级范式的关系模式的集合。 1NF 每个分量必须是不可分开的数据项&#xff0c;满足这个条件的关系模式就是1NF。 2NF 若…

代码随想录算法训练营第四十六天【动态规划part08】 | 139.单词拆分、背包总结

139.单词拆分 题目链接&#xff1a; 力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 求解思路&#xff1a; 单词是物品&#xff0c;字符串s是背包&#xff0c;单词能否组成字符串s&#xff0c;就是问物品能不能把背包装满。 动规五部曲 确定dp数…

②⑩① 【MySQL】什么是分库分表?拆分策略有什么?什么是MyCat?

个人简介&#xff1a;Java领域新星创作者&#xff1b;阿里云技术博主、星级博主、专家博主&#xff1b;正在Java学习的路上摸爬滚打&#xff0c;记录学习的过程~ 个人主页&#xff1a;.29.的博客 学习社区&#xff1a;进去逛一逛~ 目录 ②⑩① 【MySQL】什么是分库分表&#xf…

定时器/计数器的应用

前言 对近期学习定时器进行简单的记录 参考链接 LED数码管的静态显示与动态显示&#xff08;KeilProteus&#xff09;-CSDN博客 外中断的应用-CSDN博客 【mcuclub】定时器/计数器_定时器/计数器的内部结构和工作方式-CSDN博客 5.图解定时器/计数器 - 知乎 (zhihu.com) 5…

CPU、GPU、TPU内存子系统架构

文章目录 CPU、GPU、TPU内存子系统架构概要CPUGPUTPU共同点和差异&#xff1a; CPU、GPU、TPU内存子系统架构 概要 Memory Subsystem Architecture&#xff0c;图源自TVM CPU CPU&#xff08;中央处理器&#xff09;的内存子系统&#xff1a;隐式管理 主内存&#xff08;…

VMware如何导出和导入镜像OVF虚拟机(以unbuntu为例)

前言&#xff1a;我下载了一个unbuntu的系统镜像&#xff0c;基于这个镜像创建了一个unbuntu的虚拟机&#xff0c;辛辛苦苦配置需要的开发环境&#xff0c;如&#xff1a;安装了mysql&#xff0c;安装了jdk等&#xff0c;此时&#xff0c;我的同事可能需要也是同一套类似环境&a…

视觉CV-AIGC一周最新技术精选(2023-11)

PG-Video-LLaVA: Pixel Grounding Large Video-Language Models https://github.com/mbzuai-oryx/Video-LLaVA将基于图像的大型多模态模型&#xff08;LMM&#xff09;扩展到视频领域是具有挑战性的。最近将基于图像的LMM扩展到视频的方法要么缺乏grounding定位能力&#xff08…

SQL sever2008中的游标

目录 一、游标概述 二、游标的实现 三、优缺点 3.1优点&#xff1a; 3.2缺点&#xff1a; 四、游标类型 4.1静态游标 4.2动态游标 4.3只进游标 4.4键集驱动游标 4.5显示游标&#xff1a; 4.6隐式游标 五、游标基本操作 5.1声明游标 5.1.1.IS0标准语法 5.1.1.1语…

nodejs+vue+python+PHP+微信小程序-书吧租阅管理系统的设计与实现-安卓-计算机毕业设计

在当今高度发达的信息中&#xff0c;信息管理改革已成为一种更加广泛和全面的趋势。为确保中国经济的持续发展&#xff0c;信息时代日益更新&#xff0c;书吧租阅管理系统仍在蓬勃发展。同时&#xff0c;随着信息社会的快速发展&#xff0c;各种管理系统面临着越来越多的数据需…

leetcode刷题日志-15.三数之和

这道题还是有点难度&#xff0c;我能想到的就是三重循环&#xff0c;但是题目限制不能重复&#xff0c;所以这道题三重循环完还要去重&#xff0c;太过于麻烦。看了题解以后&#xff0c;大佬们还是厉害&#xff0c;大概思路是这样子的&#xff1a;先对数组进行排序&#xff0c;…

pandas根据列正逆序排序

题目&#xff1a;根据 buy_quantity 列进行排名&#xff0c;相同值分配相同的最低排名。 import pandas as pd# 创建一个示例 DataFrame data {item_id: [1, 2, 3, 4, 5, 6, 7], buy_quantity: [1, 2, 2, 3, 3, 4, 5]} df pd.DataFrame(data)# 使用 rank() 函数为 buy_quant…

电商数据|淘宝商品数据接口接入|参数|获取商品订单物流|电商数据分析

授权认证 授权不是开放平台对服务商应用的授权 &#xff0c;而是需要开放平台的客户&#xff08;用户&#xff09;对服务商应用的授予&#xff0c;比如ERP应用&#xff0c;也就是淘宝的店铺商家对应用进行授权&#xff0c;使其能够拉取到店铺的订单来完成订单履约。 淘宝授权页…

C++ day39 动态规划 不同路径 不同路径Ⅱ

题目1&#xff1a;62 不同路径 题目链接 &#xff1a;不同路径 对题目的理解 机器人位于m*n的网格中的左上角start,求解走到网格右下角finish的移动路径 动规五部曲 1&#xff09;dp数组的含义以及下标i的含义 dp[i][j]&#xff1a;从start&#xff08;0&#xff0c;0&…

继承性和多态性实验

继承性和多态性实验 一、实验题目二、实验目的三、实验内容与实现1&#xff1a;【实验内容】2:【实验实现】雇员类&#xff08;Employee&#xff09;的实现&#xff0c;如下图所示&#xff1a;2&#xff1a;经理类&#xff08;Manager&#xff09;的实现&#xff0c;如下图所示…

Feast:概念

实体 实体是语义相关特征的集合。用户定义实体以映射其用例的领域。 例如&#xff0c;打车车服务可以将客户和司机作为实体&#xff0c;这些实体将相关特征分组&#xff0c;对应于这些客户和司机。 driver Entity(namedriver, join_keys[driver_id]) # 司机实体 customer E…