分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 技术分享

CSS3实现头像旋转

发布时间:2023-09-06 01:36责任编辑:白小东关键词:CSS

CSS3中的transform:rotate()可以实现旋转功能,效果如网站图标。

 1 <!DOCTYPE html> ??2 <html> ??3 ????<head> ??4 ????????<meta charset="UTF-8"> ??5 ????????<title></title> ?6 ????????<style type="text/css"> ??7 ????????????img{ ??8 ????????????????border: #000 solid 2px; ??9 ????????????????display: block; ?10 ????????????????margin: 50px auto; ?11 ????????????????border-radius: 50%; ?12 ????????????????transition: all 2.0s; ?13 ????????????} ?14 ????????????img:hover{ ?15 ????????????????transform: rotate(360deg); ?16 ????????????} ?17 ????????</style> ?18 ????</head> ?19 ????<body> ?20 ????????<img src="https://pic.cnblogs.com/avatar/1313420/20180111055446.png" /> ?21 ????</body> ?22 </html> ?

CSS3实现头像旋转

原文地址:https://www.cnblogs.com/qingdaer/p/8279659.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved